Pay Now iFrame is a UI component which allows for the simple integration of Pay Now Buttons into your website (e.g.. wordpress, booking engine, booking website) which generate secure payment forms to collect customer payment information. The information collected includes customer first and last name, card number, cvv code, expiration date, and billing information. This will allow you to process transactions for your customers without having to handle sensitive customer data.

Put this Script tag wherever you want to generate a button or auto load iframe change data-attributes’ values as per your account & payment request.

Sample Request

<script
      id = "ca-iFrame"
      src = "https://app.chargeautomation.com/assets/v2/js/checkout-iframe.js"

      data-userAccountId = "xxxx"
      data-orderId = "my-unique-order1"
      data-amount = "28.00"
      data-currency = "USD" 
      data-chargebackProtection = "No" 

      data-generateButton = "Yes"                 
      data-externalId = "my-external-id"
      data-description = "Order description is here"
      data-payerEmail = "[email protected]”
      data-hash = "Sha-256-hash" 
      data-successMsg="My Custom msg">
 </script>

Data Attributes

Type: indicates whether the Attribute is Mandatory (M), Optional (O)

Attribute	Type	Data Type	Description
amount	M	Float	Transaction amount
chargebackProtection	M	String: [Yes/No]	If you provide charge back Protection facility set this attribute as ‘Yes' otherwise 'No’
currency	M	String	3 letter ISO currency code of the transaction
description	O	String	Description of the payment transaction
externalId	O	String	Set this attribute with external id
generateButton	O	String: [Yes/No]	If you don’t want to generate the default “Pay now’ button, set this attribute as ‘No’ to autoload the Iframe.
hash	M	String [SHA-256 hash]	How to generate hash ? See below.
orderId	M	String	Unique Payment Invoice Id
payerEmail	M	String	Enter the payer valid Email
userAccountId	M	String	Your unique user account id at ChargeAutomation
data-successMsg	O	String	Your custom success message. If you don't provide the message, default message will be displayed.

How to generate Hash ?

*Please don't change the sequence of parameters to generate a valid hash.

PHP Script (Recommended Server side only).

$amount = (float) $amount;

$path = "$userAccountId.$orderId.$amount.$currency.$chargebackProtection";

$hash = hash_hmac('sha256', $path, $api_key, false);

Where do I find my API key ?

You can generate the API key in Setting > Application > API

How to listen to the payment success iframe message ?

if (window.addEventListener) {

  window.addEventListener("message", function (e){

if (e.data.status !== undefined && e.data.message === 'paymentSuccess') {

// Success code goes here

 console.log(e.data.message);
 console.log(e.data.transaction_ref_no); //Gateway transaction reference #
 alert(' Event message : ' + e.data.message);

}

}, false);

}

WorldPayWPG <> ChargeAutomation