# 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

```typescript
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

```bash
npm install @getalternative/partner-sdk
```

Or with yarn:

```bash
yarn add @getalternative/partner-sdk
```

Or with pnpm:

```bash
pnpm add @getalternative/partner-sdk
```

{% hint style="info" %}
The SDK requires a modern browser with ES2020 support. It works with React, Vue, Angular, or vanilla JavaScript.
{% endhint %}

***

## 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

{% content-ref url="authentication" %}
[authentication](https://docs.alternativepayments.io/web-sdk/authentication)
{% endcontent-ref %}

{% content-ref url="getting-started" %}
[getting-started](https://docs.alternativepayments.io/web-sdk/getting-started)
{% endcontent-ref %}

{% content-ref url="payment-flow" %}
[payment-flow](https://docs.alternativepayments.io/web-sdk/payment-flow)
{% endcontent-ref %}

{% content-ref url="components" %}
[components](https://docs.alternativepayments.io/web-sdk/components)
{% endcontent-ref %}

{% content-ref url="theming" %}
[theming](https://docs.alternativepayments.io/web-sdk/theming)
{% endcontent-ref %}