React Native SDK Integration

Integrate Durianpay Checkout with your react native app to start accepting online payments from your customers. Durianpay supports a slew of payment methods such as bank transfers/VA, credit and debit cards, e-wallets (OVO, DANA, LinkAja) and others. Our checkout library provides all the essential features for integrating Durianpay Checkout with the client-side of your application.

Preparation

1. Create a Durianpay account

   If you haven't done it already, click here to sign up. Sign up for Durianpay account here to retrieve API keys for Sandbox environment and to test integrations end-to-end.

2. Generate API Keys

   Retrieve Sandbox API keys that will be used in next section(s) It is okay to have only the sandbox key for now. If you have live key, you can use it too.

3. Have access to the Durianpay React Native SDK react-native-dpay-sdk package

Steps Overview

• Step1: Setting up React Native sdk
• Step2: Create an order/token from the server
• Step3: Pass checkoutOptions to Durianpay Checkout
• Step4: Handle callbacks payment success and failures
• Step5: Webhooks / Store fields on your servers (Optional)
• Step6: Verify signature (Optional)

Step 1: Setting up React Native sdk

Type this command in your project directory

or

Android Integration:

Add the following lines in project level android/build.gradle file to add a repository to get the react native android sdk:

Append the following lines to android/settings.gradle:

iOS Integration:

Add the following line to Podfile and use iOS 13 as minimum iOS version

Run cd ios && pod install for setting up iOS related dependencies.

Step 2: Create an order/token from the server

Use following endpoint to create an order

var options = {
  amount: "20100.55",
  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: "imam.sugiarto@koss.info",     // 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": "20100.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": "925001.55",
  "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",
  ...
}

Read more: Learn more about Orders API.

Step 3: Pass checkoutOptions to Durianpay Checkout

paymentType is optional variable which is necessary only for an installment type of payment. The paymentType can have the values full_payment or installment according to the type of payment. Default value is full_payment. Use JSON object to add all the options.

var checkoutOptions = {
    "locale": "en",
    "environment": "staging",
    "customerId": "cust_001",
    "siteName": "MovieTicket",
    "customerEmail": "joe@ios.com",
    "customerGivenName": "JoeIOS",
    "accessToken": access_token as Any,
    "orderId": order_id as Any,
    "amount": "23423",
    "currency": "IDR",
    "paymentType": "installment",       //mandatory for installment type payments
    "label": "green city",              //optional
    "receiverName": "Jayraj",           //optional
    "receiverPhone": "819xxxxxxx",      //optional
    "landmark": "Phoenix Mall",         //optional
    "customerCountry": "India",         //optional
    "customerCity": "bangalore",        //optional
    "customerRegion": "Asia",           //optional
    "customerAddressLine1": "123, Ramnagar, Railway Station, Kempegowda",   //optional
    "customerGivenName": "Rajesh",      //optional
    "customerMobile": "8992xxxxxx",     //optional
    "customerPostalCode": "12xxxx",     //optional
    "darkMode": true,                   //optional (Set to true to enable dark mode. In Android, this is available for Android 10 and above only. For Android 9 and below, using this field will not throw errors, but dark mode will not be enabled)
    "forceFail": false                  //optional
}

Pass data class to Durianpay checkout as shown below where success, failed and close are the functions mentioned in next step.

import RNDpaySdk from "react-native-dpay-sdk";

RNDpaySdk.openCheckout(checkoutOptions,
      this.success,
      this.failed,
      this.close
    ); 

Step 4: Handle callbacks payment success and failures

Implement onSuccess, onFailure, onClose functions for callbacks as below where the same functions will be passed as arguments to initialize the sdk.

import { Component } from "react";
class Checkout extends Component {
  success = (data) => {
    var json = JSON.parse(data);
    //this is the successful payment id
    console.log(json.response.payment_id);
  };

  failed = (data) => {
    var json = JSON.parse(data);
    //this is failed payment id
    console.log(json.response.payment_id);
  };

  close = (data) => {
    var json = JSON.parse(data);
    //this is order id when closed
    console.log(json.response.order_id);
  };
}

The success, failed and close functions will be executed whenever their respective callbacks are triggered.

Step 5: 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"
    },
}

Step 6: 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.

This signature is computed by us 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 us.

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
}

Releasing Your App

We're still experimenting with our SDK, so releasing may not result in the best and most desired outcome. Hence, we have provided a solution to resolve certain issues that may come up during releasing your app (subject to change in the future).

For Android release, use ./gradlew app:assembleRelease for more stable outcome.

Test Integration

Test payments

You can use following test payment credentials to test payments.

Verify Payment status

Through Dashboard

1. Log into the Dashboard and navigate to Payments in sidebar.
2. Check if a payment_id has been generated. If no payment_id has been generated, it means that the transaction has failed (and didn't even initiate from user's end)

Through APIs

Use following endpoint to do status check on a payment (Read more about Payment Status Check API)

curl -u <YOUR_SECRET_KEY> \
-X GET https://api.durianpay.id/v1/payments/pay_B14sdfwAdmmSDF24a/status \
-H "content-type: application/json"'

{
    "data": {
        "status": "completed",
        "is_completed": true,
        "signature": "9e892f199d026d06a56669e658a56f264610431d24e8b4d07f7bd46f6d5062d2"
    }
}

Accept LIVE payments

After testing the flow of funds end-to-end in sandbox mode, you can switch to the live mode and start accepting payments from your customers. However, make sure that you swap the test API keys with the live keys.

1. Log into Dashboard and switch to Live mode on the sidebar menu.
2. Navigate to Settings → API Keys to access your API key for live mode.
3. Replace the sandbox API key with the Live Key in the Checkout code and start accepting real-time payments.