useAccruPay

useAccruPay() returns state and actions from the nearest <AccruPay> provider. Call it inside any component that is a descendant of <AccruPay>.

Return value

Field	Type	Description
isReady	boolean	true when all card fields are loaded and interactive.
isProcessing	boolean	true while submitPayment() is in progress.
error	string | null	Last error message from the provider, or null.
submitPayment	(params?: AccruPayTransactionSubmitParams) => Promise<any>	Trigger payment submission.
provider	TRANSACTION_PROVIDER | null	Detected provider for this session.
transactionSession	MerchantClientTransactionSession | null	Full session data once loaded.

isReady

isReady becomes true only when all three secure card fields (CardNumber, CardExpiry, CardCVC) have fired their ready events and the provider's JavaScript SDK is fully initialized. This process is provider-managed — timing depends on the external SDK loading from CDN.

Always gate form submission and the enabled state of your pay button on isReady:

const { isReady, isProcessing } = useAccruPay();

<button disabled={!isReady || isProcessing}>
  {isProcessing ? 'Processing...' : 'Pay now'}
</button>

Attempting submitPayment() before isReady is true will throw an error.

submitPayment()

Submits the payment using the values entered in the secure card fields. Returns a promise that resolves with the provider's result on success and throws on failure.

const { submitPayment } = useAccruPay();

async function handlePay() {
  try {
    const result = await submitPayment();
    // result contains the provider's success response
    router.push('/order/confirmed');
  } catch (err) {
    console.error('Payment failed:', err);
  }
}

Always wrap in try/catch. The promise throws for any failure: card declined, validation error, network timeout, expired session.

Billing data

submitPayment accepts an optional params object with a billing field. If omitted, the billing data from the session is used.

await submitPayment({
  billing: {
    firstName: 'Jane',
    lastName: 'Smith',
    address: '123 Main St',
    city: 'Austin',
    state: 'TX',
    zip: '78701',
    country: 'US',
    email: 'jane@example.com',
    phone: '+15125550100',
  },
});

billing is optional — only pass it if you need to override the billing data already on the session.

isProcessing

true between the moment submitPayment() is called and the moment it settles (resolves or throws). Use this to show a loading indicator and prevent duplicate submissions:

const { isReady, isProcessing, submitPayment } = useAccruPay();

<button
  disabled={!isReady || isProcessing}
  onClick={() => submitPayment().catch(() => {})}
>
  {isProcessing ? 'Processing...' : 'Pay now'}
</button>

error

A string from the provider describing the last failure, or null if there is no error. Updated after each failed submitPayment() call and after initialization failures (session not found, SDK load failure).

Show it directly — provider error messages are user-facing strings like "Invalid card number" or "Your card was declined".

const { error } = useAccruPay();

{error && <p className="payment-error">{error}</p>}

error is reset to null when submitPayment() is called again.

Complete example

import {
  AccruPay,
  CardholderName,
  CardNumber,
  CardExpiry,
  CardCVC,
  useAccruPay,
} from '@accrupay/react';

function PaymentForm({ onSuccess }: { onSuccess: () => void }) {
  const { isReady, isProcessing, error, submitPayment } = useAccruPay();

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    try {
      await submitPayment();
      onSuccess();
    } catch {
      // error state is updated automatically
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <CardholderName placeholder="Name on card" autoComplete="cc-name" />
      <CardNumber />
      <CardExpiry />
      <CardCVC />
      {error && <p className="error">{error}</p>}
      <button type="submit" disabled={!isReady || isProcessing}>
        {isProcessing ? 'Processing...' : 'Pay now'}
      </button>
    </form>
  );
}

export function Checkout({ sessionId }: { sessionId: string }) {
  return (
    <AccruPay
      merchantPublicId={process.env.NEXT_PUBLIC_ACCRUPAY_MERCHANT_ID!}
      transactionSessionId={sessionId}
    >
      <PaymentForm onSuccess={() => console.log('done')} />
    </AccruPay>
  );
}