Skip to content
Adobe Commerce Storefront Logo Adobe Commerce Storefront

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, optional vaulted (saved) cards for signed-in shoppers, and the Apple Pay button.

Supported payment methods

Section titled “Supported payment methods”

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_PAYRoadmap
PayPal FastlaneFASTLANERoadmap
PayPal buttonsSMART_BUTTONSRoadmap

Use the PaymentMethodCode enum from the API import:

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

Available containers

Section titled “Available containers”

The Payment Services drop-in component provides these containers:

  • Apple Pay container: The ApplePay container renders an Apple Pay button that shoppers on Apple devices 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. When the shopper is authenticated (via getCustomerToken on the initializer or container), the form can show a Save this card option for vaulting.

  • Stored cards container: The StoredCards container displays vaulted cards and can include a pay with a new card row. Use it with the vault APIs on @dropins/storefront-payment-services/api.js to load tokens and sync the cart when a saved card is selected. See the StoredCards container page and the Vaulted cards at checkout tutorial.

Additional resources

Section titled “Additional resources”

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