Paytabs Payment Gateway Integration in React Native

A payment gateway is the simplest way for a business to collect digital or online payments from their website or application.

Online payments have become a part of our daily lives in no time. We’re transacting online not only through debit or credit cards but through numerous other modes like UPI, net banking and wallets as well.

Hello, I’m React Developer and In this article, we will learn how to integrate Paytabs Payment Gateway Integration in React Native.

To set this up you’d have to install react native paytabs package in your react native project. So let’s do that.

To start working with this package, run;

$ npm install @paytabs/react-native-paytabs

or

$ expo install @paytabs/react-native-paytabs

No linking required! just start using.

Follow the below steps to complete the installation

Add dependencies to android/build.gradle file

allprojects {
 repositories {
 ...
     maven { url "http://pay.cards/maven" }
    }
 }

Usage

Import @paytabs/react-native-paytabs

import {RNPaymentSDKLibrary, PaymentSDKConfiguration, PaymentSDKBillingDetails, PaymentSDKShippingDetails} from '@paytabs/react-native-paytabs';

Pay with Card

1. Configure the billing & shipping info, the shipping info is optional

let billingDetails = new PaymentSDKBillingDetails(
  name = "John Smith",
  email = "email@test.com",
  phone = "+2011111111",
  addressLine = "address line",
  city = "Dubai",
  state = "Dubai",
  countryCode = "ae"
  zip = "1234")
let shippingDetails = new PaymentSDKShippingDetails(
  name = "John Smith",
  email = "email@test.com",
  phone = "+2011111111",
  addressLine = "address line",
  city = "Dubai",
  state = "Dubai",
  countryCode = "ae",
  zip = "1234")

2. Create an object of PaymentSDKConfiguration and fill it with your credentials and payment details.

let configuration = new PaymentSDKConfiguration();
    configuration.profileID = "*your profile id*"
    configuration.serverKey = "*server key*"
    configuration.clientKey = "*client key*"
    configuration.cartID = "545454"
    configuration.currency = "AED"
    configuration.cartDescription = "Flowers"
    configuration.merchantCountryCode = "ae"
    configuration.merchantName = "Flowers Store"
    configuration.amount = 20
    configuration.screenTitle = "Pay with Card"
    configuration.billingDetails = billingDetails
    configuration.forceShippingInfo = false;

Options to show billing and shipping info

configuration.showBillingInfo = true
configuration.showShippingInfo = true

Show/Hide Card Scanner

configuration.hideCardScanner = true

3. Start payment by calling startCardPayment method and handle the transaction details

RNPaymentSDKLibrary.startCardPayment(JSON.stringify(configuration))
 .then(result => {
      if(result["PaymentDetails"] != null) { 
        // Handle transaction details
        let paymentDetails = result["PaymentDetails"]
        console.log(paymentDetails)
      } 
      else if(result["Event"] == "CancelPayment") { 
        // Handle events
        console.log("Cancel Payment Event")
      } 
     }, 
    function(error) { 
      // Handle error
      console.log(error)
     });

and that’s it! You’ve successfully set up Paytabs online payment in your react native application.

Take Note

• All online payment packages have an onSuccess and onCancel callback which you can use to handle what happens if the user transaction was successful or canceled.
• The onSuccess callback returns a transactionRef which you could use to verify the payment.

Conclusion

Handling online payment in your react native application is easy as it can be with these packages, allowing you to concentrate on the more important part of your application.

Implement online payment gateway in your application is really that simple, I do hope this was helpful.

Happy Programming!

If you found this article helpful, don’t forget to share and comment!