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:

Type

Value

JS (sandbox)

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

JS (production)

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

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.

Redirect customer to a new page.
Use the payment.urlvalue without importing the JS file
Present it as modal overlay (pop-up mode)
Kindly importing the JS file as the sample attached above

PreviousBackend Integration NextSimulate payment and Notification

Last updated 2 months ago