Payvessel Checkout

Accept payments with minimal integration using Payvessel’s hosted checkout. Customers can pay with card or bank transfer in a single modal. Ideal for e-commerce, donations, and subscriptions.

Overview

Payvessel Checkout provides a secure, conversion-optimized payment interface. You can integrate it in two ways:

npm package (Recommended): A lightweight frontend SDK that handles the modal UI and payment channels.
Merchant Checkout API: A server-side integration for custom redirects or backend-driven flows.

Integrating with `payvessel-checkout`

The payvessel-checkout package is the fastest way to add payment capabilities to your web application.

Installation

Install the package via npm or Yarn:

npm install payvessel-checkout
# or
yarn add payvessel-checkout

Usage Examples

Vanilla JavaScript
React
Next.js (App Router)

Include the SDK via CDN or bundle it with your app.

<!-- Via CDN -->
<script src="https://unpkg.com/payvessel-checkout@latest/dist/index.umd.js"></script>

<script>
  const openCheckout = async () => {
    const init = PayvesselCheckout.Checkout({
      api_key: "YOUR_PUBLIC_API_KEY",
    });

    await init.initializeCheckout({
      customer_email: "customer@example.com",
      customer_name: "John Doe",
      customer_phone_number: "08012345678",
      amount: "5000",
      currency: "NGN",
      channels: ["BANK_TRANSFER", "CARD"],
      onSuccess: (response) => {
        console.log("Initialization Successful", response);
      },
      onSuccessfulOrder: (orderDetails) => {
        console.log("Payment Successful", orderDetails);
        // Verify payment on your server
      },
      onError: (error) => {
        console.error("Checkout Error", error);
      },
      onClose: () => {
        console.log("Checkout Closed");
      }
    });
  };
</script>

<button onclick="openCheckout()">Pay Now</button>

import { Checkout } from 'payvessel-checkout';

function PaymentButton() {
  const handlePayment = async () => {
    const init = Checkout({
      api_key: 'YOUR_PUBLIC_API_KEY',
    });

    await init.initializeCheckout({
      customer_email: 'user@example.com',
      customer_name: 'Jane Smith',
      amount: '1000',
      currency: 'NGN',
      onSuccessfulOrder: (data) => {
        alert('Payment received!');
        console.log(data);
      },
      onClose: () => console.log('User closed the modal'),
    });
  };

  return (
    <button onClick={handlePayment}>
      Checkout with Payvessel
    </button>
  );
}

Ensure you use the "use client" directive for the payment component.

"use client";

import { Checkout } from 'payvessel-checkout';

export default function CheckoutComponent() {
  const startPayment = async () => {
    const init = Checkout({
      api_key: process.env.NEXT_PUBLIC_PAYVESSEL_KEY!,
    });

    await init.initializeCheckout({
      customer_email: 'customer@email.com',
      customer_name: 'Customer Name',
      amount: '2500',
      currency: 'NGN',
      onSuccessfulOrder: (response) => {
        // Handle success
      },
    });
  };

  return (
    <button onClick={startPayment}>
      Pay Now
    </button>
  );
}

Essential Parameters

Parameter	Type	Required	Description
`api_key`	string	Yes	Your Public API Key from the dashboard.
`customer_email`	string	Yes	The customer’s email address.
`amount`	string	Yes	Amount to charge in naira (e.g., “100” for ₦100.00).
`currency`	string	Yes	Currency code, default is `NGN`.
`channels`	array	No	Payment methods: `["BANK_TRANSFER", "CARD"]`.
`reference`	string	No	Your unique transaction reference.

Server-Side Verification

After a successful payment, always verify the transaction on your server before providing value to the customer.

Listen for webhooks from Payvessel.
Or use the Verify Transaction API to check the status manually.

For technical details, see the Confirm Transaction API reference.

Next Steps

Initialize API Reference

Request/response schemas for server-side integration.

Verify API Reference

How to confirm payments accurately.

Getting started

Use cases

API Basics

Accept Payment

Transfers

Verify Identities

Wallets

Webhook

Payvessel Checkout

Overview

Integrating with `payvessel-checkout`

Installation

Usage Examples

Essential Parameters

Server-Side Verification

Next Steps

Initialize API Reference

Verify API Reference

Getting started

Use cases

API Basics

Accept Payment

Transfers

Verify Identities

Wallets

Webhook

​Overview

​Integrating with payvessel-checkout

​Installation

​Usage Examples

​Essential Parameters

​Server-Side Verification

​Next Steps

Initialize API Reference

Verify API Reference

Overview

Integrating with `payvessel-checkout`

Installation

Usage Examples

Essential Parameters

Server-Side Verification

Next Steps