Quick Start: JavaScript

🚧
Durian Checkout is built on Plain JavaScript, please ensure that your application is suitable for this method

Step 1: Create an order/token from the server

Endpoint

Method	URL
POST	https://api.durianpay.id/v1/orders

var options = {
  amount: "20000",
  currency: "IDR",
  order_ref_id: "order2314",              // optional, your order reference
  customer: {
    customer_ref_id: "cust_001",          // optional, your customer reference
    given_name: "Imam Sugiarto",
    email: "[email protected]",     // mandatory
    mobile: "08972638003",
    address: {                            // mandatory for BNPL
        receiver_name: "Jude Casper",
        receiver_phone: "8987654321",
        label: "Judes Address",
        address_line_1: "Cambridge layout",
        address_line_2: "Apartment #786",
        city: "Bangalore",
        region: "Jogupalya",
        country: "Indonesia",
        postal_code: "560008",
        landmark: "Kota Jakarta Selatan"
    }
  },
  items: [
    {
        "name": "LED Television",
        "qty": 1,
        "price": "925001.55",
        "logo": "/static/tv_image.jpg"
    }
  ]
};
// Create Orders 
dpay.orders.create(options).then(resp => {
    console.log(resp);
    // order_id = resp.order_id;
})
.catch(error => {
    console.log(error.err + ' | ' + JSON.stringify(error.data));
});

// Sample response
{
  "id": "ord_A31sd3AwAgItmmXdp",
  "customer_id": "cus_rX2ABaMbZJ0050",
  "amount": "20000",
  "currency": "IDR",
  "payment_option": "full_payment",
  "status": "started",
  "order_ref_id": "order2314",
  "address_id": 3863,
  "created_at": "2021-08-04T06:06:37.849813Z",
  "updated_at": "2021-08-04T06:06:37.849813Z",
  "metadata": {},
  "access_token": "adsyoi12sdASd123ASX@qqsda231",
  ...
}

Step 2: Initialize Checkout

This step will help you create a checkout button on your website which will initiate Durianpay checkout flow for your users seamlessly. The Durianpay checkout modal opens in place without redirecting user to any new tab or url, hence is a much better customer experience leading to better conversions and lower drop offs. You can configure the payment methods in backend with the help of your dedicated Customer success manager easily. Also, you can customize the look and feel at the time of onboarding itself which will forever apply to all your checkout sessions across all devices and users.

📘
You should pass order_id and access_token you received in previous step while creating Order. These need to be passed during checking initialization.

Put the following script tag in your <head> or at any other appropriate place.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

After the above script is loaded, you can initialize SDK as below.

var dpay = Durianpay.init({
    locale: "id",
    environment: "production", // Value should be 'production' for both sandbox and live mode
    access_key: "<ACCESS_TOKEN>",
    site_name: "testmerchant.com",
    dark_mode: <true/false>
    pre_selected_payment_method: "VA", // only for flexible checkout
    pre_selected_payment_code: "BCA", // only for flexible checkout
    back_url: "http://merchant.com/redirect", // only for flexible checkout
    order_info: {
        id: "<ORDER_ID>",                     // e.g. ord_XASDadse2312asd31
        customer_info: {
            id: "cus_F5OHtM2L6u4292",
            email: "[email protected]",
            phone: "+6285722173217",
            name: "Jose",
        }
    },
    container_elem: "pay-btn-container",
});

// If you want to show Durianpay checkout button, use this 
// function to pass the parent container and css class
dpay.getCheckoutButton("pay-btn-container", "btn filled");

// OR

// If you want to trigger checkout from your button click handler
dpay.checkout();

