Introduction

collana pay SDK is a drop-in Express Payment Buttons library for any webshop. With a single ExpressButtons() call you render fully-branded, wallet-ready payment buttons — no deep integration with each provider SDK required.

Supported Providers

The SDK ships with 13 built-in provider implementations:

Provider Key	Description
PayPal:PayPalExpress	Native PayPal Express Checkout
PayPal:PayLater	Native PayPal Pay Later
Amazon:AmazonPay	Amazon Pay
Adyen:PayPalExpress	PayPal Express via Adyen Drop-in
Adyen:GooglePay	Google Pay via Adyen Drop-in
Adyen:ApplePay	Apple Pay via Adyen Drop-in
Braintree:PayPalExpress	PayPal Express via Braintree
Braintree:PayLater	PayPal Pay Later via Braintree
Computop:GooglePay	Google Pay via Computop gateway
Computop:ApplePay	Apple Pay via Computop gateway
Mollie:ApplePay	Apple Pay via Mollie
Revolut:RevolutPay	Revolut Pay
Stripe:GooglePay	Google Pay via Stripe Express Checkout Element

Integration

Load the SDK directly from a CDN — no build step, no npm package required:

<script src="https://js-test.collanapay.com/sdk/@VERSION/collana-pay.umd.js"
        integrity="sha384-..." crossorigin="anonymous"></script>

The SDK exposes window.CollanaPay.ExpressButtons — the only function you need.

Architecture Overview

1. Configure — Pass an ExpressButtonsConfig to ExpressButtons(). This includes a list of ProviderButtonConfig entries and three lifecycle callbacks (CallbackHandlers).
2. Render — Call .render() on the returned instance. Each provider SDK is loaded and the button is mounted into the specified container element. Providers render in parallel via Promise.allSettled, so one failure does not block others.
3. Callbacks — When the user clicks a button, onClick fires so you can create a transaction on your backend and return the checkoutData from the collana pay API. The provider SDK then handles wallet authentication. On success, the SDK finalizes the transaction and redirects the user to your confirmation page (UriSuccess). After the redirect, the collana pay backend asynchronously sends a server-to-server callback (Prepare Interaction or Reservation Interaction, depending on the provider) to your backend to confirm the payment. On failure or cancellation, onCancel or onError is called.

Next Steps

• Quick Start — get a button on screen in minutes
• Callback Lifecycle — understand the full payment flow
• Providers — per-provider options and examples
• API Reference — complete TypeScript type documentation