Skip to main content
Blog General

Paymetric Iframe Implementation to Resolve PCI Compliance in Magento 2

Vignesvaran B
July 12, 2019 |

Get your Magento development services with our team of certified professionals who have implemented successful Magento websites. Let’s Talk.

What is PCI Compliance?

PCI Compliance upholds a set of security standards relating to the protection of card data during the time of occurrence and completion of a financial transaction.The Payment Card Industry Data Security Standard (PCI DSS) pertains to companies of any size that accept credit card payments. If your company aims to accept card payments, along with the store, process, and transmit cardholder data, you need to host your data securely with a PCI compliant hosting provider.

A PCI compliant hosting provider should provide multiple layers of defense, along with a secure data protection model that merges physical and virtual security methods. The virtual security method includes authorization, authentication, and passwords, etc., whereas physical security includes restricted access and server, storage, and networking cabinet locks, according to

PCI v3.0 – SAQ A Compliant

When implementing either of the following integration methods, the Merchant has no way to access the raw card data in support of PCI v3.0 SAQ A compliance. Either the IFrame or the entire payment page is hosted within the payment gateway center depending upon which method you choose. This method is more recommended, as it is more secure than the other method.

  • IFrame
  • Hosted

PCI v3.0 – SAQ A-EP Compliant

When implementing either of the following integration methods, while no card numbers are entered within the Merchant’s environment in support of PCI v3.0 SAQ A-EP compliance, the Merchant does have access to the raw card number through JavaScript and therefore must ensure it is not sent to the server.

  • Form Post
  • Ajax

When implementing the Form Post or Ajax integration method, the developers must ensure that they do not post nor send raw card numbers in their environment.PCI - DSSAs an added security measure, sensitive authentication data, including card validation codes or PIN numbers, must never be stored after authorization – even if this data is encrypted.

Paymetric Payment method

A well-known payment method that prevents credit card fraud with Address Verification System (AVS) is Paymetric. There is an extension available for Magento 1, as well as Magento 2. This payment method is used to tokenize and authorize credit card data before the order is placed. Paymetric’s payment method overwrites the default credit card method to provide a payment process while in the checkout process.

Paymetric Payment Method

PCI compliance while using Paymetric

Paymetric’s payment method overwrites the default Credit Card (CC) method to tokenize and authorize service on that. The credit card form displays on the checkout page in order to obtain the credit card details from the cardholder or customer. Getting the credit card data directly from the eCommerce site and storing it into a database is PCI compliance. So what should we do to avoid this? There’s a solution provided by the Payment Card Industry Data Security Standard (PCI DSS).

Here is a tricky solution to overcome that issue:

Paymetric provides an iframe form to process credit card data and returns a token to authorize. Therefore, we need to implement this iframe form instead of a default credit card form. Using an iframe credit card form to process credit card data provides the tokenization response. We will receive that tokenized data, which will set the payment data and submit the order. With submitting the tokenized data instead of an actual credit card form, Magento will not be accepting that, so we need to change or avoid the default credit card validation by using the token data from the Paymetric method to process the authorization and payment.

For this process, we will need to follow the steps below:

  1. Create an XML with the required input fields and validation, then place it inside the helper directory or anywhere that could be accessible by the helper function in the Paymetric module. These XML files are provided by Paymetric, along with their documentation. The XML file will look something like shown below.
		{{css url}}
  1. Next, add a function in helper to get the iframe URL using Paymetric configuration details. Then, pass on this URL to a particular UI component of the payment method.
  2. Display an iframe form in the checkout page, and hide the default credit card form using JavaScript or CSS. Paymetric provides a JS to load and process the iframe operations, so we will need to include this JS into our credit card for renderer knockout JS.
  3. Design the iframe form like your actual form (optional). The CSS URI is used for styling the iframe.
  4. While hitting the ‘place order’ button in the checkout page, we need to add a function to submit the iframe form and get the response token from the Paymetric.
  5. Collect and pass access and signed tokens to the helper function for verification.
  6. If tokens are verified, then populate those details into an actual credit card form and place the order. (Here, the credit card number is not populated, and we did not get a credit card number from the Paymetric. Instead, we used a token number as the card number.)
  7. After it populates the data, continue the checkout process to place the order. (If we get any error in the authorization process, we need to perform all the steps again from step 2.)

Paymetric IFrame Form

This is one of the solutions that we have applied on several websites to solve the PCI compliance issue. Based on the website and platform, it may vary. If you found this blog helpful, then please do let us know if you have any queries.


Vignesvaran B

Vignesvaran, a software engineer, specialized in Magento eCommerce for over four years, has a great passion for developing an eCommerce application. He likes sharing his technical knowledge with others, especially on eCommerce. His hobbies include playing cricket and listening to music.

More posts by Vignesvaran B