Skip to content

Search is only available in production builds. Try building and previewing the site to test it out locally.

Payment Services overview

The Payment Services drop-in component renders the credit card form, the Apple Pay button, and the Google Pay button.

The following table provides an overview of the payment methods that the Payment Services drop-in supports. The “Payment method code” column lists the PaymentMethodCode enum value for each method:

Payment methodPayment method codeStatus
Apple PayAPPLE_PAYSupported
Credit/debit cardCREDIT_CARDSupported
Google PayGOOGLE_PAYSupported
PayPal FastlaneFASTLANERoadmap
PayPal buttonsSMART_BUTTONSRoadmap

Use the PaymentMethodCode enum from the API import:

import { PaymentMethodCode } from '@dropins/storefront-payment-services/api.js';

The Payment Services drop-in component provides three containers:

  • Apple Pay container: The ApplePay container renders an Apple Pay button that shoppers can use to place an order.

  • Credit card container: The CreditCard container renders a form where shoppers enter their card details to place an order with a credit or debit card.

  • Google Pay container: The GooglePay container renders a Google Pay button that shoppers can use to place an order.

For more information, refer to the specific service documentation linked above.