Payment Page Integration Guide

If you are non-PCI DSS compliance, you can use this type of integration to ensure that the Cards data of the customer is securely processed by DOKU.

Integration steps

Here is the overview of how to integrate with Cards channel:

Generate payment URL (Cards payment page)
Display payment URL (Cards payment page)
Create test payment
Acknowledge payment result

1. Generate payment URL (Card payment page)

To generate a payment URL, you will need to hit this API through your backend:

API Request

Type

Value

HTTP Method

POST

API endpoint (Sandbox)

https://api-sandbox.doku.com/credit-card/v1/payment-page

API endpoint (Production)

https://api.doku.com/credit-card/v1/payment-page

Here is the sample of request header to generate the payment URL:

Client-Id: MCH-0001-10791114622547
Request-Id: b266c265-3d61-4708-9860-c0d5b9a98f8c
Request-Timestamp: 2020-08-11T08:45:42Z
Signature: HMACSHA256=9UPUFzOqJc47aJzD9ESOTcWg6TMsg3mqSP+DnUO8ENE=

Parameter

Description

client-id

Client ID retrieved from DOKU Back Office

request-id

Unique random string (max 128 characters) generated from merchant side to protect duplicate request

request-timestamp

Timestamp request on UTC time in ISO8601 UTC+0 format. It means to proceed transaction on UTC+7 (WIB), merchant need to subtract time with 7. Ex: to proceed transaction on September 22th 2020 at 08:51:00 WIB, the timestamp should be 2020-09-22T01:51:00Z

signature

Security parameter that needs to be generated on merchant Backend and placed to the header request to ensure that the request is coming from valid merchant. Please refer to this section to generate the signature

Here is the sample request body to generate payment URL:

{
    "order": {
        "invoice_number": "INV-20210118-0001",
        "amount": 90000,
        "line_items": [
            {
                "name": "T-Shirt Red",
                "price": 30000,
                "quantity": 2
            },
            {
                "name": "Polo Navy",
                "price": 30000,
                "quantity": 1
            }
        ],
        "callback_url": "https://merchant.com/success-url",
        "failed_url": "https://merchant.com/failed-url",
        "auto_redirect": false,
        "descriptor": "Test Descriptor"
    },
    "card": {
        "token": "a55b8d8df709607d2a343778898f41d0",
        "save": false
    },
    "customer": {
        "id": "CUST-0001",
        "name": "Jotaro Kujo",
        "email": "[email protected]",
        "phone": "6285694566147",
        "address": "Menara Mulia Lantai 8",
        "country": "ID"
    },
    "payment": {
        "type": "SALE",
        "acquirer":"BRI",
        "tenor": 3
    },
    "override_configuration": {
        "themes": {
            "language": "EN",
            "background_color": "F5F8FB",
            "font_color": "1A1A1A",
            "button_background_color": "E1251B",
            "button_font_color": "FFFFFF"
        },
        "promo": [
            {
                "bin": "142498",
                "discount_amount": 20000
            },
            {
                "bin": "314498",
                "discount_amount": 20000
            },
            {
                "bin": "091234",
                "discount_amount": 10000
            },
            {
                "bin": "091234",
                "discount_amount": 10000
            }
        ],
        "allow_bin": ["461700","410505","557338"],
        "allow_tenor": [0,3,6]
    },
    "additional_info": {
        "override_notification_url": "https://another.example.com/payments/notifications",
        "disclaimer" : {
            "id" : "Testing",
            "en" : "testing englis"
        }
    }
}

Request body Explanation

Body Parameter

