React SDK

npm install react-credo
# or
yarn add react-credo

import { useCredoPayment } from 'react-credo';

const PaymentComponent = () => {
  const config = {
    key: '0PUBxxxxxxxxxxxxxxxxxxxxxxxx', // Your public key
    customerFirstName: 'Ciroma',
    customerLastName: 'Chukwuma',
    email: 'ciroma@example.com',
    amount: 100000, // NGN 1,000 in kobo
    currency: 'NGN',
    bearer: 0, // 0 = customer pays fee, 1 = merchant pays
    reference: 'unique-ref-123', // Generate unique reference per transaction
    customerPhoneNumber: '2348032698425',
    callbackUrl: 'https://yoursite.com/payment/success',
    onClose: () => console.log('Payment closed'),
    callBack: (response) => {
      console.log('Payment successful:', response);
      // Verify transaction on your backend
    }
  };

  const initializePayment = useCredoPayment(config);

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

{
  transRef: string;      // Transaction reference for verification
  status: string;        // Transaction status
  amount: number;        // Amount paid
  currency: string;      // Currency code
  callbackUrl: string;   // Your callback URL
}

const handlePayment = async (response) => {
  const { transRef } = response;

  // Call your backend to verify
  const result = await fetch(`https://your-api.com/verify/${transRef}`);
  const data = await result.json();

  if (data.status === 'successful') {
    // Grant access
    window.location.href = '/payment-success';
  }
};

const verify = await fetch(
  `https://api.credocentral.com/transaction/${transRef}/verify`,
  { headers: { 'Authorization': 'YOUR_SECRET_KEY' } }
);

const config = {
  // ... other config
  metadata: {
    customFields: [
      { variable_name: 'orderId', value: 'ORD-123', display_name: 'Order ID' },
      { variable_name: 'userId', value: 'user_456', display_name: 'User ID' }
    ]
  }
};