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

The SDK requires a modern browser with ES2020 support. It works with React, Vue, Angular, or vanilla JavaScript.

---

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

AuthenticationGetting StartedPayment FlowComponentsTheming