---
name: paystack-inline-popup-options
description: Use when configuring Paystack Inline typed popup options, amount, currency, metadata, channels, splits, subscriptions, preloading, and callbacks.
license: MIT
compatibility: "Modern browsers with Paystack Popup; package tooling/SSR builds require Node.js >=22.0.0; ESM package; client-side checkout with server verification."
---

# Paystack Inline Popup Options

The Inline SDK exports TypeScript interfaces for Paystack Popup options and callback responses.

## Core options

```ts
popup.newTransaction({
  key: "pk_test_...",
  email: "customer@example.com",
  amount: 500000,
  currency: "NGN",
  reference: "order_123",
  metadata: {
    orderId: "order_123",
  },
  channels: ["card", "bank", "ussd"],
  onSuccess: (response) => verifyOnServer(response.reference),
  onCancel: () => setCheckoutOpen(false),
});
```

Amounts are in the lowest currency denomination, such as kobo for NGN.

## Preloading

Use `preloadTransaction` to warm the checkout iframe before a user clicks the pay button.

```ts
const open = popup.preloadTransaction({
  key: "pk_test_...",
  email: "customer@example.com",
  amount: 500000,
  onSuccess: ({ reference }) => verifyOnServer(reference),
});

button.addEventListener("click", open);
```

## Splits and subscriptions

Use the exported option types when configuring split, subaccount, or subscription fields. Keep privileged split and plan setup on the backend; only pass frontend-safe identifiers into popup options.

## Payment request options

Use `PaystackPopPaymentRequestOptions` with `paymentRequest` when rendering wallet or payment request elements into a container.

```ts
await popup.paymentRequest({
  key: "pk_test_...",
  email: "customer@example.com",
  amount: 500000,
  container: "#paystack-payment-request",
  styles: {
    theme: "light",
    applePay: {
      type: "buy",
      borderRadius: "6px",
    },
  },
  onElementsMount: (elements) => {
    console.log(elements);
  },
  onSuccess: ({ reference }) => verifyOnServer(reference),
});
```

The container must exist in the browser DOM before calling `paymentRequest`.

## Callback behavior

Callbacks include `onLoad`, `onSuccess`, `onCancel`, `onClose`, `onError`, `callback`, `onBankTransferConfirmationPending`, and `onElementsMount` for payment request flows. Keep callbacks idempotent because users can close, retry, or trigger duplicate frontend events.

## Best practices

- Always use a public key in popup options.
- Keep references unique.
- Keep callback code short and resilient to duplicate calls.
- Verify final payment status on the backend before fulfillment.