Field	Data attribute	Description
environment	data-environment	`production` (default)
locale	data-locale	`en` OR `id` (default)
access_key	data-access-key	Your token which you have generated on server side by calling Durianpay APIs
dark_mode	data-dark_mode	Set to true to enable dark mode
order_info.id	data-order-id	Order Id received on your server side by calling Durianpay APIs
site_name	data-site-name	Your domain name
customer_info.id	data-customer-id	Customer Id received on your server side by calling Durianpay APIs
customer_info.name	data-customer-name	Customer Name, if present
customer_info.email	data-customer-email	Customer Email, if present
customer_info.mobile	data-customer-mobile	Customer Mobile, if present
method	data-method	`getCheckoutButton`, `Checkout` (default)
container_elem	data-container-id	Id of container which should be root of checkout button and popup
btn_class_name	data-btn-class-name	CSS class you want to apply for checkout button, if required

Successful creation of order returns an id (referred to as order_id) that should be stored against the Order defined in your system.

Step 3: handle callbacks payment success and failures

You can pass javascript handlers which will be called when payment flow is completed in Durian Checkout flow. The onSuccess method is fired when the transaction is successful. This is where you include any action you want to perform when the transaction is successful. The onFailure method is fired when the transaction has failed. This is where you include any action you want to perform when the transaction is unsuccessful.

var dpay = Durianpay.init({
    locale: "id",
    environment: "production", // Value should be 'production' for both sandbox and live mode
    access_key: "c6e8ed8e650b08bef67808617c25fbfa",
    site_name: "test.com",
    order_info: {
        id : "ord_XASDadse2312asd31"
    },
    customer_id: "cust_001",
    container_elem: "pay-btn-container",
    onSuccess: function(response) {
      // this happens after the payment is completed successfully
      var paymentId = response.payment_id;
      alert('Payment complete! Payment Id: ' + paymentId);
      // Make an AJAX call to your server with the reference to verify the transaction
    },
    onFailure: function() {
      alert('Transaction was not completed, transaction failed!');
    },
});

Step 4: Webhooks / Store fields on your servers (Optional)

Whenever certain transaction actions occur on your Durianpay Checkout integration, we trigger events which your application can listen to. This is where webhooks come in. A webhook is a URL on your server where we send payloads for such events. For example, if you implement webhooks, once a payment is successful, we will immediately notify your server with a payment.completed event. Here is a list of events we can send to your webhook URL.

You can specify your webhook URL on your dashboard (or through your dedicated Customer success manager) where we would send POST requests to whenever an event occurs.

Valid events

payment.completed payment.failed payment.cancelled order.created order.completed

