Primer Checkout SDK Demo

Primer Checkout Variants

Loading client session...

<primer-checkout client-token="CLIENT_JWT_TOKEN"></primer-checkout>

Primer Checkout Variants

Drop-In Like

Drop-In Like Dark Theme

Drop-In Like Custom CSS Variables

Dark Theme Custom CSS Variables

With Custom Loader display

Slot visible while loading

Drop-In Like with Custom Styles in JSON

With custom payment layout

Custom Form with Discount Code

Event Listener Demo

MANUAL Approval Demo

preventDefault Demo

3DS — Merchant-rendered dialog

Idempotency Key Demo

Custom Button & setCardholderName Demo

Vault Submit Button Demo (Slotted + External)

Headless Vault Flow Demo

Show Other Payments Toggle Button Demo

Payment Method Container

Single Form Component

Primer Checkout Variants

Drop-In LikeSimplest scenario, for merchants who doesn't need many customizations

Drop-In Like

Drop-In Like Dark ThemeSimplest scenario, for merchants who doesn't need many customizations

Drop-In Like Dark Theme

Drop-In Like Custom CSS VariablesSimplest scenario, for merchants who doesn't need many customizations

Drop-In Like Custom CSS Variables

Dark Theme Custom CSS VariablesSimplest scenario, for merchants who doesn't need many customizations

Dark Theme Custom CSS Variables

With Custom Loader displaySimplest way to add custom loader. Note that loader is shown longer on purpose to show it's working

With Custom Loader display

Slot visible while loadingRender custom slot content immediately, including before client-token is available. Custom content and loader are shown together until primer:ready fires. Requires loader-disabled and display: block on the slotted element.

Slot visible while loading

Drop-In Like with Custom Styles in JSONSimplest scenario, for merchants who doesn't need many customizations

Drop-In Like with Custom Styles in JSON

With custom payment layoutExample of a highly customized payment layout, where the payment methods are displayed based on specific criteria.

With custom payment layout

Custom Form with Discount CodeExample of a custom form layout with discount code functionality.

Custom Form with Discount Code

Event Listener DemoComprehensive event monitoring showing document-level, element-level, and callback events with full payloads

Event Listener Demo

MANUAL Approval DemoMANUAL approval flow: on a :pay 202 the SDK enters its awaiting-approval loading state and dispatches primer:payment-approval-required. Approve/Abort buttons call the merchant API; continueFlow() resumes the SDK separately. Requires a MANUAL client session and an API key.

MANUAL Approval Demo

preventDefault DemoTest event.preventDefault() on primer:payment-start to pause and control payment flow

preventDefault Demo

3DS — Merchant-rendered dialog

Idempotency Key DemoPrimerIdempotencyKeyDemo showcases how to use idempotency keys during payment creation.

Idempotency Key Demo

Custom Button & setCardholderName DemoDemo for testing submitButton.useBuiltInButton with external button events and setCardholderName() API

Custom Button & setCardholderName Demo

Vault Submit Button Demo (Slotted + External)Demo showcasing both slotted and external vault submit button patterns

Vault Submit Button Demo (Slotted + External)

Headless Vault Flow DemoComplete headless vault flow using onVaultedMethodsUpdate, vault.createCvvInput(), vault.startPayment(), and vault.delete()

Headless Vault Flow Demo

Show Other Payments Toggle Button DemoDemo showcasing both slotted and external control patterns for "Show other ways to pay" button

Show Other Payments Toggle Button Demo

Payment Method ContainerTesting the new primer-payment-method-container component with include/exclude filters

Payment Method Container

Single Form ComponentExample of a single form component

Single Form Component