Type`

Mandatory

Description

order.amount

number

Mandatory

In IDR Currency and without decimal

order.invoice_number

string

Mandatory

Generated by merchant to identify the order Allowed chars: alphabetic, numeric, special chars Max length: 64 (27 If you have Mandiri Acquirer)

order.callback_url

string

Conditional

Merchant URL that will redirected to after the order success. Mandatory if merchant set order.auto_redirect to true Allowed chars: alphabetic, numeric, special chars

order.failed_url

string

Conditional

Merchant URL that will redirected to after the order failed. If not set, then will redirect to callback_url Allowed chars: alphabetic, numeric, special chars

order.auto_redirect

string

Mandatory

Redirection to defined callback_url after payment process completed Possible value: true, false Default value: false

order.line_items.name

string

Optional

Name of the product item. Max Length: 255

order.line_items.price

number

Conditional

Price of the product item. Total price and quantity must match with the order.amount.

order.line_items.quantity

number

Conditional

Quantity of the product item.

order.descriptor

string

Optional

Custom string to be printed on Customer's billing statement history on issuing side, Please contact DOKU team to manually configure this feature first Max length: 22 need to be activated, please consult DOKU team first

card.token

string

optional

Card token generated by DOKU. If you sent this, then the customer's Card will be pre-filled in the Card Number field.

card.save

boolean

Optional

Set true if you want to force customer to save the card token for the next payment

customer.id

string

Conditional

Unique customer identifier generated by merchant. Mandatory if merchant wants to use tokenization feature.

customer.name

string

Recommended

Customer Name

customer.email

string

Conditional

Customer email. Mandatory if customer phone value blank. Bringing the proper email will improve Credit Card Approval Rate

customer.phone

string

Conditional

Customer phone number. Format: {calling_code}{phone_number}. Example: 6281122334455. Mandatory if customer email value blank. One of them must be filled in between customer email and customer phone

customer.address

string

Optional

Customer address

customer.country

string

Optional

2 alphabetic country code ISO 3166-1

override_configuration.themes. language

string

Optional

Default language that will be displayed on the Payment Page Possible value: English EN, Indonesia ID Default: English EN

override_configuration.themes. background_color

string

Optional

HEX color code for the payment page background color. Example: FFFFFF Default: Light gray F5F8FB

override_configuration.themes. font_color

string

Optional

HEX color code for the payment page font color. Example: 000000 Default: Soft black 1A1A1A

override_configuration.themes. button_background_color

string

Optional

HEX color code for the payment page button background color. Example: 000000 Default: Red E1251B

override_configuration.themes. button_font_color

string

Optional

HEX color code for the payment page button font color. Example: FFFFFF Default: White FFFFFF

override_configuration.promo[]. bin

string

Optional

BIN that will get the promo Please consult with Issuer Bank or DOKU team, some BIN are 6 and some are 8 Digit

override_configuration.promo[]. discount_amount

number

Optional

Promo Discount if BIN input matched (final amount = order.amount - override_configuration.promo[].discount_amount)

override_configuration.allow_bin

number

Optional

Transaction only accept BIN listed here Please consult with Issuer Bank or DOKU team, some BIN are 6 and some are 8 Digit

override_configuration.allow_tenor

number

Optional

Transaction only accept installment tenor listed here

additional_info.override_notification_url

string

Optional

This parameter is intended to override the configured Notification URL with another URL. Click here for more information.

additional_info.disclaimer

object

Optional

Bring this if you want to customer to opt-in customer has agreed to the payment disclaimer

additional_info.disclaimer.id

object

Optional

disclaimer message in Indonesian

additional_info.disclaimer.en

object

disclaimer message in English(default)

payment.type

string

Conditional

Bring this if you have more than 1 type of Cards payment type to specify how you want this transaction to be processed (Possible Values : INSTALLMENT, AUTHORIZE, SALE)

payment.auto_capture

string

Optional

Brings this if the payment type is 'authorize' but you wish to capture the transaction right away as if it was a SALE transaction eg : "auto_capture"=:true

payment.acquirer

string

Conditional

Becomes mandatory if transaction type is INSTALLMENT, to specify to which acquirer you want this transaction to be processed to (Possible Values: BNI, BRI, BANK_CIMB, BANK_MANDIRI, BCA, BANK_PERMATA, DANAMON, BUKOPIN, HSBC, OCBC_NISP)

payment.tenor

number

Conditional

Becomes mandatory if transaction type is INSTALLMENT, to specify which tenor you want this transaction to be processed with

Payment Type

Sale: A transaction where funds are immediately transferred from the customer's account to the merchant's account.
Authorize-Capture: A two-step transaction where funds are first reserved (authorized) and later transferred (captured) from the customer's account to the merchant's account.
Installment: A transaction where the total amount is split into multiple smaller payments over a specified period.
MOTO (Mail Order/Telephone Order): A transaction where payment does not require CVV or OTP, suitable for subscription payment type.
Recurring: A transaction where payment does not require CVV or OTP, suitable for subscription payment type, with the latest specification more secure compared to MOTO.

Integration Type

Currently for Integration through DOKU JS Integration, payment type must be either 'SALE' or 'AUTHORIZE'

API Response

After hitting the above API request, DOKU will give the response.

Type

Value

HTTP Status

200

Result

SUCCESS

Here is the sample response header:

Client-Id: MCH-0001-10791114622547
Request-Id: b266c265-3d61-4708-9860-c0d5b9a98f8c
Response-Timestamp: 2020-08-11T08:45:42Z
Signature: HMACSHA256=1jap2tpgvWt83tG4J7IhEwUrwmMt71OaIk0oL0e6sPM=

Parameter

Description

client-id

Client ID retrieved from DOKU Back Office

request-id

Unique random string (max 128 characters) generated from merchant side to protect duplicate request

request-timestamp

signature

Here is the sample of response body:

{
    "order": {
        "invoice_number": "INV-20210118-0001",
        "line_items": [
            {
                "name": "T-Shirt Red",
                "price": 30000,
                "quantity": 2
            },
            {
                "name": "Polo Navy",
                "price": 30000,
                "quantity": 1
            }
        ]
    },
    "credit_card_payment_page": {
        "url": "https://sandbox.doku.com/wt-frontend-transaction/dynamic-payment-page?signature=OVVQVUZ6T3FKYzQ3YUp6RDlFU09UY1dnNlRNc2czbXFTUCtEblVPOEVORT0=&clientId=MCH-0001-10791114622547&invoiceNumber=INV-20210118-0001&requestId=8quQyK39l4aM5cCml0Yy"
    },
    "credit_card_js": {
     "session_id": "ps_sit_1761107459919_Dv7nPW51NX"
     },
    "additional_info": {
        "override_notification_url": "https://another.example.com/payments/notifications"
    }
}

Here is the sample of failed response body:

{
    "errors": {
        "code": "INVALID_PARAMETER",
        "message": "Invalid Total Amount And Line Items",
        "type": "Invalid Parameter"
    }
}

Response Body Explanation

Body Parameter

Type

Mandatory

Description

order.invoice_number

string

Mandatory

Same as the request

order.line_items.name

string

Optional

Same as the request

order.line_items.price

number

Optional

Same as the request

order.line_items.quantity

number

Optional

Same as the request

credit_card_payment_page.url

string

Mandatory

Cards Payment Page URL generated by DOKU that merchant displays to the customer

credit_card_js.session_id

string

Conditional

Identifier for DOKU JS integration, will be returned for merchant who uses DOKU JS feature

additional_info.override_notification_url

string

Optional

Same as the request

INFO

DOKU provides risk assessment for card transactions, your customer data sent to us will help manage your risk of every transaction.

2. Display payment URL (Cards payment page)

You can display the payment URL as an iFrame or as a dedicated page to your customer by using credit_card_payment_page.url the retrieved from API Response. Here is the sample of Cards on the iFrame:

3. Creating Test Payment

You can try the payment with various Cards listed here:

Test Credit Card List

4. Acknowledge payment result

After the payment is made by your customer, DOKU will send HTTP Notification to your defined Notification URL. Learn how to handle the notification from DOKU:

Handling HTTP Notification

INFO

You can check the list of possible response code and how to handle them here

Authorize Capture

If you bring payment.type ='AUTHORIZATION' you need to capture the transaction within 7 days to have the amount actually transferred to your settlement balance or the transaction will be automatically released.

After you get the payment.authorize_idin notification HTTP, then your backend must trigger the API Charge to DOKU:

API Request

Type

Value

HTTP Method

POST

API endpoint (Sandbox)

https://api-sandbox.doku.com/credit-card/capture

API endpoint (Production)

https://api.doku.com/credit-card/capture

Here is the sample of request header to capture the transaction:

Client-Id: MCH-0001-10791114622547
Request-Id: 071a6a32-6785-4011-833d-d2c2049cf744
Request-Timestamp: 2021-08-24T08:46:42Z
Signature: HMACSHA256=9UPUFzOqJc47aJzD9ESOTcWg6TMsg3mqSP+DnUO8ENE=

Parameter

Description

client-id

Client ID retrieved from DOKU Back Office

request-id

Unique random string (max 128 characters) generated from merchant side to protect duplicate request

request-timestamp

signature

Here is the sample request body to capture the transaction:

{
    "payment": {
        "authorize_id": "12312391719112",
        "capture_amount": 90000
    }
}

Request Body Explanation

Parameter

Type

Mandatory

Description

payment.authorize_id

string

Mandatory

Authorize ID from the Charge API Response / HTTP Notification

payment.capture_amount

string

Optional

The value of transactions which will be paid by the customer. If undefined, capture full transaction.

API Response

After hitting the above API request, DOKU will give the response.

Type

Value

HTTP Status

200

Result

SUCCESS

Here is the sample response header:

Client-Id: MCH-0001-10791114622547
Request-Id: b266c265-3d61-4708-9860-c0d5b9a98f8c
Response-Timestamp: 2020-08-11T08:45:42Z
Signature: HMACSHA256=1jap2tpgvWt83tG4J7IhEwUrwmMt71OaIk0oL0e6sPM=

Parameter

Description

client-id

Client ID retrieved from DOKU Back Office

request-id

Unique random string (max 128 characters) generated from merchant side to protect duplicate request

request-timestamp

signature

Here is the sample of response body:

{
    "order": {
        "invoice_number": "INV-20210118-0001",
        "amount": 90000
    },
    "customer": {
        "id": "CUST-0001"
    },
    "payment": {
        "type": "CAPTURE",
        "identifier": [
           {
              "name": "Acquirer",
              "value": "Mandiri"
           },
           {
              "name": "MID",
              "value": "71003372992"
           },
           {
              "name": "TID",
              "value": "73120903"
           }
        ],
        "request_id": "20201026193843836",
        "authorize_id": "12312391719112",
        "response_code": "01",
        "response_message": "sukses transaksi",
        "eci": "05",
        "status": "SUCCESS",
        "approval_code": "123123"
    },
    "three_dsecure": {
        "authentication_id": "eb7e72313b491cd73ea10c6354bc96900f08b3e50e66cf3df2fe29580d6ff84e"
    },
    "card": {
        "masked": "557338*******101",
        "type": "CREDIT",
        "issuer": "Bank Mandiri",
        "brand": "MASTER",
        "token": "243591d7e49f45109961581718c3ef82"
    }
}

Response Body Explanation

Parameter

Type

Mandatory

Description

order.invoice_number

string

Mandatory

Same as the request

order.amount

number

Mandatory

Same as the request

customer.id

string

Optional

Same as the request

payment.type

string

Mandatory

Same as the request

payment.identifier.name

string

Mandatory

Additional payment info name

payment.identifier.value

string

Mandatory

Additional payment info value

payment.request_id

string

Mandatory

Request ID sent on merchant's request header

payment.authorize_id

string

Mandatory

Authorize ID for authorize transaction. Mandatory if payment.type is AUTHORIZE

payment.response_code

string

Mandatory

Reponse code generated by DOKU / Acquirer

payment.response_message

string

Mandatory

Response message generated by DOKU / Acquirer

payment.status

string

Mandatory

Payment status Possible value: SUCCESS, FAILED, PENDING

payment.eci

string

Mandatory

ECI for this transaction

payment.approval_code

string

Optional

Approval code for success transaction generated by acquirer

three_dsecure.authentication_id

string

Mandatory

Same as the request

card.masked

string

Optional

Card masked number

card.type

string

Mandatory

Card type Possible value: CREDIT, DEBIT

card.issuer

string

Mandatory

Card issuer

card.brand

string

Mandatory

Principal brand VISA, MASTER, JCB, AMEX

card.token

string

Optional

Card token generated by DOKU if card.save is true

Installment

Installment ON US

BCA, Bank Mandiri, BNI only allow for ON US Installment. You must request an Installment MID from each respective acquirer.

Installment OFF US

Bukopin, Danamon, Permata, HSBC, OCBC allows OFF US Installment. you must have at least one SALE MID.

You can activate installment features on Service Activation page to let your customers pay in terms, you will receive full payment ahead and issuer Bank will charge the customer each month depending on tenor and amount of the transaction.

There are minimal transaction amounts for each installment (depending on the issuer) and you can see the details in the installment configuration page.

Testing Installment Payment

If you wish to try installment, make sure that you specific bank dummy credit card presented here and make sure that your transaction amount is equal to more than the minimum transaction required

Split Settlement

If you are a platform or a marketplace, you can use this feature to settle the funds to your sellers or partners programmatically, save many operational efforts.

Settlement

What's next?

Make a test payment in the Sandbox environment using the dummy credit card that we have prepared to ensure that your application has been successfully integrated.

Click here to see the dummy card list for testing

PreviousCards NextHost-To-Host Integration Guide

Last updated 11 days ago

Was this helpful?