Overview

Nuvei’s React Native SDK, which has similar functionality as the Nuvei Fields Native SDK, provides a UI element for receiving credit card details from the user to perform an end-to-end payment using React Native.

Installation

Installation of the Nuvei SDK library is done using either yarn:

yarn add nuvei-simply-connect

or npm:

npm install --save nuvei-simply-connect

Android Gradle

Add this to your project build.gradle:

allprojects {
  repositories {
    google()
    maven {
      url 'https://raw.githubusercontent.com/Nuvei/nuvei-maven-android/master'
    }
  }
}

and add this to your settings.gradle:

allprojects {
  repositories {
    google()
    maven {
      url 'https://raw.githubusercontent.com/Nuvei/nuvei-maven-android/master'
    }
  }
}
dependencyResolutionManagement {
  repositories {
  google()
  mavenCentral()
  maven { url 'https://raw.githubusercontent.com/Nuvei/nuvei-maven-android/master'}
  }
}

iOS Cocoapods

Add the following to the top of the Podfile to include the Nuvei specs repo:

source 'https://github.com/CocoaPods/Specs.git'
source 'https://github.com/Nuvei/nuvei-mobile-pods.git'

The SDK needs use_frameworks! to be enabled for your app target. This also means that Flipper must be disabled.

In addition, every dependency that is used by the SDK needs to have:

config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'

For example, this Podfile was modified with the required changes:

target 'SimplyConnectTesterRN' do
  use_frameworks! # <--- this needs to be added
  
  config = use_native_modules!
   
  use_react_native!(
    :path => config[:reactNativePath],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    #    :flipper_configuration => flipper_config,     <--- Flipper was removed from the app
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false
    )

    # adding this cocoapods hook add the config for every dependency
    installer.pods_project.targets.each do |target|
      target.build_configurations.each do |config|
        config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
      end
    end
  end
end

Nuvei SDK UI Component: NuveiCreditCardField

Nuvei React Native SDK provides a UI component that directly collects the cardholder sensitive information fields: card number, expiration date and CVV.

The component can be embedded into your app, which can and should collect the remaining required fields (such as cardholder name).

You need to first import:

import { NVInputError, NuveiCreditCardField } from 'nuvei-simply-connect'

Then, add NuveiCreditCardField to your app. You will later use refto perform and call the SDK methods:

<NuveiCreditCardField
    ref={this.creditCardFieldRef}
    onInputUpdated={hasFocus => console.log("input updated")}
    onInputValidated={
        errors => {
            const hasError = errors && errors.length > 0
            console.log(`input validated with ${hasError ? "errors" : "success"}`)
        }
    } />

Properties

The NuveiCreditCardField component has the following properties, which enable you to receive event callbacks to your code. These events notify you of input being entered and of validation errors.

onInputUpdated

onInputUpdated: (hasFocus: boolean) => (void)

The SDK calls this function each time one of the component’s TextInput field values is changed. When hasFocus=true, it means the value changed after the user entered it into the field.

onInputValidated

onInputValidated: (errors: NVInputError[]) => (void)

The SDK calls this function following the validation of the card fields of the component UI. Detected errors appear in the errors array.

Possible values:

• numberEmpty
• creditCardInvalid
• expiryEmpty
• expiryInvalid
• cvvEmpty
• cvvInvalid
• holderNameEmpty
• holderNameInvalid

Methods

Tokenize

tokenize(openOrder: any)

This is a main component method. It performs temp tokenization of the input card, which provides a temporary token (ccTempToken) that can be used instead of card details on a sever-to-server API call (/payment method).

The input openOrder object should contain the complete JSON response as received from the /getSessionToken or /openOrder response you received on your server side.

For example, an expected openOrder object:

{
  sessionToken: string
  merchantId: string
  merchantSiteId: string
  currency: string
  amount: string
}

This method returns a promise. On success, it resolves and returns the token field. This is the ccTempToken you need to move to your sever-side and use it to perform the server-to-server payment, using the Nuvei API (for example, the using the /payment method).

When an input validation failure occurs, the onInputValidatedcallback is called with the errors.

try {
    const token = await this.creditCardFieldRef.current?.tokenize(props.route.params.openOrder)
    console.log("Success, the token is: " + token)
} catch (e: any) {
    var error = e as Error
    console.log("Failure, the error is: " +  error.message)
}

Validate

validate(callback: ((errors: NVInputError[]) => void))

This is a helper method; calling it runs a validation on the current input. Any detected error appears in the errors array. Note that the onInputValidated callback is not invoked in this case.