Handling Callbacks

The onComplete Callback

The onComplete callback fires when the payment flow finishes — either successfully or with an error.

import { PaymentResultStatus } from '@inflow_pay/sdk';

onComplete: (result) => {
  switch (result.status) {
    case PaymentResultStatus.SUCCESS:
      console.log('Payment successful:', result.paymentId);
      // Redirect, show confirmation, etc.
      break;

    case PaymentResultStatus.FAILED:
      console.error('Payment failed:', result.error?.message);
      if (result.error?.retryable) {
        // Customer can try again
      }
      break;
  }
}

Payment Result Object

interface PaymentResult {
  status: 'SUCCESS' | 'FAILED';
  paymentId: string;
  error?: {
    code: string;       // e.g. 'THREE_DS_FAILED', 'PAYMENT_PROCESSING_ERROR'
    message: string;    // User-friendly message (safe to display)
    retryable: boolean; // Whether the customer can try again
  };
}

Error Codes

CodeDescriptionRetryable
THREE_DS_FAILED3DS authentication failedYes
PAYMENT_PROCESSING_ERRORGeneral processing errorYes

Error messages in result.error.message are user-friendly and safe to display directly to the customer.

Other Callbacks

CallbackWhen it fires
onReadyCard form is mounted and ready for input
onChange(state)Form validation state changes. state.complete is true when all fields are valid
onError(error)SDK-level error (network issues, initialization problems)

Best Practice: Verify Server-Side

Always verify the payment status on your server via the API or webhooks. Do not rely solely on the client-side callback — it can be spoofed.

onComplete: async (result) => {
  if (result.status === PaymentResultStatus.SUCCESS) {
    // Verify on your backend
    const response = await fetch(`/api/verify-payment/${result.paymentId}`);
    const { verified } = await response.json();
    if (verified) {
      window.location.href = '/confirmation';
    }
  }
}

The SDK API may evolve. Refer to the npm package for the latest callback types and error codes.