React Native SDK

The Duplo Checkout SDK adds Atlas payments to your React Native app through a useDuploCheckout hook. Instead of building your own payment form and wiring up the Atlas API by hand, you call startPayment from any screen, and the SDK presents the checkout flow and returns the result through callbacks.

This guide walks you through installing the SDK, calling the hook, and handling the outcome of a payment.

Prerequisites

Before you begin, make sure you have:

• A React Native project targeting Android or iOS.
• Your Atlas API key. You can find it on your developer dashboard.

Installation

Add the dp-checkout-react-native-sdk package to your project:

npm install dp-checkout-react-native-sdk

Launching Checkout

Call the useDuploCheckout hook to get startPayment and, optionally, isLoading. Call startPayment to open the checkout screen, passing your API key, the payment details, and the callbacks below. The required payment details include:

• apiKey: Your Atlas API key.
• amount: The amount to charge, in the major currency unit. For example, 1550 charges ₦1,550.
• currency: Your account's onboarding country's currency. For your region, the only valid value is NGN.
• email: Your customer's email.
• firstName: Your customer's first name.
• lastName: Your customer's last name.
• sourceReference: A unique string you supply to identify and reconcile the transaction on your side.

For example:

import { Button } from 'react-native';
import { useDuploCheckout } from 'dp-checkout-react-native-sdk';
import { type DuploCheckoutPayload } from 'dp-checkout-react-native-sdk';

export default function CheckoutScreen() {
  const { startPayment, isLoading } = useDuploCheckout();

  const launchCheckout = async () => {
    await startPayment({
      apiKey: 'pk_test_xxxxxxxxxxxxxxxxxxxx',
      amount: 1550,
      currency: 'NGN',
      email: 'customer@example.com',
      firstName: 'John',
      lastName: 'Doe',
      sourceReference: 'your-source-reference',
      onSuccess: (payload?: DuploCheckoutPayload) => {
        // handle a successful payment
      },
      onError: (payload?: DuploCheckoutPayload) => {
        // handle a failed payment
      },
      onCancelled: () => {
        // handle the customer cancelling checkout
      },
      onClosed: () => {
        // handle the checkout screen closing
      },
    });
  };

  return (
    <Button title="Pay With Duplo" onPress={launchCheckout} disabled={isLoading} />
  );
}

Callbacks

The SDK reports the outcome of the payment through the callbacks below. Each one is optional, but you should at least handle onSuccess and onError.

You pass these callbacks to startPayment alongside the payment details shown above. The examples below show how you might handle each one.

onSuccess: (payload) => {
  // Payment completed. Confirm the status on your server before fulfilling the order.
  console.log('Payment successful:', payload);
  navigation.navigate('PaymentSuccess', { payload });
},

Related guides

• Authentication on Atlas
• Handling Atlas Errors
• Configure and Verify Webhooks