API Reference
DOKU DocsChangelogDOKU Github
  • Getting Started with DOKU API
    • User Registration
    • Idempotency Request
    • Notification
      • Setup Notification URL
      • HTTP Notification Sample for SNAP
      • HTTP Notification Sample - Non SNAP
      • Best Practice
      • Retry Notification
      • Override Notification URL
    • Signature Component
      • Non-SNAP
        • Signature Component from Request Header
        • Signature Componen from Response Header
        • Signature from API Get Method
        • Sample Code
      • SNAP
        • Symmetric Signature
        • Asymmetric Signature
    • Response Code
      • HTTP Status and Case Code
    • Check Status API
      • Non-SNAP
      • SNAP
    • Retrieve Payment Credential
  • Accept Payment
    • DOKU Checkout
      • Integration Guide
        • Backend Integration
        • Frontend Integration
        • Simulate payment and Notification
      • Supported Payment Methods
      • Status Order
      • Additional Feature
        • Tokenization
        • Promo on DOKU Checkout Page
        • Track Campaign Source on Google Analytics
      • Checkout Settings
    • Direct API
      • Non-SNAP
        • Cards
          • Payment Page Integration Guide
          • Host-To-Host Integration Guide
          • Mastercard Automatic Billing Updater (ABU) Integration Guide
            • Backend Integration
        • e-Wallet
          • Overview
          • DOKU e-Wallet
          • OVO Push Payment
          • ShopeePay
          • LinkAja
        • Paylater
          • Akulaku
          • Kredivo
          • Indodana
        • Digital Banking
          • Jenius Pay
        • Convenience Store
          • Alfa Group
          • Indomaret
      • SNAP
        • Integration Guide
          • Get Token API
            • B2B
            • B2B2C
          • Virtual Account
            • CIMB Virtual Account
            • BSI Virtual Account
            • BCA Virtual Account
            • BNC Virtual Account
            • BNI Virtual Account
            • Mandiri Virtual Account
            • BRI Virtual Account
            • BTN Virtual Account
            • Permata Virtual Account
            • Danamon Virtual Account
            • BSS Virtual Account
          • E-Wallet
            • DOKU Wallet
            • DANA
            • OVO
            • ShopeePay
          • Direct Debit
            • Allo Bank Direct Debit
            • BRI Direct Debit
            • CIMB Direct Debit
            • Mandiri Direct Debit
          • Kartu Kredit Indonesia Cepat Secure(KKI CPTS)
            • Host to Host Integration
          • QRIS
    • Finance and Settlement
      • Split Settlement
      • Custom Settlement Report
      • Hold and Release Settlement
      • Bulk Registration Bank
    • Test on DOKU Demo Site
    • DOKU Payment Simulator
  • Developer Kit
    • Postman Collection
    • Libraries and SDK
  • Wallet As A Service
    • Sub Account
  • Partnership
    • Partner API
      • Check Requirements API
      • Generate Token API
      • Upload File API
      • Business Registration API
      • Create Business Lite API
      • Get Business Data API
  • Payout
    • Kirim DOKU
  • FLEXIBILL
    • Account Billing
      • Batch Upload
    • DOKU Biller
      • Response Code
      • Samples
  • PAYCHAT API
    • Send WhatsApp Message
  • Archive
    • Non-SNAP
      • Tokenization V1
      • e-Wallet
        • OVO Recurring
        • OVO Open API
    • SNAP
      • Virtual Account
        • BCA v1.0
        • BRI v1.0
        • BNI v1.0
        • BNC v1.0
        • Mandiri v1.0
        • BTN v1.0
        • Permata v1.0
        • Danamon Virtual Account
      • e-Wallet
        • OVO Open API
        • DANA
        • ShopeePay
      • Direct Debit
        • CIMB Direct Debit
        • BRI Direct Debit
        • Allobank
Powered by GitBook

DOKU API

  • Legacy Documentation
On this page

Was this helpful?

  1. Accept Payment
  2. DOKU Checkout
  3. Integration Guide

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)

JS (production)

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

PreviousBackend IntegrationNextSimulate payment and Notification

Last updated 6 months ago

Was this helpful?

https://sandbox.doku.com/jokul-checkout-js/v1/jokul-checkout-1.0.0.js
https://jokul.doku.com/jokul-checkout-js/v1/jokul-checkout-1.0.0.js
Pop up mode integration