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:

Compose the submit slot inside a Checkout element that mounts custom sub-elements.
Drive an external card.submit() / bank.submit() call while keeping the button’s chrome themed with the rest of the SDK.

Factory

overflow.submitButton(options?: SubmitButtonElementOptions): SubmitButtonElement

Example

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

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`	`'Submit'`	Button text.
`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 does not accept required, validate, or validateAsync. It has no value to validate.

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-dismissable input).

Value

type SubmitButtonValue = undefined;

The onSubmit payload’s value is always undefined. Read data from other elements’ .value getters or onChange snapshots 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