Checkout

Reevit Checkout provides a hosted, PCI-friendly payment experience you can launch from your app. Configure allowed origins, enable providers, and embed the checkout SDK for a full end-to-end flow.

Choose Your Checkout Path

Server-created Checkout Session (Recommended): Create the payment on your backend, then open it with the React, Vue, or Svelte SDK.
Frontend-created Checkout: Use a public key directly in the SDK for prototypes and migrations.
Payment Links: Share a hosted checkout page with no frontend code.

Payment Links are best for one-off sales or invoices. The Checkout SDK is ideal when you want a fully embedded experience.

Prerequisites

Connect a provider in Connections.
Create a private API key for your backend from Developers → API Keys.
Decide your environment (test vs live) and use the matching key.

Step 1: Configure Checkout Settings

Open Dashboard → Checkout Settings and configure:

Allowed Origins (Required)

Browser requests to the checkout endpoints are protected by CORS. Add every web domain that will open the checkout.

Add one origin per line
Include the scheme and port if needed (e.g., http://localhost:3000)
Wildcards are supported for subdomains (e.g., https://*.example.com)

Example:

https://shop.example.com
https://checkout.example.com
http://localhost:3000

Enabled Providers

Select at least one PSP so checkout can route payment intents. If none are enabled, checkout cannot initialize.

Branding (Optional)

Set primary color and styling defaults so the checkout modal matches your brand.

Update Allowed Origins via API (Optional)

curl -X PUT https://api.reevit.io/v1/checkout/settings \
  -H "X-Reevit-Key: pfk_live_xxx.secret" \
  -H "X-Org-Id: org_123" \
  -H "Idempotency-Key: checkout-settings-123" \
  -H "Content-Type: application/json" \
  -d '{
    "allowed_origins": [
      "https://shop.example.com",
      "https://checkout.example.com"
    ]
  }'

Step 2: Create a Checkout Session

Create the payment on your backend with a private API key. The initial session does not need to guess which method the shopper will choose.

import { Reevit } from "@reevit/node";

const reevit = new Reevit(
  process.env.REEVIT_API_KEY!,
  process.env.REEVIT_ORG_ID!
);

export async function createCheckoutSession(order: {
  id: string;
  amount: number;
  email: string;
}) {
  return reevit.checkoutSessions.create(
    {
      amount: order.amount,
      currency: "GHS",
      country: "GH",
      customer_id: order.email,
      metadata: { order_id: order.id },
    },
    { idempotencyKey: `order_${order.id}` }
  );
}

Return only session.session_secret to the frontend. Keep your private API key on the server.

Step 3: Install the SDK

npm install @reevit/react

For Vue and Svelte, see SDKs.

Step 4: Open Checkout (React Example)

import { ReevitCheckout } from "@reevit/react";
import "@reevit/react/styles.css";

export function CheckoutButton({ sessionSecret }: { sessionSecret: string }) {
  return (
    <ReevitCheckout
      sessionSecret={sessionSecret}
      paymentMethods={['card', 'mobile_money']}
      email="customer@example.com"
      phone="0241234567"
      onSuccess={(result) => {
        console.log("Payment success", result);
      }}
      onError={(error) => {
        console.error("Payment failed", error.message);
      }}
      onClose={() => {
        console.log("Checkout closed");
      }}
    >
      <button>Pay GHS 100.00</button>
    </ReevitCheckout>
  );
}

When the shopper selects Make payment, the SDK submits the final method and provider through the session-authenticated API. Reevit creates or reuses an intent scoped to that session, method, and provider, and opens the PSP only after receiving its access code. Paystack Mobile Money therefore resumes a Mobile Money-specific transaction instead of the session’s initial intent.

The frontend-only publicKey + amount + currency flow remains available for existing integrations, but production checkouts should use sessionSecret.

Option: Generate Checkout with the Reevit CLI

You can scaffold checkout and place it on an existing frontend page:

reevit init --goal checkout \
  --checkout-page src/app/cart/page.tsx \
  --checkout-fields price,name,email,phone,reference \
  --checkout-metadata order_id,product_sku

In interactive mode, the CLI asks for:

Which existing page should host the checkout button
Which customer fields to collect (price/amount, name, email, phone, reference)
Which custom metadata keys to include (for example order_id or cart_id)

Enter - at the page prompt (or pass --checkout-page -) to keep the scaffolded component and runnable demo standalone. Customer values map to customer_name, customer_email, and customer_phone workflow variables; custom keys become metadata_<key>. See the Reevit CLI for the full wizard.

Step 5: Handle Webhooks

To fulfill orders reliably, set up outbound webhooks.

Configure your webhook endpoint in Dashboard → Webhooks.
Verify signatures, then update your order state on payment.updated when data.status is succeeded — there is no payment.succeeded webhook.

If you create payments via SDK or API, Reevit injects the correlation metadata needed for PSP webhook routing automatically. Use metadata for your own fields. See Webhooks.

Testing & Go Live

Test Mode

Use pfk_test_...secret keys for sandbox payments.
Confirm flows end-to-end before switching to live keys.
Learn more in Sandbox & Test Mode.

Go Live Checklist

Switch to pfk_live_...secret keys.
Add your production domains to Allowed Origins.
Ensure live PSP connections are enabled.
Update webhook signing secrets in production.

Troubleshooting

CORS / network_error

If you see checkout requests fail in the browser:

Confirm the site origin is listed in Checkout Settings → Allowed Origins.
Ensure the origin includes scheme and port (e.g., http://localhost:3000).
Verify you are using a valid public key.

Styles Not Loading

Make sure you import the SDK styles:

import "@reevit/react/styles.css";

Payment Links

Generate hosted checkout pages without writing code.

Webhooks

Receive real-time events and fulfill orders automatically.

Security

Learn how Reevit keeps checkout and data secure.

Payments

Understand the unified payment lifecycle and routing logic.

Get Started

Core Features

Developer Resources

Checkout

Checkout

Choose Your Checkout Path

Prerequisites

Step 1: Configure Checkout Settings

Allowed Origins (Required)

Enabled Providers

Branding (Optional)

Update Allowed Origins via API (Optional)

Step 2: Create a Checkout Session

Step 3: Install the SDK

Step 4: Open Checkout (React Example)

Option: Generate Checkout with the Reevit CLI

Step 5: Handle Webhooks

Testing & Go Live

Test Mode

Go Live Checklist

Troubleshooting

CORS / network_error

Styles Not Loading

Payment Links

Webhooks

Security

Payments

​Checkout

​Choose Your Checkout Path

​Prerequisites

​Step 1: Configure Checkout Settings

​Allowed Origins (Required)

​Enabled Providers

​Branding (Optional)

​Update Allowed Origins via API (Optional)

​Step 2: Create a Checkout Session

​Step 3: Install the SDK

​Step 4: Open Checkout (React Example)

​Option: Generate Checkout with the Reevit CLI

​Step 5: Handle Webhooks

​Testing & Go Live

​Test Mode

​Go Live Checklist

​Troubleshooting

​CORS / network_error

​Styles Not Loading

​Related Resources

Payment Links

Webhooks

Security

Payments

Checkout

Choose Your Checkout Path

Prerequisites

Step 1: Configure Checkout Settings

Allowed Origins (Required)

Enabled Providers

Branding (Optional)

Update Allowed Origins via API (Optional)

Step 2: Create a Checkout Session

Step 3: Install the SDK

Step 4: Open Checkout (React Example)

Option: Generate Checkout with the Reevit CLI

Step 5: Handle Webhooks

Testing & Go Live

Test Mode

Go Live Checklist

Troubleshooting

CORS / network_error

Styles Not Loading

Related Resources