Integration Patterns

Unified Checkout offers flexible integration patterns for placing Click to Pay Drop-In UI on your page: Checkout, Trigger, and Components. Each pattern trades off how much of the payment button Unified Checkout manages against how much control you keep over your page.

Select a pattern to see its UI and a summary of how it behaves:

Unified Checkout Checkout UI

Checkout renders all payment buttons in a checkout list. The list order is determined by the order they are passed in the Sessions API. It is best for clients that want to show all payment methods in a list within their checkout page.

This table summarizes the Checkout pattern:

Attribute	Value
Who owns the payment button(s)?	Unified Checkout
Display modes	Sidebar or embedded
Supported payment methods	All configured methods

Unified Checkout Trigger UI

The trigger method launches into the payment screen without a separate Unified Checkout hosted payment button. It is best for merchants that want to host their own payment button to launch into the Click to Pay/Card Entry flow in a sidebar view.

This table summarizes the Trigger pattern:

Attribute	Value
Who owns the payment button(s)?	Merchant
Display modes	Sidebar
Supported payment methods	Card payment and Click to Pay

Unified Checkout Components UI

The components method enables the client to compartmentalize and embed the checkout UI without a separate Unified Checkout hosted payment button. It is best for merchants that want to fully embed the payment form into their payment page without the Unified Checkout header.

This table summarizes the Components pattern:

Attribute	Value
Who owns the payment button(s)?	Merchant
Display modes	Embedded
Supported payment methods	Card payment, Click to Pay, and eCheck/ACH service

Attribute	Value
Who owns the payment button(s)?	Merchant
Display modes	Embedded
Supported payment methods	Card payment and Click to Pay

Choosing a Pattern

Use this table to decide which pattern fits your checkout page:

	Checkout	Trigger	Components
What does it do?	Checkout renders all payment buttons in a checkout list. The list order is determined by the order they are passed in the Sessions API.	The trigger method launches into the payment screen without a separate Unified Checkout hosted payment button.	The components method enables the client to compartmentalize and embed the checkout UI without a separate Unified Checkout hosted payment button.
What is it best for?	Clients that want to show all payment methods in a list within their checkout page.	Merchants that want to host their own payment button to launch into the Click to Pay/Card Entry flow in a sidebar view.	Merchants that want to fully embed the payment form into their payment page without the Unified Checkout header.
Who owns the payment button(s)?	Unified Checkout	Merchant	Merchant
Display modes	Sidebar or embedded	Sidebar	Embedded
Supported payment methods	All configured methods	Card payment and Click to Pay	Card payment, Click to Pay, and eCheck/ACH service
Example uses	A merchant that requires a button list of all accepted payment methods in Unified Checkout.	A merchant that has an existing pay by card/Click to Pay button that they want to launch into the payment UI using a sidebar view.	A merchant that wants to embed Unified Checkout payment components directly into their page without the standard header. This integration method is ideal for a user that offers a radio button/drop-down UI.
Summary	Full out-of-the-box checkout	Use own payment button to launch UC within a sidebar	Full embed payment UI without Unified Checkout Payment button

	Checkout	Trigger	Components
What does it do?	Checkout renders all payment buttons in a checkout list. The list order is determined by the order they are passed in the Sessions API.	The trigger method launches into the payment screen without a separate Unified Checkout hosted payment button.	The components method enables the client to compartmentalize and embed the checkout UI without a separate Unified Checkout hosted payment button.
What is it best for?	Clients that want to show all payment methods in a list within their checkout page.	Merchants that want to host their own payment button to launch into the Click to Pay/Card Entry flow in a sidebar view.	Merchants that want to fully embed the payment form into their payment page without the Unified Checkout header.
Who owns the payment button(s)?	Unified Checkout	Merchant	Merchant
Display modes	Sidebar or embedded	Sidebar	Embedded
Supported payment methods	All configured methods	Card payment and Click to Pay	Card payment and Click to Pay
Example uses	A merchant that requires a button list of all accepted payment methods in Unified Checkout.	A merchant that has an existing pay by card/Click to Pay button that they want to launch into the payment UI using a sidebar view.	A merchant that wants to embed Unified Checkout payment components directly into their page without the standard header. This integration method is ideal for a user that offers a radio button/drop-down UI.
Summary	Full out-of-the-box checkout	Use own payment button to launch UC within a sidebar	Full embed payment UI without Unified Checkout Payment button

Was this page helpful?

Last published: September 29, 2026