Integration Steps

Learn how you can integrate with Pine Labs Web SDK across all platforms. The SDK provides a secure hosted checkout experience using backend APIs and client-side SDKs for seamless payment processing.

Prerequisites
Integrate APIs in Your Backend
SDK Installation and Initialization
Handle Payments
Manage Transactions

❗️ Security Best Practices:

Ensure you store your client_id and client_secret in your Backend securely.

Integrate our APIs on your backend system.

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

Failure to adhere to the above guidelines may result in legal implications. In such cases, you will be held responsible for any damage or loss arising from non-compliance.

1. Prerequisites

Prepare your React app so you can install and initialize the Web SDK.

Use Node.js 14.0 or higher.
Use React 16.8 or higher.
Install dependencies with npm or yarn.
Use a modern browser with ES6+ support.

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 Pine Labs Online APIs.

Below are the sample requests and response for the Generate Token API.

cURL

curl --location 'https://pluraluat.v2.pinepg.in/api/auth/v1/token' \
--header 'accept: application/json' \
--header 'content-type: application/json' \
--header 'Request-Timestamp: 2024-07-09T07:57:08.022Z' \
--header 'Request-ID: c17ce30f-f88e-4f81-ada1-c3b4909ed235' \
--data '
{
  "client_id": "a17ce30e-f88e-4f81-ada1-c3b4909ed232",
  "client_secret": "fgwei7egyhuggwp39w8rh",
  "grant_type": "client_credentials"
}
'

Refer to our Generate Token API documentation to learn more.

2.2. Generate Checkout Link

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

Below are the sample requests and response for a Generate Checkout Link API.

cURL

curl --request POST \
     --url https://pluraluat.v2.pinepg.in/api/checkout/v1/orders \
     --header 'accept: application/json' \
     --header 'content-type: application/json' \
     --data '
{
  "merchant_order_reference": "112345",
  "order_amount": {
    "value": 1100,
    "currency": "INR"
  },
  "integration_mode": "SDK",
  "pre_auth": false,
  "allowed_payment_methods": [
    "CARD",
    "UPI",
    "NETBANKING",
    "POINTS",
    "WALLET"
  ],
  "notes": "order1",
  "callback_url": "https://sample-callback-url",
  "failure_callback_url": "https://sample-failure-callback-url",
  "purchase_details": {
    "customer": {
      "email_id": "kevin.bob@example.com",
      "first_name": "Kevin",
      "last_name": "Bob",
      "customer_id": "123456",
      "mobile_number": "9876543210",
			"country_code": "91",
      "billing_address": {
        "address1": "10 Downing Street Westminster London",
        "address2": "Oxford Street Westminster London",
        "address3": "Baker Street Westminster London",
        "pincode": "51524036",
        "city": "Westminster",
        "state": "Westminster",
        "country": "London",
        "full_name": "harsh kumar",
        "address_type": "HOME/WORK/OTHER",
        "address_category": "BILLING"
      },
      "shipping_address": {
        "address1": "10 Downing Street Westminster London",
        "address2": "Oxford Street Westminster London",
        "address3": "Baker Street Westminster London",
        "pincode": "51524036",
        "city": "Westminster",
        "state": "Westminster",
        "country": "London",
        "full_name": "harsh kumar",
        "address_type": "HOME/WORK/OTHER",
        "address_category": "BILLING"
      }
    },
    "merchant_metadata": {
      "express_checkout_enabled": "TRUE",
      "express_checkout_allowed_action": "checkoutCollectAddress",
      "key1": "DD",
      "key2": "XOF"
    }
  },
  "cart_details": {
    "cart_items": [
      {
        "item_id": "cart_id_1",
        "item_name": "T Shirt",
        "item_description": "Test Description",
        "item_details_url": "https://chriscross.in/cdn/shop/files/95_800x.jpg",
        "item_image_url": "https://chriscross.in/cdn/shop/files/95_800x.jpg",
        "item_original_unit_price": 1,
        "item_discounted_unit_price": 1,
        "item_quantity": 1,
        "item_currency": "INR"
      }
    ]
  }
}
'

Refer to our Generate Checkout Link documentation to learn more.

3. SDK Installation & Initialization

Installation

Add Plugin Dependency:

Open your terminal or command prompt.
Run the following command to install the React Plugin.

Text

npm install react-native-plural react-native-webview

Note:

You can use the npm equivalent command to install react-native-webview.

Initialization

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

JavaScript

import { NewAppScreen } from '@react-native/new-app-screen';
import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';
import SimpleWebView from 'react-native-plural';
import { SafeAreaView, Alert } from 'react-native';

function App() {
  const isDarkMode = useColorScheme() === 'dark';

  return (
    <SafeAreaProvider>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <AppContent />
    </SafeAreaProvider>
  );
}

function AppContent() {
  console.log('App mounted LOG FROM EXAMPLE APP');
  const safeAreaInsets = useSafeAreaInsets();

  const handlePaymentResult = (res: {
    status: 'response' | 'error';
    url?: string;
    reason?: string;
  }) => {
    console.log('onPaymentResult called with:', res);
    if (res.status === 'response' || res.status === 'error') {
      Alert.alert('Payment from App: ' + res.url, res.reason);
      // Once the callback is received, merchant should call the Enquiry API
      // and based on the transaction status, navigate to success/failure screen
    }
  };

  return (
    <>
      <StatusBar barStyle="dark-content" backgroundColor="#fff" />
      <SafeAreaView className="_mdx-s6">
        <SimpleWebView
          source={{ uri: 'https://api.pluralonline.com/api/v3/checkout-bff/redirect/checkout?token=V3_A%2BOTFc%2Fn%2BqnxE%2BJgOhg9Z8BxbA7izZXBGxviC%2FcxJFFhpIncIzNudxaf9FD9iEXX' }}
          className="_mdx-s7"
          onPaymentResult={handlePaymentResult}
          stopNavigationOnMatch={true}
        />
      </SafeAreaView>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;

Note:

Integrate the Create Order API first, and provide the redirect_url to the SDK.
After the SDK invokes the onPaymentResult callback with the payment response, call the Get Order by Order ID API to fetch the final transaction status.

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

Track and verify transaction status using Pine Labs APIs. To retrieve the latest status, use the Fetch APIs or subscribe to webhooks for real-time transaction updates.

Get Order by Order ID

Fetch real-time transaction status by order ID.

Learn More →

Webhooks

Configure webhook events for automatic transaction updates.

Learn More →