Flashpay Checkout

Flashpay handles bank payment routing, real-time settlement, and status delivery — so your customers complete payments without leaving your storefront. Embed the checkout in three lines of code.

Payment Flow

Consumerat your storefront

→

PSP / Merchantcreates transaction

→

Flashpayroutes payment

→

Consumer Bankreal-time debit

→

Settlementto merchant bank

Authentication

All API requests require a secret key sent as a Bearer token. Get your keys from the Flashpay Developer Portal.

Authorization: Bearer YOUR_SECRET_KEY

Keep your secret key server-side. Never expose it in frontend code or public repositories.

Create a Transaction

Before embedding the checkout, create a transaction from your server. This returns a transactionId you pass to the SDK.

curl -X POST https://api.flashpayweb.com/v1/transactions \
  -H "Authorization: Bearer YOUR_SECRET_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "amount": 500000,
    "currency": "NGN",
    "description": "Order #1042",
    "callbackUrl": "https://yoursite.com/payment/callback"
  }'

amount is in the smallest currency unit (kobo for NGN). NGN 5,000 = 500000.

Embed the Checkout

Pass the transactionId to the Flashpay checkout. Choose the integration that matches your stack.

Vanilla JS

<script src="https://pay.flashpayweb.com/sdk/flashpay.js"></script>
<div id="flashpay-checkout"></div>

<script>
  Flashpay.checkout({
    transactionId: "txn_xxx",
    container: "#flashpay-checkout",
    onSuccess: (data) => console.log("Payment successful", data),
    onFailure: (data) => console.log("Payment failed", data),
    onClose:   (data) => console.log("Checkout closed", data),
  });
</script>

Browser SDK (npm)

npm install @flash-pay/browser-sdk

React

import { FlashpayCheckout } from "@flash-pay/react";

export default function CheckoutPage({ transactionId }) {
  return (
    <FlashpayCheckout
      transactionId={transactionId}
      onSuccess={(data) => console.log("paid", data)}
      onFailure={(data) => console.log("failed", data)}
      onClose={(data) =>  console.log("closed", data)}
      showTitle
      showAmount
    />
  );
}

Vue

<script setup>
import { FlashpayCheckout } from "@flash-pay/vue";

const props = defineProps(["transactionId"]);

function onSuccess(data) { console.log("paid", data); }
function onFailure(data) { console.log("failed", data); }
function onClose(data)   { console.log("closed", data); }
</script>

<template>
  <FlashpayCheckout
    :transactionId="transactionId"
    :onSuccess="onSuccess"
    :onFailure="onFailure"
    :onClose="onClose"
    :showTitle="true"
    :showAmount="true"
  />
</template>

Handle Events

All three callbacks receive a PaymentEventData object.

Callback	When it fires
`onSuccess`	Payment status is SUCCESSFUL or COMPLETED
`onFailure`	Payment status is FAILED
`onClose`	Customer closes the checkout widget, or status is CANCELLED or EXPIRED

PaymentEventData shape

Field	Type	Description
`status`	`string`	SUCCESSFUL, FAILED, CANCELLED, EXPIRED, COMPLETED
`transactionId`	`string`	The transaction ID
`payment.amount`	`number`	Amount in kobo
`payment.currency`	`string`	e.g. NGN
`payment.description`	`string`	Payment description
`payment.destinationAccountName`	`string`	Recipient display name
`payment.callbackUrl`	`string?`	Redirect URL if provided