Skip to main content

ApplePay / GooglePay

Description​

This module handles digital wallet payments for both Android (Google Pay) and iOS (Apple Pay). It provides UI buttons that trigger the native wallet interface and process the payment securely through the Nuvei backend.

The module consists of two main parts:

  • GooglePayButton – a component for Android that uses PaymentRequest to check availability and display the Google Pay sheet, then processes the token via initPayment and clientPaymentAppleGooglePay.
  • ApplePayButton – a component for iOS that uses the useApplePay hook to open the Apple Pay sheet and processes the payment token via clientPaymentAppleGooglePay.

GooglePay​

Overview​

Purpose - GooglePayButton handles the initialization and execution of Google Pay payments on Android. It interacts with the PaymentRequest API from the Nuvei SDK and the Nuvei backend.

Where it is used - Used on checkout screens as a quick-pay option for Android users.

What the component does​

At a high level, this component checks Google Pay availability via paymentRequest.canMakePayment(), displays the native Google Pay sheet via paymentRequest.show(), collects the payment token and sends it to Nuvei for processing in two sequential backend calls (initPayment then clientPaymentAppleGooglePay), shows a ModalBackdrop while backend calls are in flight, and handles success and error callbacks.

  1. Initialization

    • Accepts nvPayment (NVPaymentGooglePay), onSuccess, onError, countryCode, and optional allowedPaymentMethods, theme, type, radius, style, sourceApplication.
    • Reads environment (staging/prod) from useNuveiContext().
    • Builds a PaymentRequest using googlePayRequestData (merchant info + country code) and paymentDetails (amount + currency).

  2. Google Pay Flow (onPress)

    • Validates required props with validateProps().
    • Calls paymentRequest.canMakePayment().
      • If false → calls onError({ reason: 'Google Pay unavailable' }).
      • If true → calls showPaymentForm().

  3. showPaymentForm()

    • Calls paymentRequest.show() to display the native Google Pay sheet.
    • Extracts paymentMethodData from the response as mobileToken.
    • Passes it to handleClientPayment(mobileToken).

  4. handleClientPayment(mobileToken)

    • Sets isLoading = true.
    • Calls initPayment(initPaymentBody) where initPaymentBody includes:
      • paymentOption.card.externalToken with externalTokenProvider: 'GooglePay' and the mobileToken.
      • paymentOption.useInitPayment: true.
    • If initPayment fails or returns DECLINED → calls onError and returns.
    • If initPayment succeeds → calls clientPaymentAppleGooglePay(body, sourceApplication).
    • If clientPaymentAppleGooglePay succeeds → calls onSuccess(response).
    • If it fails or returns DECLINED → calls onError(errorObj).
    • Resets isLoading = false in a finally block.

Data structure​

Props​

type GooglePayButtonProps = {
  nvPayment: NVPaymentGooglePay;       // Required — payment and merchant details
  onSuccess: (res: any) => void;       // Required
  onError: (error: any) => void;       // Required
  countryCode: string;                 // Required — merchant's country code
  allowedPaymentMethods?: any;         // Array of allowed payment methods
  theme?: 'LIGHT' | 'DARK' | any;
  type?: any;
  radius?: number;
  style?: any;
  sourceApplication?: SourceApplication; // Defaults to SourceApplication.GOOGLE_PAY
};

NVPaymentGooglePay requires: sessionToken, merchantId, merchantSiteId, amount, currency.

Internal request body for initPayment​

const initPaymentBody: NVPaymentBody = {
  currency: nvPayment.currency,
  merchantId: String(nvPayment.merchantId),
  merchantSiteId: nvPayment.merchantSiteId,
  paymentOption: {
    card: {
      externalToken: {
        externalTokenProvider: 'GooglePay',
        mobileToken: mobileToken,
      },
    },
    useInitPayment: true,
  },
  sessionToken: nvPayment.sessionToken,
  sourceApplication,
};

Integration​

import { GooglePayButton } from 'react-native-nuvei';

<GooglePayButton
  nvPayment={nvPaymentData}
  onSuccess={handleSuccess}
  onError={handleError}
  countryCode="US"
