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: "Inter, sans-serif",
      fontSize: "16px",
      labelFontSize: "14px",
      inputFontSize: "16px",
      borderRadius: "6px",
    },
  },
});

CSS variables reference

Variable	Default	Description
`colorPrimary`	`#418FC1`	Button and focus ring color
`colorBackground`	`#ffffff`	Input background color
`colorText`	`#363434`	Input and label text color
`colorDanger`	`#cc4b37`	Error and invalid state color
`fontFamily`	system-ui	Font family for all widget text
`fontSize`	`16px`	Base font size
`labelFontSize`	`14px`	Label font size
`inputFontSize`	`16px`	Input field font size
`borderRadius`	`8px`	Border radius for inputs and buttons

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.