Overview

Components emit events based on user interaction or validation. You can use these to implement callback functions, which allow you to inject your own business logic and user experience customisations into the payment flow at critical moments. They ensure that while the SDK handles the complex technical aspects of payment processing, you retain full control over the customer experience and can seamlessly integrate payments into your broader business workflows and systems.

Callbacks enable you to:

• Validate business rules before payments proceed.
• Display custom error, failure, or success messages.
• Tailor user interfaces to match your brand's look and feel.
• Integrate with your own systems for fraud detection or customer management.
• Control exactly how your customers experience both successful and failed transactions.

All events are optional and can be mixed and matched based on your business needs.

Supported events

onApprove

This callback is triggered when the buyer approves the payment.

onApprove: (data, actions) => {
  console.log('Payment approved:', data);
  // Handle successful payment
}

onCancel

This callback is triggered when the buyer cancels the payment.

onCancel: (data) => {
  console.log('Payment cancelled:', data);
  // Handle cancellation
}

onError

This callback is triggered when an error occurs during payment processing.

onError: (error) => {
  console.error('Payment error:', error);
  // Handle error
}

onOrderCreated

This callback is triggered when the order is successfully created.

onOrderCreated: (data) => {
  console.log('Order created:', data);
  // Handle order creation
}

onShippingAddressChange

This callback is triggered when the shipping address changes.

onShippingAddressChange: (data, actions) => {
  console.log('Shipping address changed:', data);
  // Validate and potentially reject
  if (invalidAddress) {
    return actions.reject();
  }
}

onShippingOptionsChange

This callback is triggered when a shipping option changes.

onShippingOptionsChange: (data, actions) => {
  console.log('Shipping option changed:', data);
  // Validate and potentially reject
  if (unavailableOption) {
    return actions.reject();
  }
}