search
DOKU DocsChangelogDOKU Github

Frontend Integration

hashtag
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.

hashtag
DOKU Checkout js location

Simply import the jokul-checkout-1.0.0.js and then call the loadJokulCheckout() with the payment.url:

Type
Value

JS (sandbox)

https://sandbox.doku.com/jokul-checkout-js/v1/jokul-checkout-1.0.0.jsarrow-up-right

JS (production)

https://jokul.doku.com/jokul-checkout-js/v1/jokul-checkout-1.0.0.jsarrow-up-right

circle-info

VIEWPORT

The viewport on the <head> tag is important to ensure that the payment page is load correctly.

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://sandbox.doku.com/jokul-checkout-js/v1/jokul-checkout-1.0.0.js"></script>
    </head>
    <body>
        <button id="checkout-button">Checkout Now</button>

        <script type="text/javascript">
        var checkoutButton = document.getElementById('checkout-button');
        // Example: the payment page will show when the button is clicked
        checkoutButton.addEventListener('click', function () {
            loadJokulCheckout('https://jokul.doku.com/checkout/link/SU5WFDferd561dfasfasdfae123c20200510090550775'); // Replace it with the response.payment.url you retrieved from the response
        });
        </script>
    </body>
</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.urlvalue without importing the JS file

  2. Present it as modal overlay (pop-up mode)

    Kindly importing the JS file as the sample attached above

Pop up mode integration
PreviousBackend IntegrationNextSimulate payment and Notification

Last updated