Manage the Cart Details

PayTabs provides you with the backend packages that make the integrating with PayTabs payment gateway very easy by providing ready-made classes that handle the payment process.

This article is dedicated to walking you through how to pass the cart information within the initiation of the payment page.The following string values can be passed within the ${methodName} array, which is passed as the third parameter to the createPaymentPage function, as shown below:

---

Method Specification

Be Aware

That the cart_details parameter is Mandatory, not passing it would throw an exception.

Description	Create the Payment Page.
Since	1.0.0
Required	✔
Signature	/** * @function createPaymentPage * @param {Array} payment_code - List of accepted payment methods. * @param {Array} transaction - Transaction type and class. * @param {Array} cart - Cart details including ID, currency, amount, and description. * @param {Array} customer - Customer details. * @param {Array} shipping - Shipping details. * @param {Array} urls - Callback and return URLs. * @param {string} lang - Language code (e.g., "en"). * @param {Function} callbackFunction - Function to handle the response. * @param {boolean} [framed=false] - Whether to use a framed payment page. */ PayTabs.createPaymentPage(payment_code, transaction_details, cart_details, customer_details, shipping_address, response_URLs, lang, callback, framed);
Sample	PayTabs.createPaymentPage( paymentMethods, transaction_details, cart_details, customer_details, shipping_address, response_URLs, lang, callbackMethod, frameMode );

---

Method Parameters:

Cart Details

Name	cart_details
Type	Array
Array Element values:	First cart_id Indicates the cart/order id at the merchant end to easily relate the transaction to. Type Min Max Required String 1 64 ✔ Second cart_currency 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. Type Validation Rules Required String Must be in ISO Alpha-3 Format. ✔ Third cart_amount Indicates the amount the customer is about to be charged with. Both min and max values are subjected to the merchant transaction limits. Type Min Max Required Decimal 0.01 9999999999.99 ✔ Fourth cart_description Indicates the cart/order description at the merchant end to easily relate the transaction to. Type Min Max Required String 1 128 ✔
Description	This is the third parameter of the createPaymentPage() function, which handles the payment cart details (e.g ID, Currency, etc).
Default	-
Required	✔
Example	let cart = { id: "100001", currency: "SAR", amount: "550", description: "dummy description" }; let cart_details = [ cart.id, cart.currency, cart.amount, cart.description ];

---

Expected payment flow behaviour:

1. As a merchant you would initiate a payment request per the above Specifications, which include a sample code.


2. Then, after generating the payment page use the result to redirect the customer to the payment page.
   

   function callbackMethod(result) {
       //failed to create the payment page.
       if (result['response_code:'] === 400) {
            // get the message
            console.log(result['result']);
            // Next step
       }
       //success to create the payment page.
       else {
           //On success, redirect the customer to complete the payment.
           console.log(result.redirect_url);
           // Next step
       };
   }
   
   PayTabs.createPaymentPage(
       paymentMethods,
       transaction_details,
       cart_details,
       customer_details,
       shipping_address,
       response_URLs,
       lang,
       callbackMethod,
       frameMode
   );


3. After this, your customer would proceed normally with payment by choosing the preferred payment method (if available), and providing his card information.
   
   


4. Then, he will be redirected to his issuer bank 3DS/OTP page to authenticate the used card


5. Finally, he would be redirect to a success/error page accordingly. By this time, you will be able to see his transaction on your merchant dashboard, whether it's accepted/authorized or not.