Initiate an iFramed/Embedded Payment Page

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 display the payment page within a frame/embedded look via this package. The following boolean value can be passed within the frameMode parameter.

---

Method Specification

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:

FrameMode

Name	frameMode
Type	Boolean
Description	The ninth parameter to the createPaymentPage> function, which set the Famed Mode status.
Default	false
Required	✘
Example	let frameMode = true;

---

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.