What is Merchant Page Integration?

You can setup payment form and start accepting payments with the help of PayFORT Merchant Page. Merchant Page Integration uses PayFORT iFrame which can be easily integrated with your payment form. It takes the look and feel of your merchant site and accepts payments from major credit cards including MADA, VISA, Mastercard, etc. You develop your site in any technology of your choice and integrate the iFrame in your html based checkout page.

The Iframe allows you to let your customer checkout on your merchant website instead of getting redirected to PayFort pages. In this type the you can unify the user experience and reduce the cost of redirecting the customer to different pages. Also it enables you to control the transaction flow.

Figure1

Figure 1 - Using PayFORT iFrame for web

How it Works?

  1. Your checkout page will display an integrated PayFORT iFrame to your Customer that has the same look and feel as that of your website.

  2. Customer fills his/her payment details in the checkout page.

  3. PayFORT server receives the payment details and validates the same.

  4. PayFORT then sends a confirmation to your checkout page to complete the transaction.

  You have the option to redirect the Customer directly to the checkout page.

Integration Flow

Integration

Figure 2 : Integration Flow using iFrame

Here is the description of the PayFORT iFrame Integration workflow :

  1. The customer begins the checkout process on your website.
  2. The payment page with integrated iFrame is displayed to the customer on the your site. The Customer then enters the card’s details on the payment page.
  3. PayFORT checks the card details.
  4. PayFORT creates a token for the Customer transaction and sends it to the payment page.
  5. The Payment page then sends a JSON request along with the token to PayFORT.
  6. In case your page receives from PayFORT server a 3-D Secure URL 3ds_url, and response indicating that a 3ds check is required then:
    1. Your payment page redirects the Customer to the ACS to check his card enrollment.
    2. The Customer enters authentication data on the ACS platform.
    3. The ACS performs authentication of the Customer’s data and sends the authentication results to PayFORT.
  7. PayFORT completes the operation based on the 3-D Secure response and returns the response to your payment page.
  8. PayFORT sends the payment results to your site.
  In case of 3ds secure check, PayFort returns status 20: On holdand message 064: 3-D Secure check requestedmessage.For example, PayFort is waiting for your payment page to authenticate the Customer.
  If you include the token_name parameter in the request and this Token already has a successful Authorization, then the card number (masked) and expiry date will be displayed in their allocated fields.
  If the Token is sent by you, it will be generated with the same name as sent by your page.
  Payment processing page, payment form and payment details form all refer to payment page on your site where customer will enter card details.

How to add the Tokenization service on the Merchant Page channel?

The Tokenization service is applicable to be integrated through the Merchant Page Channel through the below steps: 1. The Customer processes the first PURCHASE/ AUTHORIZATION payment successfully. 2. The Merchant will receive a token_name in the response. This token_name should be considered as a permanent token name, and it can be used in the future customer’s payments by submitting the token_name in the next PURCHASE/ AUTHORIZATION payment with card_security_code parameter. 3. No need to open the Merchant Page to fill all the card details again in the next checkouts.

If the Customer wants to update/ delete his card, you should check Update Token section.

For more details on Tokens and Tokenization process visit the link

Difference Between Merchant Page and Redirection

Merchant Page Integration allows you to design a checkout page using PayFORT iframe where you can capture and verify the details of customer's credit card. The complete process involves displaying a checkout page to the customer where they will enter their credit card details and the details would be verified by the PayFORT servers and a token would be sent back to the merchant site which can be further used for carrying out check out process.

Redirection involves authorizing a customer purchase. In this case amount for the purchase is hold for a particular period of time until it is captured or voided. If no action is taken by the merchant site then by default the amount is voided and refunded back to the card. For more details on redirection please visit the link

Give It a Try

Use one of our test cards and corresponding CVV to try iFrames out for yourself.

You can use any expiry date (mm/yy), as long as it's in the future.

Supported Credit Cards:

Credit Cards Not Supported:

Endpoints

