How to implement - Iframe Updated on 26-06-2015

Workflow of how to implement iFrame for Credit Card payments using easypay's services.

0 - Requirements

  • To implement the iframe on your web application you need to ensure you are running your web site with SSL.
  • Request from our services the activation of the iframe and provide the domain name that will request the iframe.
  • It is a requirement to have visa forward activated.

1 - Request a Payment Identifier

Call api_easypay_01BG.php to request a payment identifier.

These API fields are required for iframe:

o_name 
required for credit card
Your client name. It will be automatically filled on Credit Card gateway. 
Example value: John Doe
o_mobile 
required for credit card
Your client mobile or phone number. It will be automatically filled on Credit Card gateway. 
Example value: 912 345 678
o_email 
required for credit card
Your client email. It will be automatically filled on Credit Card gateway. 
Example value: tec@easypay.pt

2 - Calling the iFrame from your website

Using your payment identifier call the iFrame with the following syntax:

https://iframe.easypay.pt/?r=100201030&e=21999&v=1.04

r 
required
Reference of payment.
Example value: 100201030
e 
required
Reference Entity.
Example value: 21999
v 
required
Value to get.
Example value: 1.04
HTML Example of iframe call:

1
2
3
4
5
6
7
8
9
10
11
12
<html lang="pt">
  <head>
    <title>Iframe on mobiletitle>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  head>
  <body>
    <iframe frameborder="0" scrolling="no" style="width: 100%; height: 450px;" src="https://iframe.easypay.pt/?r=100201030&e=21999&v=1.04">
      <p>O seu browser não suporta iframes.p>
    iframe>
  body>
html>

It will display the following frame:

3 - Payment Validation

The iframe has three steps of validation.

The first step is validating the user input data, any errors filling the form will be automatically flagged.
The second step is after hitting the "Pay x.xx" button. The credit card data will be verified and any error (invalid CVV, invalid CC number) will prevent any further action by the user until the errors are fixed.
The third step is after all the data is correct and validated hitting the "Pay x.xx" will effectively make the payment and any error (credit card refused, invalid funds, etc) will prevent any further action and the payment will not be made until the user review the credit card data.

Confirm data and accept Easypay's payment policy:


4 - Payment Finalization

After the payment is completed the user is redirected to the visa forward that is set in the client's account.