jokul-checkout-display-page

Once you have the payment.url, you can now display the payment page by embedding the DOKU Checkout JS on your HTML file.

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`

Alternative Implementation

If you want your customers redirected to the payment page instead the payment page is popped up on your website, you can simply use the payment.url value without importing the JS file.

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

After implementing the steps above, you can see the Checkout as follows:

Or you can try the demo here:

Try Checkout Demo

Explore the New API Documentation!

Alternative Implementation

Viewport