# Payvessel Checkout Source: https://docs.payvessel.com/accept-payment/checkout Hosted checkout for cards and bank transfer: integrate with the payvessel-checkout npm package or Merchant Checkout API **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: 1. **npm package (Recommended):** A lightweight frontend SDK that handles the modal UI and payment channels. 2. **Merchant Checkout API:** A server-side integration for custom redirects or backend-driven flows. Use your **public API key** (`api_key`) in frontend code. Keep secret keys server-side only. ### Recommended Integration Pattern For production systems, use this flow: 1. Create order/session state on your backend first. 2. Launch checkout from your frontend using `payvessel-checkout`. 3. On completion callbacks, verify transaction status on your backend. 4. Fulfill value (goods/services/wallet credit) **only after successful server-side verification**. *** ## 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: ```bash theme={null} npm install payvessel-checkout # or yarn add payvessel-checkout ``` ### Usage Examples Include the SDK via CDN or bundle it with your app. ```html theme={null} ``` ```jsx theme={null} 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_phone_number: '08012345678', customer_name: 'Jane Smith', amount: '1000', currency: 'NGN', metadata: { order_id: 'ORD-1001' }, channels: ['BANK_TRANSFER', 'CARD'], onSuccessfulOrder: (data) => { alert('Payment received!'); console.log(data); }, onClose: () => console.log('User closed the modal'), }); }; return ( ); } ``` Ensure you use the `"use client"` directive for the payment component. ```tsx theme={null} "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_phone_number: '08012345678', customer_name: 'Customer Name', amount: '2500', currency: 'NGN', metadata: { order_id: 'ORD-2500' }, channels: ['BANK_TRANSFER', 'CARD'], onSuccessfulOrder: (response) => { // Handle success }, }); }; return ( ); } ``` ### 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. | | `customer_phone_number` | string | Yes | The customer's phone number. | | `customer_name` | string | Yes | The customer's full name. | | `amount` | string | Yes | Amount to charge in naira (e.g., "100" for ₦100.00). | | `currency` | string | Yes | Currency code, default is `NGN`. | | `metadata` | object | Yes | Attach order context (for example, order id and cart id). | | `channels` | array | No | Payment methods: `["BANK_TRANSFER", "CARD"]`. | | `reference` | string | No | Your unique transaction reference. | ### Callback Behavior | Callback | When It Fires | Recommended Action | | ------------------- | ------------------------------------------------------------------------ | --------------------------------------------------- | | `onSuccess` | Initialization succeeds (checkout session created) | Log and track for observability. | | `onSuccessfulOrder` | Customer completes payment and transaction is confirmed in checkout flow | Call your backend to verify and then fulfill value. | | `onError` | Checkout initialization/payment flow encounters an error | Show user-friendly error and allow retry. | | `onClose` | User closes the modal | Preserve cart/session and allow resume. | *** ## Server-Side Verification After a successful payment, always verify the transaction on your server before providing value to the customer. 1. Listen for webhooks from Payvessel. 2. Or use the **Verify Transaction** API to check the status manually. For technical details, see: * [Verify Payment](/api-reference/transactions/verify-payment) * [Webhook Basics](/api-basics/webhooks) Never mark an order as paid based only on frontend callbacks. *** ## Mobile and Platform SDKs If you are not integrating with a web frontend, use the SDK that matches your platform. ### React Native SDK (`react-native-payvessel`) Use this SDK for React Native apps with in-app modal checkout. ```bash theme={null} npm install react-native-payvessel react-native-webview # iOS only cd ios && pod install ``` ```tsx theme={null} import React, { useState } from "react"; import { View, Button } from "react-native"; import PayvesselCheckout from "react-native-payvessel"; export default function App() { const [visible, setVisible] = useState(false); return (