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.

Provider Identity

Every button is identified by a two-axis key — providerProtocolType:paymentMethodType:

• Protocol — the payment service provider (PSP) that loads and processes the payment: PayPal, Amazon, Revolut, Adyen, Braintree, Computop, Mollie, Stripe.
• Payment method — the button the shopper sees: PayPalExpress, PayLater, GooglePay, ApplePay, AmazonPay, RevolutPay.

The same payment method can be offered through different protocols: Adyen:GooglePay renders a Google Pay button processed via Adyen, Stripe:GooglePay renders the same button via Stripe. The SDK ships with 14 built-in combinations — the Providers overview lists all of them grouped by payment method, with a decision table per method.

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. Each provider renders in isolation, 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