{  
  "event": "payment.completed",
  "data":{  
    "id": "pay_dAS123ad123Asd",
    "signature": "9e892f199d026d06a56669e658a56f264610431d24e8b4d07f7bd46f6d5062d2",
    "order_id": "ord_XXXXXXXXX",
    "amount": "10000",
    "currency": IDR,
    "paid_at": "2016-09-30T21:10:19.000Z",
    "created_at":"2016-09-30T21:09:56.000Z",
    "metadata": {
      "key": "value"
    },
}

// This event will be triggered when a payment is started but failed later.
{
  "event": "payment.failed",
  "data": {
    "amount": 92500200,
    "amount_str": "925002.00",
    "created_at": "2021-05-10T11:14:10.500067Z",
    "currency": "IDR",
    "id": "pay_0UHr5QFPwm3593",
    "is_live": true,
    "merchant_id": "mer_MsCtIPhqRc8045",
    "metadata": { "key": "value" },
    "order_id": "ord_8c23OgJFIA5384",
    "payment_method": "CARD",
    "failure_reason": {
      "code": 20010,
      "message": "error due to end user action"
    }
  },
  "retry_count": 0
}

// This event will be triggered when payment is cancelled.
{
  "event": "payment.cancelled",
  "data": {
    "amount": 92500200,
    "amount_str": "925002.00",
    "created_at": "2021-05-10T11:14:10.500067Z",
    "currency": "IDR",
    "id": "pay_0UHr5QFPwm3593",
    "is_live": true,
    "merchant_id": "mer_MsCtIPhqRc8045",
    "metadata": { "key": "value" },
    "order_id": "ord_8c23OgJFIA5384",
    "payment_method": "CARD",
    "failure_reason": {
      "code": 20014,
      "message": "payment cancelled by merchant"
    }
  },
  "retry_count": 0
}

// This event will be triggered when order is created. This event is also valid for orders associated with payment links.
{
  "event": "order.created",
  "data": {
    "amount": 100000000,
    "amount_str": "1000000.00",
    "created_at": "2021-05-10T16:41:38.668844Z",
    "currency": "IDR",
    "customer_id": "cus_pWZu3yHhhc9548",
    "description": "description notes",
    "expiry_date": "2021-05-13T16:41:38.653Z",
    "id": "ord_LleWCP2T3B8368",
    "is_live": true,
    "merchant_id": "mer_MsCtIPhqRc8045",
    "meta_data": { "key": "value" },
    "payment_link_url": "https://durianpay.id/payment-link/SxHac7", //this field will be omitted when payment link is not associated with order
    "status": "started"
  },
  "retry_count": 0
}
// Please note, `expiry_date` and `payment_link_url` are optional fields which will appear for orders associated with payment links.

// This event will be triggered when order is completed. This event is also valid for orders associated with payment links.
{
  "event": "order.completed",
  "data": {
    "amount": 92500200,
    "amount_str": "925002.00",
    "created_at": "2021-05-10T16:40:01.635743Z",
    "currency": "IDR",
    "customer_id": "cus_fMMugWnnAw3274",
    "description": "",
    "id": "ord_8c23OgJFIA5384",
    "is_live": true,
    "merchant_id": "mer_MsCtIPhqRc8045",
    "meta_data": { "key": "value" },
    "status": "completed"
  },
  "retry_count": 0
}

Step 5: Verify signature on your server side (Optional)

You will get payment_id through webhook callback (if configured). You should ideally try to validate the payment and store the details in your server/database against the order/transaction accordingly.

First, you need to get verification signature from Durianpay which would have been provided to you in your webhook callback.

If you didn't receive it for any reason, you can call payment status check API from your server/backend which will respond back with signature if status of payment is completed.

Action	URL
GET	https://api.durianpay.id/v1/payments/:id/status

This signature is computed by Durianpay using payment_id, amount and your secret key. You need to create the hash on your server/backend where you have all these elements and match with the signature provided by Durianpay.

Sample code for signature generation

// Function to generate the signature for verification of payment
//use appropriate key if it is a sandbox order please use dp_test key and if it is a live order then use dp_live key
func GenerateSignature(paymentID string, amount string, accessKey string) (generatedSignature string) {
  //message passed includes payment_id + “|” + amount. Amount is in “15000.00” format
  secretData := paymentID + "|" + amount
  // Create a new HMAC by defining the hash type and the key (as byte array)
  h := hmac.New(sha256.New, []byte(accessKey))
  // Write Data to it
  h.Write([]byte(secretData))
  // Get result and encode as hexadecimal string
  generatedSignature = hex.EncodeToString(h.Sum(nil))
  return
}

Quick Start: JavaScript

🚧
Durian Checkout is built on Plain JavaScript, please ensure that your application is suitable for this method

Step 1: Create an order/token from the server

Step 2: Initialize Checkout

📘
You should pass `order_id` and `access_token` you received in previous step while creating Order. These need to be passed during checking initialization.

Step 3: handle callbacks payment success and failures

Step 4: Webhooks / Store fields on your servers (Optional)

Step 5: Verify signature on your server side (Optional)

🚧Durian Checkout is built on Plain JavaScript, please ensure that your application is suitable for this method

Step 1: Create an order/token from the server

Step 2: Initialize Checkout

📘You should pass order_id and access_token you received in previous step while creating Order. These need to be passed during checking initialization.

Step 3: handle callbacks payment success and failures

Step 4: Webhooks / Store fields on your servers (Optional)

Step 5: Verify signature on your server side (Optional)

🚧
Durian Checkout is built on Plain JavaScript, please ensure that your application is suitable for this method

📘
You should pass `order_id` and `access_token` you received in previous step while creating Order. These need to be passed during checking initialization.