Customization

Appearance config

Pass an appearance object when initializing the widget to customize its look:

const widget = new ElasticPayCardWidget("card-widget", {
  apiUrl: "https://staging-api.elasticpay.co",
  publishableKey: "pk_sandbox_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  clientSecret: "pi_0abc123_secret_xyz987",
  appearance: {
    variables: {
      colorPrimary: "#2563eb",
      colorBackground: "#ffffff",
      colorText: "#111827",
      colorDanger: "#dc2626",
      fontFamily: "Archivo, sans-serif",
      fontSize: "16px",
      labelFontSize: "14px",
      inputFontSize: "16px",
      borderRadius: "6px",
    },
  },
});

CSS variables reference

Variable	Default	Description
`colorPrimary`	`#ec3013`	Button and focus ring color
`colorBackground`	`#ffffff`	Input background color
`colorText`	`#201e1d`	Input and label text color
`colorDanger`	`#ae1800`	Error and invalid state color
`colorSuccess`	`#16a34a`	Success state color (direct debit widget)
`fontFamily`	`inherit`	Font family for all widget text. Defaults to `inherit`, so the widget adopts your page’s font.
`fontSize`	`16px`	Base font size
`labelFontSize`	`14px`	Label font size
`inputFontSize`	`16px`	Input field font size
`borderRadius`	`8px`	Border radius for inputs and buttons

The widget ships no web font of its own and requests no font file, so embedding it adds zero font requests to your page. By default it inherits your page’s typography; set fontFamily only if you want it to differ from the surrounding page.

CSS class overrides

For deeper customization, target these stable class names:

Class	Element
`.elasticpay-card-widget`	Root container
`.elasticpay-card-widget__input`	Card input fields
`.elasticpay-card-widget__input--valid`	Input in valid state
`.elasticpay-card-widget__input--invalid`	Input in invalid state
`.elasticpay-card-widget__submit`	Submit button
`.elasticpay-card-widget__status--success`	Success message
`.elasticpay-card-widget__status--error`	Error message

Example:

.elasticpay-card-widget__input {
  border: 1px solid #d1d5db;
  padding: 10px 12px;
}

.elasticpay-card-widget__input--invalid {
  border-color: #dc2626;
}

.elasticpay-card-widget__submit {
  background-color: #2563eb;
  font-weight: 600;
}

Hide the submit button

Set showSubmitButton: false to hide the built-in submit button and trigger tokenization manually:

const widget = new ElasticPayCardWidget("card-widget", {
  apiUrl: "https://staging-api.elasticpay.co",
  publishableKey: "pk_sandbox_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  clientSecret: "pi_0abc123_secret_xyz987",
  showSubmitButton: false,
});

document.getElementById("pay-button")?.addEventListener("click", async () => {
  await widget.tokenize();
});

Use this when the submit button is outside the widget container, or when you need to validate other form fields before triggering payment.