@juspay/ec-react-native-sdk

React Native wrapper around our native SDK. We currently only support Android.

Before proceeding, you must understand ExpressCheckout's payment flow, please check : https://juspay.in/docs/advanced/ec/android_integration/index.html

Getting Native SDK

The native sdk must be added to the app's build.gradle. Add the following to {project_directory}/android/app/build.gradle file

repositories {
  mavenCentral()
  maven {
    url 'https://s3-ap-southeast-1.amazonaws.com/jp-build-packages/ec-android-sdk'
  }
  maven {
    url 'https://s3-ap-southeast-1.amazonaws.com/godel-release/godel/'
  }
}

dependencies {
  compile 'in.juspay:ec-android-sdk:1.1.4'
  compile 'com.android.support:support-v4:23.4.0'
}

Installation

Run the following command from your project directory to install the sdk

$ npm i @juspay/ec-react-native-sdk --save

Link the library with the following command

$ react-native link @juspay/ec-react-native-sdk

Usage

Import ExpressCheckout module to your component

import ExpressCheckout from '@juspay/ec-react-native-sdk'

Native Checkout

An inbuilt native screen is provided for convenience - this is more flexible and offers greater customization options. Offers native support for the following payment methods: Cards, NetBanking and Wallets.

var paymentOptions = {
  "environment" : "PRODUCTION",
  "merchantId" : "merchant",
  "orderId" : "order_id",
  "endUrlRegexes" : ["https:\\/\\/shop\\.com\\/payment-response"],
  "paymentInstruments" : ["SAVED_CARD", "CARD", "NB", "WALLET"],
  "orderSummary" : {
    "openModeTitle" : "ExpressCheckout",
    "closedModeTitle" : "ExpressCheckout",
    "Name" : "Customer Name",
    "Amount" : "INR 1",
    "Phone" : "9876543210"
  }
}
ExpressCheckout.expressCheckoutScene(paymentOptions, (url) => {
  // endUrlCallback : Called whenever an endUrl is matched with the URL that is loading in the browser
  // The matched url will be passed
}, () => {
  // errorCallback : Called whenever an error occurs or when the user presses back button
  // Recommended to show the cart screen with an error message
})

Mobile Web Checkout

This mode of checkout opens a mobile optimized web page within the android app to take the payment input from the customer. This is the most straightforward integration. If you wish to disallow certain payment options, you have to explicitly remove the option from the array. If an empty array is passed, then all options are made available

var paymentOptions = {
  "environment" : "SANDBOX",
  "merchantId" : "merchant",
  "orderId" : "order_id",
  "endUrlRegexes" : ["https:\\/\\/shop\\.com\\/payment-response"],
  "paymentInstruments" : ["SAVED_CARD", "CARD", "NB", "WALLET"]
}
ExpressCheckout.mobileWebCheckoutScene(paymentOptions, (url) => {
  // endUrlCallback : Called whenever an endUrl is matched with the URL that is loading in the browser
  // The matched url will be passed
}, () => {
  // errorCallback : Called whenever an error occurs or when the user presses back button
  // Recommended to show the cart screen with an error message
})

Core API Checkout

If you have already built screens to accept card & netbanking options, then you can directly initiate a payment with the customers choice.

Card Payment API

var paymentOptions = {
  "environment" : "SANDBOX",
  "merchantId" : "merchant",
  "orderId" : "order_id",
  "endUrlRegexes" : ["https:\\/\\/shop\\.com\\/payment-response"],
  "nameOnCard" : "Name",
  "cardNumber" : "4242424242424242",
  "cardExpiryMonth" : "05",
  "cardExpiryYear" : "2020",
  "cardSecurityCode" : "123"
}
ExpressCheckout.cardPaymentAPI(paymentOptions, (url) => {
  // endUrlCallback : Called whenever an endUrl is matched with the URL that is loading in the browser
  // The matched url will be passed
}, () => {
  // errorCallback : Called whenever an error occurs or when User presses back button
  // Recommended to show the cart screen with an error message
})

NetBanking Payment API

var paymentOptions = {
  "environment" : "SANDBOX",
  "merchantId" : "merchant",
  "orderId" : "order_id",
  "endUrlRegexes" : ["https:\\/\\/shop\\.com\\/payment-response"],
  "bank" : "NB_AXIS"
}
ExpressCheckout.netBankingPaymentAPI(paymentOptions, (url) => {
  // endUrlCallback : Called whenever an endUrl is matched with the URL that is loading in the browser
  // The matched url will be passed
}, () => {
  // errorCallback : Called whenever an error occurs or when the user presses back button
  // Recommended to show the cart screen with an error message
})

Wallet Payment API

var paymentOptions = {
  "environment" : "PRODUCTION",
  "merchantId" : "merchant",
  "orderId" : "order_id",
  "endUrlRegexes" : ["https:\\/\\/shop\\.com\\/payment-response"],
  "wallet" : "OLAMONEY"
}
ExpressCheckout.walletPaymentAPI(paymentOptions, (url) => {
  // endUrlCallback : Called whenever an endUrl is matched with the URL that is loading in the browser
  // The matched url will be passed
}, () => {
  // errorCallback : Called whenever an error occurs or when the user presses back button
  // Recommended to show the cart screen with an error message
})