PayTabs plugins make the integration with the PayTabs payment gateway very easy by providing a ready-made and easy-to-install plugin that enables you to be ready and go with a few steps, to get you up and running with your business.
In this article, we will walk you through how to manage the frame/embed mode on your website/store's checkout page, so that you can display our hosted payment page within your same checkout page without redirecting the customer to the PayTabs external payment page, as shown below. Kindly follow the below steps to know how to manage this configuration option:
1. From your Drupal admin panel on the left side, navigate to "Commerce" and select "Configuration".
2. Then, click on the "Payment gateways" under "Payment" to display all payment gateways.
3. After that, On the payment gateways page, Select "Edit" button
4. Finally, provide the title you want this payment method to be displayed with to your customers on your website/store checkout page as shown below:
Choosing "iFrame inside the site" will enable you to display the payment page within your website/store's checkout page (inner frame), After the customer will fill in his card details and proceed with the payment, this frame window would disappear and a redirection to the return page (success page/cart page) will be performed.
On the other hand, if you choose "Redirect outside the site", the customers will be redirected to the Paytabs payment page to proceed with the payment and will be redirected back to the return page (success page/cart page) after submitting their payment.
The iFrame mode doesn't apply any of your UI (user interface) customization on PayTabs payment page. To know how to customize your normal PayTabs hosted payment page user interface, please check our How to customize the PayPage (Hosted Payment Page) UI? solution article.
⌂ To get familiar with the whole process and the other steps, kindly navigate to our "The Drupal Plugin Integration Manual" solution article.
⇦ And to navigate to the previous step in the integration process "Step 1 - Setup and activate the integration method" click here.
⇨ And to get familiar with the rest of the steps regarding the current step "Step 2 - Configure the integration method" kindly click here.
⇨ Or you can navigate to the next step in the integration process "Step 3 - Initiating the payment" kindly click here.