> For the complete documentation index, see [llms.txt](https://docs.alternativepayments.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.alternativepayments.io/web-sdk/sdk.md).

# 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="/pages/SYm8q4g8AyfhO7rLF2Mb" %}
[Authentication](/web-sdk/authentication.md)
{% endcontent-ref %}

{% content-ref url="/pages/4eJ6ZeKXY0t3vDOVFVpU" %}
[Getting Started](/web-sdk/getting-started.md)
{% endcontent-ref %}

{% content-ref url="/pages/cgGDbmEVTDDAfg4BWzF2" %}
[Payment Flow](/web-sdk/payment-flow.md)
{% endcontent-ref %}

{% content-ref url="/pages/v9Oy98re8K8KPpjh799e" %}
[Components](/web-sdk/components.md)
{% endcontent-ref %}

{% content-ref url="/pages/HAhpMja1SCRewZLwvu7p" %}
[Theming](/web-sdk/theming.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.alternativepayments.io/web-sdk/sdk.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.