---
updatedAt: 2026-09-17T11:57:45.000Z
---

Fetch the complete documentation index at: https://developer.pay.nl/llms.txt. Use this file to discover all available pages before exploring further. Append .md to any documentation page URL to get its markdown version.

# SDK API Reference

This page provides a concise reference for the PayParts SDK (TypeScript) public API. It covers the newer `init() -> prepare() -> bind()` flow. See [Add components to your frontend](add-components-to-your-frontend/index.md) for guidance, and [Handle events](handle-events.md) for the event model.

## PayPartsSDK

The global object exposed as `window.PayPartsSDK` (also the named export `PayParts`).

| Method    | Signature                                       | Description                                                                                   |
| :-------- | :---------------------------------------------- | :-------------------------------------------------------------------------------------------- |
| `init`    | `(opt: InitOptions) => Promise<Checkout>`       | Initializes the SDK using your `sessionToken` and returns a `Checkout`.                       |
| `prepare` | `(methodOrSection: string) => PaymentComponent` | Returns a `PaymentComponent` for the given method/section. Throws unless called after `init`. |

<br />

## Checkout

The object returned by `PayPartsSDK.init()`.

| Member          | Signature                                                           | Description                                                                      |
| :-------------- | :------------------------------------------------------------------ | :------------------------------------------------------------------------------- |
| `events`        | `MountEventHandlers`                                                | Attach event handlers to control the payment flow.                               |
| `prepare`       | `(methodOrSection: string) => PaymentComponent`                     | Prepare a component (e.g. `'card-payments'`, `'checkout-buttons'`, `'methods'`). |
| `updateConfig`  | `(config: Partial<CheckoutConfig>) => void`                         | Update the SDK configuration after initialization.                               |
| `getConfig`     | `() => Readonly<Required<CheckoutConfig>>`                          | Get the current configuration.                                                   |
| `updateSession` | `(request: UpdateSessionRequest) => Promise<UpdateSessionResponse>` | Update the session amount/order. **Zero only (not yet in Production).**          |

<br />

## PaymentComponent

Returned by `checkout.prepare(methodOrSection)`.

| Method          | Signature                                          | Description                                                                                                             |
| :-------------- | :------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------- |
| `bind`          | `(target: string \| HTMLElement) => void`          | Mounts the component into a target element or selector.                                                                 |
| `unmount`       | `() => void`                                       | Unmounts the component from the page.                                                                                   |
| `updateContext` | `(context: Partial<PaymentMethodContext>) => void` | Updates the component's context.                                                                                        |
| `isReady`       | `() => boolean`                                    | Whether the component is ready to submit (all fields valid).                                                            |
| `refresh`       | `() => Promise<void>`                              | Refreshes the component data.                                                                                           |
| `submit`        | `() => Promise<SubmitResult>`                      | Triggers payment programmatically. Useful when you hide the built-in pay button (`creditCardOptions.hideSubmitButton`). |

<br />

## SubmitResult

Returned by `PaymentComponent.submit()`.

```typescript
type SubmitResult =
  | { status: 'success'; orderId: string; returnUrl: string }
  | { status: 'validation_failed' }
  | { status: 'error'; message: string; errorTag?: string }
  | { status: 'not_ready' };
```

<br />

## Async submit (`onSubmit`)

The `onSubmit` handler supports **asynchronous** logic. When the user submits payment, the SDK waits (up to `onSubmitTimeout`, default `30000` ms) for the handler to call `event.resolve()` before continuing with the payment.

This lets you run other async work first — for example creating an order on a different platform/ERP, freezing stock, or validating inventory — and only continue once it has completed:

```typescript
onSubmit: async (event) => {
  // Create the order on another platform first...
  await myPlatformApi.createOrder({ items, customer });
  // ...and only then continue with the PayParts payment
  event.resolve();
}
```

* Call `event.resolve()` to continue with the payment.
* Call `event.reject(error)` to cancel/abort the payment (e.g. if the external order creation fails).
* See [Handle events](handle-events.md) for the full `onSubmit` example.

## Events

Event handlers are attached via `checkout.events`. Full list and event payloads: [Handle events](handle-events.md).