Payment methods section

The Payment methods section is required. Pass paymentMethods as a list of method names in the render order you want.

Enable methods

overflow.checkout({
  paymentMethods: ['card', 'bank', 'applePay', 'googlePay'],
});

Supported names:

'card'
'bank'
'applePay'
'googlePay'

Render order

The array order controls render order. Methods that fail a runtime check (a wallet on http://, a wallet unavailable on the device, a misconfigured merchant) are hidden without shifting siblings.

Default selection

The first available method is selected on mount unless you set defaultPaymentMethod:

overflow.checkout({
  paymentMethods: ['applePay', 'card', 'bank'],
  defaultPaymentMethod: 'card',
});

If the default is not available at runtime, the first available method wins.

Per-method options

Configure a method using its top-level key on the Checkout options. The options match the standalone element’s options.

overflow.checkout({
  paymentMethods: ['card', 'bank', 'applePay', 'googlePay'],
  card: {
    fields: {
      holderName: { hidden: false },
      postalCode: { hidden: true },
    },
  },
  // `card` also accepts `fieldLayout` and per-field brand controls
  // (`fields.cardNumber.acceptedBrands`, `acceptedBrandsPlacement`).
  // See the card reference for the full surface.
  bank: {
    mode: { default: 'manual' },
  },
  applePay: {
    buttonType: 'plain',
    buttonStyle: 'black',
  },
  googlePay: {
    buttonType: 'buy',
    buttonColor: 'default',
  },
});

See:

Submitted value

onSubmit carries the authorize-ready payload under the matching key. Each shape:

value.card: encrypted card envelope — encryptedCardNumber, encryptedExpiryMonth, encryptedExpiryYear, encryptedSecurityCode (empty string when hidden), plus riskData and browserInfo. Optional holderName / postalCode when configured.
value.bank: discriminated union { mode: 'manual', manual: { … } } | { mode: 'plaid', plaid: { … } }.
value.applePay / value.googlePay: { walletToken, walletType: 'applePay' | 'googlePay', … }.

checkout.on('onSubmit', ({ value }) => {
  switch (value.method) {
    case 'card':      /* value.card — encrypted envelope */    break;
    case 'bank':      /* value.bank — mode + payload         */ break;
    case 'applePay':  /* value.applePay — walletToken        */ break;
    case 'googlePay': /* value.googlePay — walletToken       */ break;
  }
});

Forward value to your server. See the authorize a payment API reference for the authorize request shape.

Get started

Elements

Options

Events

Theming

Guides

Enable methods

Render order

Default selection

Per-method options

Submitted value

See also

​Enable methods

​Render order

​Default selection

​Per-method options

​Submitted value

​See also

Enable methods

Render order

Default selection

Per-method options

Submitted value

See also