Skip to main content

Complete Payment Flow

This guide walks through implementing a complete payment flow with AccruPay.

Overview​

The payment flow consists of:

  1. Get Session Configuration - Obtain provider configuration
  2. Start Payment Session - Create a payment session
  3. Process Payment - Complete payment on frontend 4 user (Customer completes payment on frontend)
  4. Verify Payment - Verify completion on backend
  5. Handle Result - Process success or failure

Complete Example​

Backend (Node.js)​

import AccruPay, { TRANSACTION_PROVIDER, CURRENCY, COUNTRY_ISO_2 } from '@accrupay/node';

const sdk = new AccruPay({
  apiSecret: process.env.ACCRUPAY_API_SECRET,
  environment: 'production',
});

// Step 1: Get session configuration
export async function getPaymentConfig(providerId?: string) {
  const config = await sdk.transactions.clientSessions.getBaseConfig({
    transactionProvider: TRANSACTION_PROVIDER.NUVEI,
    merchantTransactionProviderId: providerId,
  });
  
  return config;
}

// Step 2: Start payment session
export async function startPaymentSession(data: {
  amount: number;
  currency: string;
  customerCode: string;
  transactionCode: string;
  billing: {
    firstName: string;
    lastName: string;
    email: string;
    country: string;
    address?: string;
    city?: string;
    state?: string;
    postalCode?: string;
  };
}) {
  const session = await sdk.transactions.clientSessions.payments.start({
    transactionProvider: TRANSACTION_PROVIDER.NUVEI,
    // merchantTransactionProviderId: 'provider-id', // optional
    data: {
      amount: BigInt(data.amount), // Convert to cents
      currency: data.currency as CURRENCY,
      merchantInternalCustomerCode: data.customerCode,
      merchantInternalTransactionCode: data.transactionCode,
      billing: {
        billingFirstName: data.billing.firstName,
        billingLastName: data.billing.lastName,
        billingEmail: data.billing.email,
        billingAddressCountry: data.billing.country as COUNTRY_ISO_2,
        ...(data.billing.address && { billingAddressLine1: data.billing.address }),
        ...(data.billing.city && { billingAddressCity: data.billing.city }),
        ...(data.billing.state && { billingAddressState: data.billing.state }),
        ...(data.billing.postalCode && { billingAddressPostalCode: data.billing.postalCode }),
      },
      storePaymentMethod: false,
    },
  });
  
  return session;
}

// Step 4: Verify payment
export async function verifyPayment(sessionId: string) {
  const transaction = await sdk.transactions.clientSessions.payments.verify({
    id: sessionId,
  });
  
  return transaction;
}

Frontend (React Example)​

import { useState } from 'react';

function PaymentForm() {
  const [loading, setLoading] = useState(false);
  const [session, setSession] = useState(null);

  const handlePayment = async () => {
    setLoading(true);
    
    try {
      // Step 1 & 2: Get config and start session
      const response = await fetch('/api/payments/start', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          amount: 10000, // $100.00 in cents
          currency: 'USD',
          customerCode: 'customer-123',
          transactionCode: `txn-${Date.now()}`,
          billing: {
            firstName: 'John',
            lastName: 'Doe',
            email: 'john@example.com',
            country: 'US',
            address: '123 Main St',
            city: 'New York',
            state: 'NY',
            postalCode: '10001',
          },
        }),
      });
      
      const sessionData = await response.json();
      setSession(sessionData);
      
      // Step 3: Process payment (using Nuvei SDK or iframe)
      // This depends on your payment provider integration
      
    } catch (error) {
      console.error('Payment failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <button onClick={handlePayment} disabled={loading}>
        {loading ? 'Processing...' : 'Pay $100.00'}
      </button>
      {session && <div>Session: {session.token}</div>}
    </div>
  );
}

Error Handling​

// Server error handler
export async function verifyPayment(sessionId: string) {
  try {
    const transaction = await sdk.transactions.clientSessions.payments.verify({
      id: sessionId,
    });
    
    if (transaction.status === 'SUCCESS') {
      return { success: true, transaction };
    } else {
      return { success: false, error: transaction.status };
    }
  } catch (error) {
    console.error('Verification failed:', error);
    throw new Error('Payment verification failed');
  }
}

Advanced: Stored Payment Methods​

To enable storing payment methods:

const session = await sdk.transactions.clientSessions.payments.start({
  transactionProvider: TRANSACTION_PROVIDER.NUVEI,
  data: {
    // ... other fields
    storePaymentMethod: true, // Enable storing payment method
  },
});

Next Steps​