PaymentMethods container

The PaymentMethods container is designed to manage and display the available payment methods during the checkout process. You can configure it to handle the selection of payment methods, display the payment method handlers, and manage the main slot for the payment methods.

PaymentMethods configurations

The PaymentMethods container provides the following configuration options:

Example

The following example renders the PaymentMethods container on a checkout page, displaying the available payment methods in the element with the class checkout__payment-methods:

import PaymentMethods from '@dropins/storefront-checkout/containers/PaymentMethods.js';
import { render as CheckoutProvider } from '@dropins/storefront-checkout/render.js';

const $paymentMethods = checkoutFragment.querySelector(
  '.checkout__payment-methods'
);

CheckoutProvider.render(PaymentMethods)($paymentMethods),