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.