Skip to main content

​
Features

  • Collections: Card, Bank Transfer, Mobile Money and more
  • Recurring payments: Tokenization and Subscriptions.

​
Requirements

  • Spoflow Encryption keys
  • Spotflow API keys
  • Node versions >= 18.x.x
  • React version >= 18.8.0

​
Installation

  • npm
  • yarn
  • pnpm
npm i @spot-flow/react-spotflow-checkout

​
Usage

​
Payment CheckoutButton

 import React from "react";
import { SpotflowButton } from "@spot-flow/react-spotflow-checkout";

const PaymentComponent = () => {
 return (
   <div>
     <SpotflowButton
       amount={4000} // Not required for subscription payment
       currency="NGN"
       email="temi@mailinator.com" // Email of customer
       reference="MC-123456" // Not required, a unique payment reference will be generated if not provided
       name="John" // Name of customer: Not required
       phoneNumber="09090909090" // Phone number of customer: Not required
       encryptionKey="SKKXXXXXXXXXXXXXXXXX"
       planId="9e0808304-344d-XXXXXXXXX-XXXXX834034" // Not required for a one time payment
       merchantKey="pk_test_fXXXXedhXXXXXXXXXXXXXXXX"
       text="Pay Money"
     />
   </div>
 );
};
SpotflowButton has the ButtonProps which can allow you to customize to your design

​
Hooks

import React from "react";
import { useSpotflowPayment } from "@spot-flow/react-spotflow-checkout";

const PaymentComponent = () => {
 const config = {
   amount: 4000, // Not required for subscription payment
   currency: "NGN",
   email: "temi@mailinator.com", // Email of customer
   name: "John", // Name of customer: Not required
   phoneNumber: "09090909090", // Phone number of customer: Not required
   reference: "MC-123456", // Not required, a unique payment reference will be generated if not provided
   merchantKey: "pk_test_fXXXXedhXXXXXXXXXXXXXXXX",
   planId: "9e0808304-344d-XXXXXXXXX-XXXXX834034", // Not required for a one time payment
   encryptionKey:"SKKXXXXXXXXXXXXXXXXX"
 }
 const initialFn = useSpotflowPayment();

 return (
   <div>
     <button
       type="button"
       onClick={() => {
         initialFn(config);
       }}
     >
       Pay
     </button>
   </div>
 );
};

​
Parameters

​
merchantKey
string
required
Your API Public Key
​
reference
string
Your transaction reference. This MUST be unique for every transaction
​
amount
string
Amount to charge the customer. NB: For subscription payments, amount comes from the plan details. This is not required for subscription payments.
​
currency
string
required
Currency to charge in.
​
localCurrency
string
This is only required when a payment is being made in USD
​
encryptionKey
string
required
This is the encryption key for the merchant. This is required for card payments.
​
planId
string
This is the plan ID being paid for however, this is not required for one time payments.
​
name
string
This is the Customer’s Name
​
phoneNumber
string
This is the Customer’s Phone Number
​
email
string
required
This is the Customer’s Email Address
​
metadata
string
required
This contains other information about the product such as the product name and other additional properties. Product Name should not be passed if planId is being passed
​
callBackUrl
string
This is the URL the browser redirects to on success of a payment
Need more information check out our documentation