Payment Services overview

The Payment Services drop-in component renders Payment Services checkout methods (for example credit card, Apple Pay, Google Pay, and PayPal buttons). Shoppers can also see Local Payment Methods (LPM) when your Adobe Commerce configuration exposes them.

Test payment on every page that takes money

A surface 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. When a row lists a PaymentMethodCode value, it matches the enum used in code. Local Payment Methods share the single APM enum value; which specific methods (for example, Bancontact or iDEAL) appear depends on what your Adobe Commerce configuration returns for your store.

Payment method	Payment method code	Status
Apple Pay	APPLE_PAY	Supported
Credit/debit card	CREDIT_CARD	Supported
Local Payment Methods (LPM)	APM	Supported
Google Pay	GOOGLE_PAY	Supported
PayPal buttons	PAYPAL_BUTTONS	Supported
PayPal Fastlane	FASTLANE	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 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.