Integration Patterns
Integration Patterns
Click to Pay Drop-In UI offers flexible integration patterns for your page's checkout experience: Checkout, Trigger, and Components. Each pattern trades off how much of the payment button Click to Pay Drop-In UI manages against how much control you keep over your page.
Choosing a Pattern
Use this table to decide which pattern fits your checkout page:
| Checkout | Trigger | Components | |
|---|---|---|---|
| What does it do? | Checkout renders the Card Entry/Click to Pay Drop-In UI payment button. | The trigger method launches into a sidebar view of the payment screen with your own Card Entry/Click to Pay Drop-In UI payment button. | The components method enables you to embed the Card Entry/Click to Pay Drop-In UI behind your own payment button and is embedded within your payment page. |
| What is it best for? | Using the Card Entry/Click to Pay Drop-In UI payment button. | Merchants that want to host their own payment button to launch into the Card Entry/Click to Pay flow in a sidebar view. | Merchants that want to fully embed the payment UI into their payment page as an embedded head-less solution. |
| Who owns the payment button(s)? | Click to Pay Drop-In UI | Merchant | Merchant |
| Display modes | Sidebar or embedded | Sidebar | Embedded |
| Summary | Out of the box UI behind a Click to Pay Drop-In UI hosted payment button | Launch the payment UI into a sidebar view from your own payment button | Embed the payment UI into your page behind your own payment button |
Select a pattern to see its UI, a summary of how it behaves, and a JavaScript example:
Checkout renders the Card Entry/Click to Pay Drop-In UI payment button. It is best for using the Card Entry/Click to Pay Drop-In UI payment button.
This table summarizes the Checkout pattern:
| Attribute | Value |
|---|---|
| Who owns the payment button(s)? | Click to Pay Drop-In UI |
| Display modes | Sidebar or embedded |
This example creates a checkout instance with the transient-token flow, where you pass the token to your server for payment authorization:
// Initialize the Unified Checkout clientconst client = await window.VAS.UnifiedCheckout(sessionJWT);// Create checkout with auto-processing disabledconst checkout = await client.createCheckout({ autoProcessing: false });// Mount - returns transient token onlyconst transientToken = await checkout.mount('#payment-buttons');console.log('Received token:', transientToken);// Pass transient token to your server for payment authorizationsendToServer(transientToken);// Clean upcheckout.destroy();client.destroy();The trigger method launches into a sidebar view of the payment screen with your own Card Entry/Click to Pay Drop-In UI payment button. It is best for merchants that want to host their own payment button to launch into the Card Entry/Click to Pay flow in a sidebar view.
This table summarizes the Trigger pattern:
| Attribute | Value |
|---|---|
| Who owns the payment button(s)? | Merchant |
| Display modes | Sidebar |
This example creates a trigger with the transient-token flow, mounted from your own button's click handler:
// Initialize the Unified Checkout clientconst client = await window.VAS.UnifiedCheckout(sessionJWT);// Create trigger with auto-processing disabledconst trigger = client.createTrigger('PANENTRY', { displayMode: 'sidebar', autoProcessing: false});// Mount is called when the merchant's own button is clickeddocument.getElementById('your-pay-button').addEventListener('click', async () => { const token = await trigger.mount('#payment-container'); console.log('Received token:', token); // Pass transient token to your server for payment authorization sendToServer(token);});// Clean uptrigger.destroy();The components method enables you to embed the Card Entry/Click to Pay Drop-In UI behind your own payment button and is embedded within your payment page. It is best for merchants that want to fully embed the payment UI into their payment page as an embedded head-less solution.
This table summarizes the Components pattern:
| Attribute | Value |
|---|---|
| Who owns the payment button(s)? | Merchant |
| Display modes | Embedded |
This example creates a component with the transient-token flow:
// Initialize the Unified Checkout clientconst client = await window.VAS.UnifiedCheckout(sessionJWT);// Create component with auto-processing disabledconst component = client.createComponent('PANENTRY', { autoProcessing: false});// Mount - returns transient token onlyconst token = await component.mount('#payment-container');console.log('Received token:', token);// Clean upcomponent.destroy();Thanks for your feedback!
Last published: October 28, 2026