Overview

Overview

The Alternative Payments Web SDK (@getalternative/partner-sdk) provides pre-built, embeddable UI components for collecting payments in web applications. It handles the complete payment flow including invoice display, payment method management, and secure card collection.

---

Key Features

• Pre-built UI Components - Drop-in components for invoices, payment methods, and checkout

• Full Payment Flow - Orchestrated end-to-end payment experience

• PCI Compliance - Secure card collection via Evervault (no PCI scope for your app)

• ACH Support - Bank account collection

• Customizable Theming - Match your brand colors and styling

• TypeScript Support - Full type definitions included

• Secure Authentication - Token-based auth keeps credentials on your server

---

Quick Example

import { AlternativeClient } from '@getalternative/partner-sdk';

// Token is generated by your backend (keeps credentials secure)
const client = await AlternativeClient.create({
  accessToken: tokenFromYourBackend,
  environment: 'production',
  onAccessTokenExpired: async () => {
    // Fetch new token from your backend when expired
    const response = await fetch('/api/checkout-token');
    const { token } = await response.json();
    return token;
  },
});

// Create a full payment flow
const flow = client.createPaymentFlow({
  containerId: 'payment-container',
  onPaymentSuccess: (payment) => {
    console.log('Payment successful:', payment.id);
  },
});

---

Installation

npm install @getalternative/partner-sdk

Or with yarn:

yarn add @getalternative/partner-sdk

Or with pnpm:

pnpm add @getalternative/partner-sdk
```<div data-gb-custom-block data-tag="hint" data-style='info'>The SDK requires a modern browser with ES2020 support. It works with React, Vue, Angular, or vanilla JavaScript.</div>***

## Architecture

The SDK provides two ways to integrate payments:

### 1. Full Payment Flow

Use `createPaymentFlow()` for a complete, orchestrated payment experience. The SDK handles all navigation between screens automatically.

### 2. Individual Components

Use individual components via `client.components.*` for granular control over the payment experience. Build custom flows by composing components.

| Component | Description |
|-----------|-------------|
| `invoiceDetail` | Show invoice details with line items |
| `paymentMethodSelect` | List and select payment methods |
| `addPaymentMethod` | Add new card or bank account |
| `paymentConfirmation` | Review and confirm payment |
| `paymentResult` | Display payment success/error |

***

## Next Steps<div data-gb-custom-block data-tag="content-ref" data-url='authentication.md'>[authentication.md](authentication.md)</div><div data-gb-custom-block data-tag="content-ref" data-url='getting-started.md'>[getting-started.md](getting-started.md)</div><div data-gb-custom-block data-tag="content-ref" data-url='payment-flow.md'>[payment-flow.md](payment-flow.md)</div><div data-gb-custom-block data-tag="content-ref" data-url='components/'>[components](components/)</div><div data-gb-custom-block data-tag="content-ref" data-url='theming.md'>[theming.md](theming.md)</div>