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 initializes Google Pay, displays the native payment sheet, and handles the transaction result.
  • ApplePayButton – a component for iOS that manages the Apple Pay session, displays the payment sheet, and processes the transaction.

GooglePay​

Overview​

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

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

Behavior

  • Checks for Google Pay availability.
  • Initializes a Google Pay payment session.
  • Displays the native Google Pay payment sheet.
  • Collects the payment token and sends it to Nuvei for processing.
  • Handles success and error callbacks.

What the component does​

  1. Initialization

    • Accepts nvPaymentMerchantSettings and callback handlers (onSuccess, onError).
    • Retrieves the current simplyConnectI18NSettings for localized button text.

  2. Google Pay Flow

    • When the user taps the button:
      • Calls initGooglePay to prepare the environment.
      • Calls isGooglePaySupported to verify if Google Pay is available.
      • If supported, calls createGooglePayPayment to show the native payment sheet.
      • Receives a payment token from Google.

  3. Transaction Processing

    • Sends the Google Pay token and transaction details to Nuvei via doClientPayment.
    • On success -> onSuccess(response) is called.
    • On failure -> onError(error) is called.

Data structure​

Request​

initGooglePay parameters:

  • testEnv: Boolean indicating whether to use the test environment.
  • merchantName: Merchant's display name.
  • countryCode: Merchant's country code.

createGooglePayPayment parameters:

  • amount: Total amount.
  • currencyCode: Currency code.
  • googlePayGateway: Gateway name (e.g., 'nuvei').
  • googlePayGatewayMerchantId: Nuvei merchant site ID.

Integration​

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

<GooglePayBtn 
  nvPayment={nvPaymentMerchantSettings} 
  onSuccess={handleSuccess} 
  onError={handleError} 
/>

Error handling​

  • Logs errors if Google Pay is not supported on the device.
  • Handles user cancellation or payment failure in the native sheet.
  • Forwards Nuvei backend errors to the onError callback.

ApplePay​

Overview​

Purpose - ApplePayButton manages Apple Pay transactions on iOS devices. It handles session creation, the native payment sheet, and transaction verification.

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

Behavior

  • Verifies Apple Pay availability.
  • Creates an Apple Pay payment request.
  • Displays the native Apple Pay sheet.
  • Processes the payment token through Nuvei.
  • Handles success and error outcomes.

What the component does​

  1. Setup

    • Accepts nvPaymentMerchantSettings, applePayMerchantId, and callbacks.
    • Uses localized text for the button label.

  2. Apple Pay Flow

    • Tapping the button:
      • Verifies if Apple Pay can make payments.
      • Configures a PaymentRequest with amount, currency, and merchant ID.
      • Displays the Apple Pay sheet using showPaymentRequest.

  3. Transaction Verification

    • After user authorization, the payment token is sent to Nuvei via doClientPayment.
    • On successful backend response -> onSuccess is called, and the Apple Pay sheet is dismissed with a success status.
    • On failure -> onError is called, and the sheet is dismissed with a failure status.

Data structure​

Request​

PaymentRequest configuration:

  • merchantIdentifier: Your Apple Pay Merchant ID.
  • countryCode: Merchant's country code.
  • currencyCode: Transaction currency.
  • paymentSummaryItems: Array of items with label and amount.

Integration​

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

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

Error handling​

  • Catches errors during session initialization.
  • Handles cases where the user cancels the payment sheet.
  • Forwards Nuvei transaction errors to the onError callback.