Payxit Developer Documentation

2) Base URLs

• Production API: https://api.payxit.co/v1
• Public pay page: https://payxit.co/pay/{token}

8) React Checkout (Payment.jsx)

Use the component below to collect customer details and redirect to the Payxit checkout page. It matches docs/Payment.jsx.

import React, { useState } from 'react';
import axios from 'axios';

const Payment = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    amount: '',
    currency: 'NGN'
  });
  const [apiKey, setApiKey] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleApiKeyChange = (e) => {
    setApiKey(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!apiKey) {
      setError('Please enter your Payxit API key.');
      return;
    }
    setLoading(true);
    setError('');
    try {
      const response = await axios.post('/v1/payxit/public/payments', formData, {
        headers: {
          'x-payxit-key': apiKey,
          'Content-Type': 'application/json'
        }
      });
      const { redirectUrl } = response.data;
      window.location.href = redirectUrl;
    } catch (err) {
      setError(err.response?.data?.message || 'Failed to create payment session. Please try again.');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md">
      <h2 className="text-2xl font-bold mb-6 text-center">Payment Form</h2>
      {error && <p className="text-red-500 mb-4">{error}</p>}
      <form onSubmit={handleSubmit}>
        <div className="mb-4">
          <label className="block text-gray-700">Payxit API Key (pk_live_ or pk_sandbox_)</label>
          <input
            type="text"
            value={apiKey}
            onChange={handleApiKeyChange}
            required
            placeholder="Enter your Payxit public key"
            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700">Name</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700">Email</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700">Phone (e.g., +2348012345678)</label>
          <input
            type="tel"
            name="phone"
            value={formData.phone}
            onChange={handleChange}
            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700">Amount</label>
          <input
            type="number"
            name="amount"
            value={formData.amount}
            onChange={handleChange}
            required
            min="0"
            step="0.01"
            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>
        <div className="mb-4">
          <label className="block text-gray-700">Currency</label>
          <select
            name="currency"
            value={formData.currency}
            onChange={handleChange}
            className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          >
            <option value="NGN">NGN</option>
            <option value="USD">USD</option>
            <option value="EUR">EUR</option>
            <option value="GBP">GBP</option>
          </select>
        </div>
        <button
          type="submit"
          disabled={loading}
          className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 disabled:opacity-50"
        >
          {loading ? 'Processing...' : 'Submit Payment'}
        </button>
      </form>
    </div>
  );
};

export default Payment;

9) Vanilla JS Checkout (HTML + JS)

If you are not using React, use this HTML form with a script that calls the Payxit public API and redirects to the checkout URL.

<form id="payxit-form">
  <label>Payxit API Key (pk_live_ or pk_sandbox_)</label>
  <input type="text" id="apiKey" required />

  <label>Name</label>
  <input type="text" id="name" required />

  <label>Email</label>
  <input type="email" id="email" required />

  <label>Phone (e.g., +2348012345678)</label>
  <input type="tel" id="phone" />

  <label>Amount</label>
  <input type="number" id="amount" min="0" step="0.01" required />

  <label>Currency</label>
  <select id="currency">
    <option value="NGN">NGN</option>
    <option value="USD">USD</option>
    <option value="EUR">EUR</option>
    <option value="GBP">GBP</option>
  </select>

  <button type="submit">Submit Payment</button>
</form>

<script>
  const form = document.getElementById('payxit-form');

  form.addEventListener('submit', async (event) => {
    event.preventDefault();

    const apiKey = document.getElementById('apiKey').value.trim();
    if (!apiKey) {
      alert('Please enter your Payxit API key.');
      return;
    }

    const payload = {
      name: document.getElementById('name').value.trim(),
      email: document.getElementById('email').value.trim(),
      phone: document.getElementById('phone').value.trim(),
      amount: Number(document.getElementById('amount').value),
      currency: document.getElementById('currency').value
    };

    try {
      const response = await fetch('/v1/payxit/public/payments', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-payxit-key': apiKey
        },
        body: JSON.stringify(payload)
      });

      if (!response.ok) {
        const errorBody = await response.json();
        throw new Error(errorBody.message || 'Failed to create payment session.');
      }

      const data = await response.json();
      window.location.href = data.redirectUrl;
    } catch (error) {
      alert(error.message || 'Failed to create payment session.');
    }
  });
</script>