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 configuring the frame/embed mode on your PrestaShop 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. Kindly follow the steps below to configure it in your PrestaShop store:
- From your PrestaShop admin panel, navigate to Improve > Modules > Module Manager.
Select the preferred payment method from the listed available PayTabs payment methods.
- Then, click the edit button "configure" to configure the plugin.
- Then, select the "iFrame payment from integrated into checkout" option on the Payment form type field, as shown below:
- Redirect to hosted form on PayTabs server: 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.
- iFrame payment from integrated into checkout: will enable you to display the payment page within your website/store's checkout page (inner frame):
After the customer fills in his card details and proceeds with the payment, this frame window would disappear and a redirection to the return page (success page/cart page) will be performed. - Finally, click on the Save button to save your configurations.
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 PrestaShop Plugin Integration Manual" solution article.
⇦ And to get familiar with the rest of the steps regarding the previous step "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" click here.
⇨ Or you can navigate to the next step in the integration process "Step 3 - Initiating the payment" kindly click here.