Customised payment page (iFrame)

Fabrick's iFrame page allows merchants to process online credit card transactions with a hidden payment page through an iFrame on the checkout page.

With Fabrick's iFrame payment page you can customise the layout of the checkout page, while card data is sent from the checkout form to a hidden page (residing on Fabrick's servers) via javascript.

This solution requires to annually validate PCI compliance by completing and returning to the acquirer the SAQ A-EP.

Integrate customised payment page

With Fabrick Payment Orchestra' customised payment page, merchants can also offer a personalized experience during checkout by designing the checkout page according to their preferences.

Step 1: Encrypt the request

The procedure is very similar to the one shown on Fabrick payment page.

Firstly, encrypt the transaction information with shopLogin, uicCode (the currency code), amount, and shopTransactionId (a transaction identifier chosen by the merchant) codes.

Here is an example. The merchant's servers communicate the transaction information by setting the values of the WSCryptDecrypt's Encrypt method in the following way:

1<Encrypt>
2  <shopLogin>9000001</shopLogin>
3  <uicCode>242</uicCode>
4  <amount>1245.6</amount>
5  <shopTransactionId>34az85ord19</shopTransactionId>
6</Encrypt>

Fabrick Payment Orchestra authenticates the calling server and validates the information that distinguishes the transaction. If the checks detect no anomalies, an encrypted string is returned to Fabrick Payment Orchestra

Fabrick Payment Orchestra responds with at least two parameters:

• TransactionResult - encryption was successful

• CryptDecryptString - an encrypted string with all the required information necessary for the next step.

1<EncryptResult>
2  <GestPayCryptDecrypt xmlns="">
3  <TransactionType>ENCRYPT</TransactionType>
4  <TransactionResult>OK</TransactionResult>
5  <CryptDecryptString>30715CA8...</CryptDecryptString>
6  <ErrorCode>0</ErrorCode>
7  <ErrorDescription/>
8  </GestPayCryptDecrypt>
9</EncryptResult>

Step 2: Import scripts and security checks from Fabrick Payment Orchestra

Once obtained the encrypted data string (as described in the previous step), the buyer's browser is directed to the merchant's checkout page, which includes a javascript file received from Fabrick's servers:

<script src="https://ecomm.sella.it/pagam/JavaScript/js\_GestPay.js" type="text/javascript"></script>

The script automatically performs a browser compatibility check to make sure that the HTML postmessage function, necessary for exchanging data, is supported.

The result of the check is the boolean value of the BrowserEnabled variable:

To load the hidden iFrame page, the checkout page must call the JavaScript function passing the Merchant code, the encrypted string, and a callback object used to read the results of the security verification.

CreatePaymentPage creates a hidden iframe that securely sends the credentials to Fabrick Payment Orchestra.

pageLoadedCallback is a function that will be fired the creation of the hidden iframe. Let's see an example:

if(BrowserEnabled){
  // The Browser is supported!
  GestPay.CreatePaymentPage(
    MerchantCode,
    EncryptedString,
    paymentPageLoadedCallback);
}else{
  // the browser is NOT supported
}

The function creates a hidden iFrame in the body of the element and loads the payment page by passing the merchant code and the encrypted string in the previous step.

<iframe
  src="https://ecomm.sella.it/Pagam/HiddeniFrame.aspx?a=MerchantCode&amp;b=EncryptedString"
  heigth="0"
  width="0"
  style="position:absolute;top:0;left:0;width:0;height:0;visibility:hidden">
</iframe>

When the payment page is called, the necessary security checks are performed and the result is reported in the result object.

var paymentPageLoadedCallback=function(result){
  if(Result.ErrorCode!=10){// 10 means no security errors
    //An error has occurred
    //result.ErrorCode will return the Error occurred
    //Result.ErrorDescription will return the Error Description
    //.... place here error handle code...
  }else{
    //the iFrame is correctly created and the payment page is loaded;
    // the user can proceed to insert the credit card data.
  }
     
  // SPOILER -- we'll talk later about this. 
  if (PARes) {
    var transKey = getCookie('transkey'); // use your preferred method to get cookies 
    handle3Dsecurity(PARes, transkey);
  }
} 

If the browser compatibility check fails, the iFrame will not created and the payment page will not load.

You can check the supported browsers in the Software requirements section.

Step 3: Send card data

In order to send the card data to the hidden iFrame, the checkout page assigns a function to the OnSubmit event of the credit card form. This function retrieves the card data and calls the GestPay.SendPayment function, providing an array with the card number (CC), the expiration month and year (EXPMM and EXPYY), the CVV (CVV2) if active, to a callBack function.

• The credit card field contains values between 13 and 19 digits.

• The expiration month and year consist of 2 digits, respectively.

• The CVV2 field contains 3 or 4 digits.

Here is an example:

<form name="myCCForm" action="" method="post" OnSubmit="return checkCC();">
  <fieldset>
    <legend>Insert Credit Card Data</legend>
    <label for="CC">Credit Card Number</label>
    <input type="text" name="CC" value="" autocomplete="off" id="CC"/>
    <label for="ExpMM">Expiry Month</label>
    <input type="text"name="ExpMM"id="ExpMM"value=""/>
    <label for="ExpYY">Expiry Year</label>
    <input type="text"name="ExpYY" id="ExpYY" value=""/>
    <label for="CVV2">CVV2 / 4DBC</label>
    <input type="text" name="CVV2" id="CVV2" value=""/>
    <label for="BuyerName">Buyer's name</label>
    <input type="text" name="BuyerName" id="BuyerName" value=""/>
    <label for="BuyerEmail">Buyer's email</label>
    <input type="text"name=" BuyerEmail" id="BuyerEmail" value=""/>
  </fieldset>
  <fieldset>
    <input type="submit" name="submit" value="Send Payment" id="submit"/>
  </fieldset>
</form>

And here's the checkCC javascript function:

function CheckCC(){
  document.getElementById('submit').disabled=true;
    GestPay.SendPayment({
    CC:document.getElementById('CC').value,
    EXPMM:document.getElementById('ExpMM').value,
    EXPYY:document.getElementById('ExpYY').value,
    CVV2:document.getElementById('CVV2').value,
    BuyerName:document.getElementById('BuyerName').value,
    BuyerEmail:document.getElementById('BuyerEmail').value
  },paymentCompletedCallback);
  return false;
}

To exempt the Ecommerce website from getting onerous and overly high PCI-DDS certifications, the OnSubmit event should avoid passing card data to the merchant's checkout page.

Step 4: Transaction results

Fabrick Payment Orchestra sends the result of the transaction as a javascript object and as a notification that is forwarded with a server-to-server call to the page set on the merchant's server (the notification page can be set on the Response URL Server to Server function to be found in the Configuration > Environment section of the backoffice.

How to manage 3D transactions (Verified by Visa, MasterCard SecureCode, etc.)**

Transactions made with 3D cards require cardholder authentication. The acquirer, redirected to the Issuer, must authenticate according to the system chosen by the Issuer. Once authenticated, the transaction receives a positive or negative outcome from the company that issued the card (Issuer).

If the card is recognized as 3D, the result of the authorization request is a specific error (8006) that can be read at the ErrorCode property of the Result object. The description of the error (verified by Visa) is inferred through the ErrorDescription property of the Result object.

Additional information required for the payment process and specific to 3D transactions is shown at this stage. In particular, it is necessary to acquire the transaction id through the TransKey property of the Result object and an encrypted string, which is visible thanks to the VbVRisp property of the Result object, and which is used in the following phase.

To determine if the authentication is necessary, it's recommended to analyze the field ErrorCode: