React Web SDK Integration

The React Web SDK integration involves the following steps below:

📘
Note:

Ensure you store your Client ID and Secret in your Backend securely.

Integrate our APIs on your backend system.

We strictly recommend not to call our APIs from the frontend.

1. Installation

1.1. Android

Install Pine Labs android SDK using Android Studio or IntelliJ. To add the SDK to your app, import the .aar file to the project using the following steps:

From the Android Studio package manager, select project.
Create a new directory in a project named libs.
Download your Android SDK .aar file here.
Paste your .aar file inside the libs folder

Configure Build Setting

Include the below dependencies in your build.gradle file.

implementation files('libs/EDGE-SDK.aar')

After adding the necessary dependencies to your build.gradle file, sync your project.
Next, include the following code in your AndroidManifest.xml file to obtain the required static permissions.

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

1.2. iOS

To initialise the iOS web SDK, follow the below steps:

Open the podfile from the iOS folder and add the below code of line in your app target.

pod "IOS_SDK_V2", git: "https://github.com/souravshandilya-pinelabs/IOS_SDK_V2"

You can find the sample podfile below.

ws_dir = Pathname.new(__dir__)
ws_dir = ws_dir.parent until
  File.exist?("#{ws_dir}/node_modules/react-native-test-app/test_app.rb") ||
  ws_dir.expand_path.to_s == '/'
require "#{ws_dir}/node_modules/react-native-test-app/test_app.rb"
pod "IOS_SDK_V2", git: "https://github.com/souravshandilya-pinelabs/IOS_SDK_V2"

workspace 'EdgeExample.xcworkspace'

Finally, navigate to iOS folder of your project and install pods.

cd ios && pod install

For React Native versions lessor than 0.60 add the below npx.

npx react-native link react-native-pinelabs-sdk

2. Integrate APIs in Your Backend

Start a payment by triggering the payment flow. To start a payment follow the below steps:

2.1. Generate Auth Token

Integrate our Generate Token API in your backend servers to generate the auth token. Use the token generated to authenticate Plural APIs.

Use the below endpoint to generate a token.

POST: https://pluraluat.v2.pinepg.in/api/auth/v1/token

POST: https://api.pluralpay.in/api/auth/v1/token

Below is a sample request and response for the Generate Token API.

{
  "client_id": "1234567890",
  "client_secret": "asdfgwei7egyhuggwp39w8rh",
  "grant_type": "client_credentials"
}

{
  "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c",
  "expires_in": 3600
}

Refer to our Generate Token API documentation to learn more.

2.2. Create Hosted Checkout

Use this API to create a hosted checkout, for authentication use the generated access token in the headers of the API request.

Use the below endpoint to Create Hosted Checkout.

POST: https://pluraluat.v2.pinepg.in/api/checkout/v1/orders

POST: https://api.pluralpay.in/api/checkout/v1/orders

Below is a sample request and response for a Create Hosted Checkout API.

{
  "merchant_order_reference": 112345171,
  "order_amount": {
    "value": 500,
    "currency": "INR"
  },
  "pre_auth": false,
  "purchase_details": {
    "customer": {
      "email_id": "[email protected]",
      "first_name": "Kevin",
      "last_name": "Bob",
      "customer_id": "192212",
      "mobile_number": "9876543210",
      "billing_address": {
        "address1": "H.No 15, Sector 17",
        "address2": "",
        "address3": "",
        "pincode": "61232112",
        "city": "CHANDIGARH",
        "state": "PUNJAB",
        "country": "INDIA"
      },
      "shipping_address": {
        "address1": "H.No 15, Sector 17",
        "address2": "",
        "address3": "",
        "pincode": "144001123",
        "city": "CHANDIGARH",
        "state": "PUNJAB",
        "country": "INDIA"
      }
    },
    "merchant_metadata": {
      "key1": "DD",
      "key2": "XOF"
    }
  }
}

{
  "token": "REDIRECT TOKEN",
  "order_id": "ORDER ID",
  "redirect_url": "https://api.pluralonline.com/api/v3/checkout-bff/redirect/checkout?token=REDIRECT TOKEN",
  "response_code": 200,
  "response_message": "Order Creation Successful."
}

Refer to our Create Hosted Checkout API documentation to learn more.

3. Initialize SDK

To Initialize the React Web SDK create startPayment_ inside your App.js.

import { startPayment_ } from 'edge';
const handleTransactionSuccess = (redirectUrl: string) => {
    console.log("Redirect URL inside handleTransactionSuccess is:", redirectUrl); // Log the URL before passing it
    const paymentOptionsData = {
      options: {
        redirectUrl: redirectUrl,
      },
    };

    // Call startPayment_ and pass the handleTransaction callback
    startPayment_(paymentOptionsData, (response: any) => {
      console.log("Payment Response:", response);
      handleTransaction(response.status, response.code, response.message);
    });
  };

Inside your Index.tsx you can create an interface as created below.

import { NativeModules, Platform } from 'react-native';

const LINKING_ERROR =
  `The package 'edge' doesn't seem to be linked. Make sure: \n\n` +
  Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
  '- You rebuilt the app after installing the package\n' +
  '- You are not using Expo Go\n';

const EdgeModule = NativeModules.EdgeModule
  ? NativeModules.EdgeModule
  : new Proxy(
      {},
      {
        get() {
          throw new Error(LINKING_ERROR);
        },
      }
    );


// Destructure the startPayment method from the Edge module
const { startPayment } = EdgeModule;

export interface paymentParams {
  options: {
    redirectUrl: string;
  };
}

export const startPayment_ = (params: paymentParams, callback: CallableFunction): void => {
  startPayment(params.options.redirectUrl, callback);
};

export default { startPayment_ };

4. Handle Payments

You need to implement call-back methods to handle your payment responses. This will provide the payment status and reason for transaction failures. Based on the reasons for failures, handling can be built at your end. Transaction callbacks can be listened to via overriding methods of EdgeResponseCallback.

onTransactionResponse: This method is called when the transaction is completed. Transaction can be a failure or a success.
internetNotAvailable: This method is called when the internet is not available.
onErrorOccured: This method is called when SDK is unable to load the payment page.
onPressedBackButton: This method is called when the user presses the back button
onCancelTxn: This method is called when the user cancels the transaction.

5. Manage Transactions

To get the status of the transaction made from your application, you can use our Fetch APIs to know the real time status.

5.1. Get Order by Order ID

Use this API to know the real time status of the transaction made on your application. Refer to our Get Order by Order ID API documentation to learn more.

5.2. Webhooks

You can configure the webhook events to know the status of your transactions. Refer to our Webhooks documentation to learn more.

📘Note:

1. Installation

1.1. Android

1.2. iOS

2. Integrate APIs in Your Backend

2.1. Generate Auth Token

2.2. Create Hosted Checkout

3. Initialize SDK

4. Handle Payments

5. Manage Transactions

5.1. Get Order by Order ID

5.2. Webhooks

📘
Note: