React Integration

React code must not call Merchant API secret-key endpoints directly. Use React only to launch or display checkout flows created by your backend.

Recommended Flow

1. React calls your backend with an internal order ID.
2. Your backend creates a Cashonrails checkout with POST /api/v1/transaction/initialize.
3. Your backend returns authorization_url, access_code, and your order reference to React.
4. React redirects to authorization_url or launches a checkout component with access_code.
5. Your backend verifies payment status and processes webhooks.

Redirect Example

import { useState } from 'react';
 
export function PayButton({ orderId }) {
  const [loading, setLoading] = useState(false);
 
  async function startCheckout() {
    setLoading(true);
 
    const response = await fetch('/api/payments/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ orderId })
    });
 
    const checkout = await response.json();
    window.location.href = checkout.authorization_url;
  }
 
  return (
    <button type="button" onClick={startCheckout} disabled={loading}>
      {loading ? 'Starting checkout...' : 'Pay now'}
    </button>
  );
}

Access Code Component Pattern

If you use a React checkout package, provide only the backend-generated access_code or public key values the package explicitly requires.

import { UseAccessCode } from 'cashonrails-react';
 
export function CheckoutModal({ accessCode }) {
  return (
    <UseAccessCode
      config={{
        access_code: accessCode,
        callback_url: 'https://merchant.example/payments/callback'
      }}
    />
  );
}

Do Not Put These in React

• Merchant secret key.
• Encryption key.
• Webhook key.
• RSA private key.
• Raw payout creation logic.

Callback Handling

The browser callback is a user-experience signal, not final proof of payment. After redirect, show a pending/success screen based on your backend state, then let your backend verify the transaction and consume the webhook.