Hi guys! This post is a tutorial explaining how to develop and offer payment in an iFrame to customers in PrestaShop 1.7.

It can be useful to you if you can’t remove the “Pay” button from inside the iFrame and if you want to make sure customers actually tick the terms & conditions checkbox before placing an order.

If you’re interested and want to know more about iFrame payment option, you’ll find some bit of information after the guide. I also added references and external links to PrestaShop documentation and their developers’blog.

Have a good read!

Step-by-step guide

1/ Create a PaymentOption

In the hookPaymentOptions() method:

$cardPaymentOption = new PaymentOption();
$cardPaymentOption->setCallToActionText($this->l('Pay by Credit Card'))
                  ->setBinary(true)
                  ->setAdditionalInformation($this->l('Some text')
                  ->setModuleName($this->name)
                  ->setLogo(
                      Media::getMediaPath(
                          $this->getLocalPath().'/views/img/logo-front.png'
                      )
                  );

Some explainations:

  ->setBinary(true)

This line above means the “Pay” CTA button will be handled inside the iFrame.

  ->setAdditionalInformation($this->l('Some text')

This line allows you to display some text, and is quite useful in our case to tell the customer that he needs to accept the terms & conditions to be able to place his order.

  ->setModuleName($this->name)

This is the most important line. It’s used to add/remove a “disabled” class to the iFrame section and allow us to hide/show it using CSS.

2/ Hook your module on “displayPaymentByBinaries”

  $this->registerHook('displayPaymentByBinaries')

3/ Implement the method “hookDisplayPaymentByBinaries()”

Make it return a template that contains iFrame HTML tag. This template will be displayed after the terms & conditions checkbox.

  return $this->context->smarty->fetch('path-to-the-template.tpl');

4/ Create the template containing the iframe

In this template file, make sure your iFrame is in a container that has these two classes:

  • js-payment-your-module-name (replace your-module-name by the correct value!)
  • js-payment-binary
<div class="js-payment-your-module-name js-payment-binary">
  <iframe src="{$iframe_src}"></iframe>
</div>

5/ Add a rule in your front CSS

Again, don’t forget to replace your module name!

.js-payment-your-module-name.disabled iframe {
  display: none;
}

Context

The first stable 1.7 version of PrestaShop was released almost one year ago. A major change occured in the checkout process: to comply with the law of all countries, PrestaShop introduced a new payment API, based on German requirements.

Technically speaking, payment modules were hooked on “hookPayment” before 1.7. Developers were free to display a button, an iFrame, an other page embedded in the module etc…
From now on, customers have to choose an option (radio button), accept terms & conditions, then click on the “Pay” button that is common with all payment modules/options. Four types of payment options exist:

  • Offline: bank transfer, cheque etc…
  • External: customer is redirected to a payment page and leaves the shop
  • Embedded: the form is actually inside the checkout process
  • iFrame: the form is also in the checkout process but not hosted on the merchant shop

Impact on iFrame payment option & workaround

This new “Pay” button (“Order with obligation to pay” to be precise) is kinda problematic as most iFrame payment already include a “Pay” button after credit card information form. And it’s (almost) impossible to remove it, weither in using JS or by hiding it somewhere in the configuration of the iFrame.
There’s a second issue with the terms & conditions checkbox. With other payment options, the native “Pay” button is disabled if the customer doesn’t tick the checkbox. With iFrame payment option, we have no way to make the checkbox and the iFrame interact with each other.

Therefore, PrestaShop provides an alternative to make the native “Pay” button disapear when the type of payment option selected is iFrame and make this iFrame visible/not visible depending on the terms & conditions checkbox.

  • Payment module doc: http://developers.prestashop.com/module/50-PaymentModules/index.html
  • Build article on new API: http://build.prestashop.com/news/starter-theme-news-3/#payment-api
  • Example of payment module: https://github.com/PrestaShop/paymentexample