/>

Error handling​

  • canMakePayment() returns false → onError({ reason: 'Google Pay unavailable' }).
  • Any exception from canMakePayment() or show() → error forwarded to onError.
  • initPayment status not SUCCESS or transactionStatus === 'DECLINED' → onError with status: 'ERROR' or 'DECLINED'.
  • clientPaymentAppleGooglePay failure → onError with error details.

ApplePay​

Overview​

Purpose - ApplePayButton manages Apple Pay transactions on iOS devices. It uses the useApplePay hook to open the Apple Pay sheet and processes the payment token through clientPaymentAppleGooglePay.

Where it is used - Used on checkout screens as a quick-pay option for iOS users.

What the component does​

At a high level, this component renders a tappable Apple Pay image button. On press, it validates props and calls onApplePay() (from useApplePay) with payment values and merchant ID. The handlePayment callback in useApplePay receives the Apple Pay response, sends it to clientPaymentAppleGooglePay, and calls onSuccess or onError based on the backend response.

  1. Setup

    • Accepts nvPayment (NVPaymentApplePay | null), applePayMerchantId, onSuccess, onError, countryCode, and optional sourceApplication.
    • Initializes the useApplePay hook with a handlePayment callback and isCreateSub: false.

  2. handlePayment callback (called by useApplePay after user authorizes)

    • Builds the clientPaymentAppleGooglePay request body:
      • country: countryCode
      • platform: 'IOS'
      • mobileToken: JSON.stringify({ paymentData: paymentResponse })
      • merchant identifiers, session token, currency, billing/shipping addresses, user details
    • Calls clientPaymentAppleGooglePay(body, sourceApplication).
    • If response status is not SUCCESS or transactionStatus === 'DECLINED' → calls onError(errorObj).
    • On success → calls onSuccess(responseClientPayment).

  3. initiateApplePay() (onPress handler)

    • Validates required props with validateProps().
    • Calls onApplePay({ paymentValues, merchantId }) where:
      • paymentValues contains country, currency, amount, and label: 'Test Product'.
      • merchantId is applePayMerchantId.
    • Catches errors and calls onError with structured error objects.

Data structure​

Props​

type ApplePayButtonType = {
  nvPayment: NVPaymentApplePay | null;  // Required — payment and merchant details
  applePayMerchantId: string;           // Required — Apple Pay merchant identifier
  onSuccess: (res: any) => void;        // Required
  onError: (res: any) => void;          // Required
  countryCode: string;                  // Required — merchant's country code
  sourceApplication?: SourceApplication; // Defaults to SourceApplication.APPLE_PAY
};

NVPaymentApplePay requires: sessionToken, merchantId, merchantSiteId, amount, currency.

clientPaymentAppleGooglePay request body​

const body = {
  country: countryCode,
  platform: 'IOS',
  mobileToken: JSON.stringify({ paymentData: paymentResponse }),
  merchantId: nvPayment?.merchantId,
  sessionToken: nvPayment?.sessionToken,
  merchantSiteId: nvPayment?.merchantSiteId,
  email: nvPayment?.userTokenId,
  currencyCode: nvPayment?.currency,
  billingAddress: nvPayment?.billingAddress,
  shippingAddress: nvPayment?.shippingAddress,
  userDetails: nvPayment?.userDetails,
};

Integration​

import { ApplePayButton } from 'react-native-nuvei';

<ApplePayButton
  nvPayment={nvPaymentData}
  applePayMerchantId="merchant.com.example"
  onSuccess={handleSuccess}
  onError={handleError}
  countryCode="US"
/>

Error handling​

  • Any exception from onApplePay() is caught in initiateApplePay():
    • If error.code === 10010 → onError(error).
    • If error.message is present → onError({ errCode: error.message, result: 'ERROR', status: 'ERROR' }).
    • Otherwise → onError(error).
  • Backend response status !== SUCCESS → onError with status: 'ERROR'.
  • Backend transactionStatus === 'DECLINED' → onError with status: 'DECLINED'.