An endpoint is one end of a communication channel and your merchant site will communicate with the PayFORT resources using Endpoints. For PayFORT APIs, an endpoint includes a URL of PayFORT server or service.

Sandbox

https://sbcheckout.payfort.com/FortAPI/paymentPage

Live

https://checkout.payfort.com/FortAPI/paymentPage

Integrate iFrames to Payment Page

If you are planning to use PayFORT iFrames then you can use the endpoints  for testing and and also for going live. You can use programming language of your choice or what your site uses and can use the iFrame in your html based check out page.

Before you start

You need to signup for a test account or a live account with PayFORT. Once you signup you will get the access to the Backoffice. Make sure you have your access_code. Refer to Figure 3 . You can find it in the backoffice, under Integration Settings > Security Settings > Access Code. You can check out more about navigating through backoffice by visiting this link.


Figure 3 : Access Code Generation

The Payment Page Template available in the backoffice provides you the feature to create a payment processing page using PayFort iFrame. Refer to the Figure 4


Figure 4 : Use Payment Settings to create a payment form

Sample iFrame code snippet

The following sample code snippet is the start of the payment process and allows you to tokenize a customer's sensitive card information using iFrames. 


<iframe  style="border:5px dotted red" name="myframe" src = "" width="400" height="600">
</iframe>
<form action="https://sbcheckout.payfort.com/FortAPI/paymentPage" method="post" id="" target="myframe">

<INPUT type="hidden" NAME="service_command" value="TOKENIZATION">

The above sample code is an HTML based form that will post a request to PayFORT server. The request parameters are also added in the input tag of the code. However, If you are not familiar with HTML tags and forms then you can checkout this site.

The form consists of iframe tag which specifies the style, name of the style (you can give any name to your style), source code location, width and height of the iframe. All these are customizable values which you can provide.

The form action tag consists of the endpoints  . This will come handy whenever submit action is performed on the page. Once the form is submitted the parameters provided in the form would be sent to the PayFORT server and Endpoints will serve as communication link between your page and PayFORT server.

Request Parameters

    The parameters are mandatory and are required by PayFORT server to validate, authenticate and provide the tokens for processing of payment

Please refer to the section Merchant Page Parameters for request parameters.

Response Parameters

The PayFORT server will return the response in JSON format. Here is the sample response along with the parameters returned by PayFORT server.

[{
"service_command": "TOKENIZATION",
"access_code": "zx0IPmPy5jp1vAz8Kpg7",
"merchant_identifier": "CycHZxVj",
"merchant_reference": "XYZ9239-yu898",
"language": "en",
"signature": "7cad05f0212ed933c9a5d5dffa31661acf2c827a",
"token_name": "Op9Vmp",
"expiry_date": "2105",
"card_number": "400555*****0001",
"response_message": "012",
"response_code": "11012",
"status": "11",
"card_bin": "478773",
"return_url": "http://www.merchant.com"
}]

Please refer to the section Merchant Page Parameters for reponse parameters.

Payment Page Customization

When you begin designing your own custom payment page you will also need to style your custom payment page so that it is in line with the look and feel of your website. Inorder to style your custom payment page you will require CSS files and within those files you need use the css classes. If you are new to HTML and CSS don't worry you can visit this link to learn about HTML/CSS.

This is a list with all customizable CSS classes on the basic payment page:

It is responsible for the total width of the form container and the background.

It is responsible for the form’s shape and width.

It is responsible for the error messages.

It is used to merge the date and CVV fields into one block if needed.

It is the container of each single input field.

It is responsible for the submit button.

It is used to change the color of the Visa/ MasterCard colors.

  You can always create multiple theme files that will enable you to switch freely and easily between them when necessary.Theme files offer you the flexibility to change the look and feel of your page.

  Theme files can be uploaded from the back-office using the Payment Page template screen.

Go to Full API

Check out our full API by visiting this link

For more details on Tokens and Tokenization process visit the link

Need further help?

Thanks for using PayFort.com. If you need any help or support, then message our support team at support@payfort.com.