Submit button

The submitButton element is a pure relay. It has no value, no validation, and no internal state. Fires onReady once on mount and onSubmit (with value: undefined) on every click. Use it to drive an external card.submit() / bank.submit() call while keeping the button’s chrome themed with the rest of the SDK when you are composing standalone elements yourself. Checkout renders its own submit CTA and does not accept a submitButton inside it — reach for submitButton only for standalone layouts.

Factory

overflow.submitButton(options?: SubmitButtonElementOptions): SubmitButtonElement

Example

const card = overflow.card();
const submit = overflow.submitButton({ label: 'Pay now' });

card.mount('#card');

submit
  .on('onSubmit', () => card.submit())
  .mount('#submit');

card.on('onSubmit', async ({ value }) => {
  await fetch('/your-backend/authorize', {
    method: 'POST',
    body: JSON.stringify({ paymentMethod: value }),
  });
});

Options

Key	Type	Default	Notes
`label`	`string`	`'Pay now'`	Button text.
`variant`	`'primary' \| 'secondary'`	`'primary'`	Visual style. `secondary` renders a lower-emphasis button using your theme’s secondary tokens.
`disabled`	`boolean`	`false`	Renders the button disabled and suppresses `onSubmit` on click.
`appearance`	`Appearance`	inherits instance theme	Element-scoped override. See Element-scoped overrides.
`id`, `ariaLabel`, `locale`	shared

submitButton has no value and no validation.

Events

Event	Fires	Payload
`onReady`	Once, when the button has mounted.	`{ elementType: 'submitButton' }`
`onSubmit`	On every click while `disabled: false`.	`{ elementType: 'submitButton', value: undefined }`

Focus and blur are wired to the underlying <button> and fire normally. onEscapeKeyPressed is not emitted (there is no shopper-dismissible input).

Value

type SubmitButtonValue = undefined;

The onSubmit payload’s value is always undefined. Read data from other elements’ onChange snapshots (or their .value getters where available) inside your onSubmit handler.

Updating at runtime

submit.update({ disabled: true });
submit.update({ label: 'Processing…' });

Use update() to toggle disabled based on other elements’ complete state:

let cardOk = false;
let emailOk = false;
const sync = () => submit.update({ disabled: !(cardOk && emailOk) });

card.on('onChange', ({ complete }) => { cardOk = complete; sync(); });
email.on('onChange', ({ complete }) => { emailOk = complete; sync(); });

Inside Checkout

Checkout renders its own submit control. Use standalone submitButton when composing elements outside Checkout, or when you need a themed button for a fully custom layout.

Get started

Elements

Options

Events

Theming

Guides

Factory

Example

Options

Events

Value

Updating at runtime

Inside Checkout

See also

​Factory

​Example

​Options

​Events

​Value

​Updating at runtime

​Inside Checkout

​See also

Factory

Example

Options

Events

Value

Updating at runtime

Inside Checkout

See also