React native Paytabs library is a wrapper for the native PayTabs Android and iOS SDKs, It helps you integrate with PayTabs seamlessly.
In this article you will be going to know about:
Plugin Support
- iOS
- Android
Installation
$ npm install @paytabs/[email protected] --save --force
Expo
expo install @paytabs/react-native-paytabs
Then to complete the installation, simply follow the below steps:
Android
- Add dependencies to project
build.gradle
fileallprojects { repositories { ... maven { url "http://pay.cards/maven" } } }
- Add
packagingOptions
to modulebuild.gradle
fileandroid { ... packagingOptions { pickFirst '**/*.so' } }
IOS
- Add
libswiftWebKit.tbd
to your Link Binary With Libraries - Navigate to the iOS folder and run the following command:
pod install
Usage
Import @paytabs/react-native-paytabs
import {RNPaymentSDKLibrary, PaymentSDKConfiguration, PaymentSDKBillingDetails, PaymentSDKTheme, PaymentSDKConstants} from '@paytabs/react-native-paytabs';
Pay with Card
- Configure the billing & shipping info, the shipping info is optional
let billingDetails = new PaymentSDKBillingDetails(name= "John Smith", email= "[email protected]", phone= "+2011111111", addressLine= "address line", city= "Dubai", state= "Dubai", countryCode= "ae", // ISO alpha 2 zip= "1234") let shippingDetails = new PaymentSDKShippingDetails(name= "John Smith", email= "[email protected]", phone= "+2011111111", addressLine= "address line", city= "Dubai", state= "Dubai", countryCode= "ae", // ISO alpha 2 zip= "1234")
- Create 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
- 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) });
Pay with Apple Pay
Follow the guide Steps to configure Apple Pay to learn how to configure ApplePay with PayTabs.
Do the steps 1 and 2 from Pay with Card although you can ignore Billing & Shipping details and Apple Pay will handle it, also you must pass the merchant name and merchant identifier.
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.merchantIdentifier = "merchant.com.bundleID"
- To simplify ApplePay validation on all user's billing info, pass simplifyApplePayValidation parameter in the configuration with true.
configuration.simplifyApplePayValidation = true
- Call
startApplePayPayment
to start payment
RNPaymentSDKLibrary.startApplePayPayment(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 errors console.log(error) });
Pay with Samsung Pay
Pass Samsung Pay token to the configuration and call startCardPayment
configuration.samsungToken = "token"
Pay with Alternative Payment Methods
It becomes easy to integrate with other payment methods in your region like STCPay, OmanNet, KNet, Valu, Fawry, UnionPay, and Meeza, to serve a large sector of customers.
Do steps 1 and 2 from Pay with Card.
Choose one or more of the payment methods you want to support.
configuration.alternativePaymentMethods = [PaymentSDKConstants.AlternativePaymentMethod.stcPay]
- Start payment by calling
startAlternativePaymentMethod
method and handle the transaction details
RNPaymentSDKLibrary.startAlternativePaymentMethod(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) });
Tokenization
To enable tokenization (for recurring or any other services that depend on auto-detection from the customers instead of saving credit cards details), please follow the below instructions.
- Request token
configuration.tokeniseType = PaymentSDKConstants.TokeniseType.userOptinoal // read more about the tokeniseType in the enums section configuration.tokenFormat = PaymentSDKConstants.TokeniseFormat.hex32 // read more about the tokenFormat in the enums section
After passing those parameters, you will receive token and transaction references in the delegate, save them for future usage.
- Pass the token & transaction reference
configuration.token = token configuration.transactionReference = transactionreference
Enums
Those enums will help you in customizing your configuration.
Tokenize types
The default type is none
TokeniseType = { "none":"none", // tokenise is off "merchantMandatory":"merchantMandatory", // tokenise is forced "userMandatory":"userMandatory", // tokenise is forced as per user approval "userOptinoal":"userOptional" // tokenise if optional as per user approval };
configuration.tokeniseType = PaymentSDKConstants.TokeniseType.userOptinoal
Token formats
The default format is hex32
TokeniseFormat = {"none":"1",
"hex32": "2",
"alphaNum20": "3",
"digit22": "3",
"digit16": "5",
"alphaNum32": "6"
};
configuration.tokenFormat = PaymentSDKConstants.TokeniseFromat.hex32
Transaction Type
The default type is sale
TransactionType = {"sale":"sale",
"authorize": "auth"};
configuration.transactionType = PaymentSDKConstants.TransactionType.sale
Alternative Payment Methods
AlternativePaymentMethod = {"unionPay":"unionpay", "stcPay":"stcpay", "valu": "valu", "meezaQR": "meezaqr", "omannet": "omannet", "knetCredit": "knetcredit", "knetDebit": "knetdebit", "fawry": "fawry"};
configuration.alternativePaymentMethods = [PaymentSDKConstants.AlternativePaymentMethod.stcPay, ...]
Show/Hide Card Scanner
configuration.hideCardScanner = true
Theme
Use the following guide to customize the colors, font, and logo by configuring the theme and passing it to the payment configuration.
IOS
Theme
Create an instance from the classPaymentTheme
and customize the theme.
let theme = new PaymentSDKTheme() theme.backgroundColor = "a83297" theme.primaryColor = "956596" // Set the merchant logo const merchantLogo = require('./Logo.png'); const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource'); const resolvedMerchantLogo = resolveAssetSource(merchantLogo); theme.merchantLogo = resolvedMerchantLogo configuration.theme = theme
Localization
Use the keys from our localization string files (English, Arabic), then add the same key to your app localizable string file and add your custom string.
Android
Theme
Edit yourstyles.xml
to customize the theme.
<resources> // to override colors <color name="payment_sdk_primary_color">#5C13DF</color> <color name="payment_sdk_secondary_color">#FFC107</color> <color name="payment_sdk_primary_font_color">#111112</color> <color name="payment_sdk_secondary_font_color">#6D6C70</color> <color name="payment_sdk_separators_color">#FFC107</color> <color name="payment_sdk_stroke_color">#673AB7</color> <color name="payment_sdk_button_text_color">#FFF</color> <color name="payment_sdk_title_text_color">#FFF</color> <color name="payment_sdk_button_background_color">#3F51B5</color> <color name="payment_sdk_background_color">#F9FAFD</color> <color name="payment_sdk_card_background_color">#F9FAFD</color> // to override dimens <dimen name="payment_sdk_primary_font_size">17sp</dimen> <dimen name="payment_sdk_secondary_font_size">15sp</dimen> <dimen name="payment_sdk_separator_thickness">1dp</dimen> <dimen name="payment_sdk_stroke_thickness">.5dp</dimen> <dimen name="payment_sdk_input_corner_radius">8dp</dimen> <dimen name="payment_sdk_button_corner_radius">8dp</dimen> </resources>
Merchant Logo
let theme = new PaymentSDKTheme() // Set the merchant logo const merchantLogo = require('./Logo.png'); const resolveAssetSource = require('react-native/Libraries/Image/resolveAssetSource'); const resolvedMerchantLogo = resolveAssetSource(merchantLogo); theme.merchantLogo = resolvedMerchantLogo configuration.theme = theme
Localization
To override your strings you can find the keys with the default values here English, Arabic.
Demo Application
You can try our demo application by checking our complete examples (React-Native, Expo).
License
Simply navigate to the following link to see our LICENSE