PayTabs SDK makes the integration with the PayTabs payment gateway very easy by providing a ready-made payment screen that handles the card entry and, billing & shipping information and completes the missing details.
This article is dedicated to walking you through how to initiate the payment/request payload using the configuration options and parameters that have already been clarified in the previous step, "Step 2 - React Native SDK | Configure the integration method".
You will need to identify an object from the PaymentSDKConfiguration class, which you will pass your credentials and payment details through, as shown below. To know more about what is the exact values that should be passed here, please check our 2.1 React Native SDK | Configuration Options & Parameters solution article.
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
You will have to pass a valid profile id along with the corresponding integration keys with ONLY the type of "Mobile SDK". To know more about the usage of every parameter in the PaymentSdkConfiguration please check the table below:
|currency||String (ISO Alpha-3 Format)||✔||Indicates the transaction currency, which the customer will be charged with. Noting that this currency must be configured first on your PayTabs account to accept payment with.|
|Indicates the amount of this transaction the customer is about to be charged.|
|Indicates the cart/order id at the merchant end to easily relate the transaction to.|
|Indicates the cart/order description at the merchant end to easily relate the transaction to.|
⌂ To get familiar with the whole process and the other steps, kindly navigate to our "The React Native SDK Integration Manual" solution article.
⇦ And to navigate to the previous step in the integration process "Step 1 - Setup and activate the integration method" kindly click here.
⇦ And to get familiar with the rest of the steps regarding the current step "Step 2 - Configure the integration method" click here.
⇨ Or you can navigate to the next step in the integration process "Step 3 - Initiating the payment" kindly click here.