Embedding the Widget

Overview

The ElasticPay widget is a JavaScript class you mount onto a container element in your page. It renders a card input form and handles tokenization — card data never passes through your server.

Load the script

Add the widget script as an ES module:

<script type="module">
  import { ElasticPayCardWidget } from "https://pay.elasticpay.co/widget.js";
  // initialize below
</script>

HTML setup

Add a container element where the widget will render:

<div id="card-widget"></div>
<button id="pay-button">Pay</button>

import { ElasticPayCardWidget } from "https://pay.elasticpay.co/widget.js";

const widget = new ElasticPayCardWidget("card-widget", {
  apiUrl: "https://staging-api.elasticpay.co",
  publishableKey: "pk_sandbox_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  clientSecret: "pi_0abc123_secret_xyz987",
  onTokenize: (result) => {
    // Send result.id to your server to confirm the payment
    console.log("Payment method:", result.id);
  },
  onError: (error) => {
    console.error("Widget error:", error.message);
  },
});

Required config options:

Option	Description
`apiUrl`	`https://staging-api.elasticpay.co` (or `https://api.payfac.local` for local dev)
`publishableKey`	Your `pk_sandbox_...` or `pk_live_...` key
`clientSecret`	The `client_secret` from the payment intent

Data attributes approach

Configure the widget via HTML data attributes instead of JavaScript:

<div
  id="card-widget"
  data-api-url="https://staging-api.elasticpay.co"
  data-publishable-key="pk_sandbox_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  data-client-secret="pi_0abc123_secret_xyz987"
></div>

Then initialize with no config object:

const widget = new ElasticPayCardWidget("card-widget");

Hosted checkout (simplest option)

The hosted checkout redirects the customer to an ElasticPay-hosted payment page. No widget embedding required:

curl -X POST https://staging-api.elasticpay.co/checkout \
  -H "Authorization: Bearer sk_sandbox_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" \
  -H "Content-Type: application/json" \
  -d '{
    "payment_intent_id": "pi_0abc123def456ghi789jkl012mn",
    "client_secret": "pi_0abc123_secret_xyz987",
    "return_url": "https://yoursite.com/payment/complete"
  }'

After the customer completes payment, they are redirected to return_url with the payment intent ID as a query parameter.

For Australian bank account payments (BECS Direct Debit), use ElasticPayBecsWidget. It has the same API shape as the card widget:

import { ElasticPayBecsWidget } from "https://pay.elasticpay.co/widget.js";

const widget = new ElasticPayBecsWidget("becs-widget", {
  apiUrl: "https://staging-api.elasticpay.co",
  publishableKey: "pk_sandbox_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  clientSecret: "pi_0abc123_secret_xyz987",
  onTokenize: (result) => {
    console.log("BECS payment method:", result.id);
  },
});