Payment Services overview

The Payment Services drop-in component renders Payment Services payment methods, for example, credit/debit card form, Apple Pay, Google Pay, or PayPal buttons.

Test payment on every page that takes money

A location is simply a place in the storefront where a shopper can pay, for example, full checkout, the cart page, the mini-cart, the product page, or a one-click express checkout you added. Digital wallets and express pay buttons are not guaranteed to look or behave the same in each of those places, even when the table below marks a method as supported for this drop-in.

Use the table below as the list of methods this drop-in can integrate. Then, in your own project, click through each place you take payment and confirm which methods actually appear. Your theme, blocks, and Adobe Commerce configuration decide what shoppers see. Hosting also matters: Adobe Commerce on Cloud Services and other Adobe Commerce hosting setups do not always return the same methods everywhere, so run your checks in the environment that matches production.

Supported payment methods

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

Payment method	Payment method code	Status
Apple Pay	APPLE_PAY	Supported
Credit/debit card	CREDIT_CARD	Supported
Google Pay	GOOGLE_PAY	Supported
Local payment methods (LPM)	APM	Roadmap
PayPal buttons	PAYPAL_BUTTONS	Supported
PayPal Fastlane	FASTLANE	Roadmap
Vaulted credit/debit card	VAULT	Roadmap

Use the PaymentMethodCode enum from the API import:

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

Available containers

The Payment Services drop-in component provides four containers:

• Apple Pay container: The ApplePay container renders an Apple Pay button that shoppers with 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.

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

• PayPal buttons container: The PayPalButtons container renders PayPal, Venmo, Pay Later, and debit/credit card buttons that shoppers can use to place an order.

Additional resources

• Payment Service API documentation
• Integration workflow examples
• Support

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