---
name: paystack-inline-popup-lifecycle
description: Use when managing Paystack Inline popup lifecycle methods including preloadTransaction, cancelTransaction, checkout, paymentRequest, getStatus, and callback sequencing.
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 Lifecycle

Use this skill when the task goes beyond opening a basic checkout and needs lifecycle control.

## Preload then open

`preloadTransaction` warms the checkout iframe and returns a function that opens it later.

```ts
const openCheckout = popup.preloadTransaction({
  key: "pk_test_...",
  email,
  amount,
  onSuccess: ({ reference }) => verifyOnServer(reference),
});

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

## Cancel a popup

Use `cancelTransaction` with either the transaction id or the returned transaction object.

```ts
const transaction = popup.newTransaction(options);

cancelButton.addEventListener("click", () => {
  popup.cancelTransaction(transaction);
});
```

## Inspect status

The transaction object exposes `getStatus()`.

```ts
const status = transaction.getStatus();

if (status.status === "success" && status.response) {
  // Still verify on the server before fulfillment.
}
```

Known status values are `null`, `error`, `abandoned`, `auth`, `failed`, `success`, and `pending`.

## Promise APIs

Use `checkout(options)` or `paymentRequest(options)` when the UI flow expects a promise-returning method.

```ts
const transaction = await popup.checkout({
  key: "pk_test_...",
  email,
  amount,
  onSuccess: ({ reference }) => verifyOnServer(reference),
});
```

## Best practices

- Keep frontend status as UI state, not fulfillment truth.
- Always verify successful references on the server.
- Handle duplicate callbacks defensively.
- Clean up event listeners when components unmount.