Credit Card

Jokul provides various payment channels. One of the most used is Credit Card. By using this payment channel, your customers can pay their order with their credit card. Jokul has partenered with various banks and principal to provide a secure and seamless payment experience for your customers.


Integration steps

Here is the overview how you integrate Credit Card channel:

  1. Generate payment URL (credit card payment page)
  2. Display payment URL (credit card payment page)
  3. Acknowledge payment result
Jokul Direct - Credit Card Sequence DiagramJokul Direct Credit Card Merchant Flow

1. Generate payment URL (credit card payment page)

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

API Request

TypeValue
HTTP MethodPOST
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 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=
Request Header Explanation
ParameterDescription
Client-IdClient ID retrieved from Jokul Back Office
Request-IdUnique random string (max 128 characters) generated from merchant side to protect duplicate request
Request-TimestampTimestamp 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
SignatureSecurity 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": {
"amount": 90000,
"invoice_number": "INV-20210118-0001",
"line_items": [
{
"name": "DOKU T-Shirt Red",
"price": 30000,
"quantity": 2
},
{
"name": "DOKU T-Shirt Black",
"price": 30000,
"quantity": 1
}
],
"callback_url": "https://merchant.com/callback-url",
"failed_url": "https;//merchant.com/failed-url",
"auto_redirect": false
},
"customer": {
"id": "00000000001",
"name": "Taufik Ismail",
"email": "taufik@example.com",
"phone": "6281287458232",
"address": "Menara Mulia Lantai 8",
"country": "ID"
},
"override_configuration": {
"themes": {
"language": "EN",
"background_color": "FFFFFF",
"font_color": "000000",
"button_background_color": "E1251B",
"button_font_color": "FFFFFF"
}
}
}
Request Body Explanation
ParameterTypeMandatoryDescription
order.amountnumberMandatoryIn IDR Currency and without decimal
Allowed chars: numeric
Max length: 14
order.invoice_numberstringMandatoryGenerated by merchant to identify the order
Allowed chars: alphabetic, numeric, special chars
Max length: 64
order.callback_urlstringConditionalMerchant 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_urlstringOptionalMerchant 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_redirectstringMandatoryRedirection to defined callback_url after payment process completed
Possible value: true, false
Default value: false
order.line_items.namestringOptionalName of the product item
Allowed chars: alphabetic, numeric, special chars
Max Length: 255
order.line_items.pricenumberOptionalPrice of the product item. Total price and quantity must match with the order.amount
Allowed chars: numeric
Max Length: 12
order.line_items.quantitynumberOptionalQuantity of the product item
Allowed chars: numeric
Max Length: 4
customer.idstringConditionalUnique customer identifier generated by merchant. Mandatory if merchant wants to use tokenization feature.
Allowed chars: alphabetic, numeric, special chars
Max Length: 50
customer.namestringOptionalCustomer name
Allowed chars: alphabetic
Max Length: 255
customer.emailstringOptionalCustomer email
Allowed chars: alphabetic, numeric, special chars
Max Length: 128
customer.phonestringOptionalCustomer phone number. Format: {calling_code}{phone_number}. Example: 6281122334455
Allowed chars: numeric
Max Length: 16
customer.addressstringOptionalCustomer address
Allowed chars: alphabetic, numeric, special chars
Max Length: 400
customer.countrystringOptional2 alphabetic country code ISO 3166-1
Allowed chars: alphabetic
Min-max Length: 2
override_configuration.themes.
language
stringOptionalDefault language that will be displayed on the Payment Page
Possible value: English EN, Indonesia ID
Default: English EN
override_configuration.themes.
background_color
stringOptionalHEX color code for the payment page background color. Example: FFFFFF
Default: Light gray F5F8FB
override_configuration.themes.
font_color
stringOptionalHEX color code for the payment page font color. Example: 000000
Default: Soft black 1A1A1A
override_configuration.themes.
button_background_color
stringOptionalHEX color code for the payment page button background color. Example: 000000
Default: Red E1251B
override_configuration.themes.
button_font_color
stringOptionalHEX color code for the payment page button font color. Example: FFFFFF
Default: White FFFFFF

API Response

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

TypeValue
HTTP Status200
ResultSUCCESS

Here is the sample response header:

Client-Id: MCH-0001-10791114622547
Request-Id: b266c265-3d61-4708-9860-c0d5b9a98f8c
Request-Timestamp: 2020-08-11T08:45:42Z
Signature: HMACSHA256=1jap2tpgvWt83tG4J7IhEwUrwmMt71OaIk0oL0e6sPM=
Response Header Explanation
ParameterDescription
Client-IdSame as the request
Request-IdSame as the request
Response-TimestampTimestamp Response on UTC with format ISO8601 UTC+0 from Jokul
SignatureSignature generated by Jokul based on the response body

Here is the sample of response body:

{
"order": {
"invoice_number": "INV-20210118-0001",
"line_items": [
{
"name": "DOKU T-Shirt Red",
"price": 30000,
"quantity": 2
},
{
"name": "DOKU T-Shirt Black",
"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"
}
}
Response Body Explanation
ParameterTypeMandatoryDescription
order.amountnumberMandatorySame as the request
order.invoice_numberstringMandatorySame as the request
order.line_items.namestringOptionalSame as the request
order.line_items.pricenumberOptionalSame as the request
order.line_items.quantitynumberOptionalSame as the request
credit_card_payment_page.urlstringMandatoryCredit Card Payment Page URL generated by Jokul that merchant displays to the customer

2. Display payment URL (credit card payment page)

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

Jokul Direct Credit Card Payment Page

3. Acknowledge payment result

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


Advanced features

We provide various advanced features to suited your needs. Learn more here.

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


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.