Skip to main content
All CollectionsIntegration GuideAPI
"Pay Now" Checkout iFrame.
"Pay Now" Checkout iFrame.
Thomas avatar
Written by Thomas
Updated over a year ago

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);

}

Did this answer your question?