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 learn how to manage this configuration option:
If this option is not shown in the selected payment method (such as "PayTabs - ApplePay") configuration page, that's mean that this payment method doesn't support/work-in iFrames
- From your WooCommerce admin panel on the left side, navigate to WooCommerce -> Settings.
Then, click on the "Payments" tab to display all payment methods.
After that, click on the "Manage" button to configure this payment method.
Then you have to choose the payment form type to be either a redirect page or an embedded form, as clarified below:
- Redirect to hosted form on PayTabs server: Redirects the customer to the payment page to finish payment and then return to the website.
- iFrame payment form integrated into checkout: Displays the payment page within the checkout page.
If you choose the iFrame payment form option, then we highly recommend using HTTPS on your site.
Finally, you will need to save your configuration information by clicking on the “Save Changes” button.
And here you are configuring PayTabs' WooCommerce plugin with the appropriate payment form type.
⌂ To get familiar with the whole process and the other steps, kindly navigate to our "The WooCommerce 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.