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
| Code | Description | Retryable |
|---|---|---|
THREE_DS_FAILED | 3DS authentication failed | Yes |
PAYMENT_PROCESSING_ERROR | General processing error | Yes |
Error messages in
result.error.messageare user-friendly and safe to display directly to the customer.
Other Callbacks
| Callback | When it fires |
|---|---|
onReady | Card 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.
Updated 1 day ago