Introduction

CollanaPay 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 16 built-in provider implementations:

Provider Key	Description
PayPal:PayPalExpress	Native PayPal Express Checkout
PayPal:PayLater	Native PayPal Pay Later
Google:GooglePay	Google Pay (direct)
Apple:ApplePay	Apple Pay (W3C Payment Request API)
Klarna:Klarna	Klarna button
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 Modes

Script Tag (UMD)

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

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

The SDK exposes window.CollanaPay with ExpressButtons and registerProvider.

npm (ESM)

Install as an npm package and import with a bundler (Vite, webpack, Rollup, etc.):

npm install collana-pay-js

import { ExpressButtons } from 'collana-pay-js';

Architecture Overview

1. Configure — Pass an ExpressButtonsConfig to ExpressButtons(). This includes a list of ProviderButtonConfig entries and four 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 an order on your backend and return an OrderResult. The provider SDK then handles wallet authentication. On completion, onApprove, 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