Custom Checkout Page

By default, the DOKU Checkout Page is presented as a redirection. After initiating a payment request and receiving the payment.url from our API, customers are redirected to this URL to complete their transaction on a secure DOKU-hosted payment page.

If you prefer to display the Checkout Page as a Pop-Up Overlay within your website, you can customize this behavior by importing the DOKU JavaScript file.

Notes

Including the DOKU Checkout JavaScript file is optional and should be used if you prefer the embedded overlay method.

Pop-Up Overlay

To display the Checkout Page as an overlay instead of a full-page redirect, you’ll need to import the JavaScript and trigger the checkout with loadJokulCheckout().

JavaScript Location

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

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>

Viewport

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

Pop-Up Overlay#

JavaScript Location#

HTML#

Pop-Up Overlay

JavaScript Location

HTML