"Pay Now" Checkout iFrame. | Charge Automation Inc Help Center

Pay Now iFrame Integration Guide

The Pay Now iFrame is a secure UI component that allows you to embed payment buttons or forms directly into your website (e.g., WordPress, custom booking engines). It enables you to collect sensitive payment data—including card numbers, CVV, and billing info—without these details ever touching your server, ensuring PCI compliance.

1. Implementation

Place the script tag below where you want the "Pay Now" button to appear or where you want the iframe to auto-load. Update the data-attributes with your specific account and payment details.

Sample Request

HTML

<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="Payment Successful!">
</script>

2. Data Attributes Reference

Attribute	Type	Data Type	Description
`userAccountId`	M	String	Your unique ChargeAutomation account ID.
`amount`	M	Float	The transaction amount.
`currency`	M	String	3-letter ISO currency code (e.g., USD).
`orderId`	M	String	Your unique invoice or order ID.
`chargebackProtection`	M	String	Set to `Yes` or `No`.
`hash`	M	String	SHA-256 HMAC hash for security.
`generateButton`	O	String	Set to `No` to auto-load the iframe instead of a button.
`externalId`	O	String	An internal reference ID from your system.
`description`	O	String	Brief description of the transaction.
`payerEmail`	O	String	The customer's email address.
`data-successMsg`	O	String	Custom success message displayed after payment.

M = Mandatory | O = Optional

3. Security: Generating the Hash

To prevent data tampering, you must generate a hash on your server. Do not change the sequence of parameters.

PHP Example (Server-Side):

$amount = (float) $amount;
$path = "$userAccountId.$orderId.$amount.$currency.$chargebackProtection";
$hash = hash_hmac('sha256', $path, $api_key, false);

Locate your API Key in Settings > Integrations > API.

4. Handling Post-Payment Logic

Listening for Success

Use the following JavaScript listener to trigger actions on your site (like showing a "Thank You" page) once the payment is confirmed.

JavaScript

window.addEventListener("message", function (e) {
  if (e.data.status !== undefined && e.data.message === 'paymentSuccess') {
    console.log("Transaction Ref:", e.data.transaction_ref_no);
    alert('Payment Successful!');
    // Redirect or update UI here
  }
}, false);

IMPORTANT: PMS Synchronization

When the reservation data is pushed to your Property Management System (PMS), ensure the reservation is marked as Paid. This prevents ChargeAutomation from accidentally triggering automated payment request emails to the guest for an already settled balance.

5. Verifying Transaction Status

You can programmatically verify a payment status at any time using the transaction_ref_no.

API Endpoint: GET https://app.chargeautomation.com/api/v1/verify-payment-request/{transaction_ref_no}
Developer Tip: Always store the transaction_ref_no in your database immediately after a successful payment for future reconciliation and polling.

Smoobu <> ChargeAutomation Integration

Redsys <> ChargeAutomation

WorldPayWPG <> ChargeAutomation

Hospitable <> ChargeAutomation Integration

Sympl <> ChargeAutomation Integration