> For the complete documentation index, see [llms.txt](https://developers.doku.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developers.doku.com/accept-payments/doku-checkout/integration-guide/frontend-integration.md).
# Frontend Integration
### Frontend Integration to display DOKU Checkout Page
The aim of integrating the frontend is to present the DOKU Checkout payment page seamlessly within your website.
Once you have the `payment.url`, you can now display the payment page by embedding the DOKU Checkout JS on your HTML file.
#### DOKU Checkout js location
Simply import the `jokul-checkout-1.0.0.js` and then call the `loadJokulCheckout()` with the `payment.url:`
{% hint style="info" %}
**VIEWPORT**
The `viewport` on the `` tag is important to ensure that the payment page is load correctly.
{% endhint %}
```html
```
There are 2 approaches for integrating the DOKU Checkout page into your web/app interface.
1. Redirect customer to a new page.
Use the `payment.url`value **without** importing the JS file
2. Present it as modal overlay (pop-up mode)
Kindly importing the JS file as the sample attached above