Nuvei Simply Connect React Native SDK

Getting started

Install the library using either yarn:

yarn add nuvei-simply-connect

or npm:

npm install --save nuvei-simply-connect

iOS Cocoapods

The SDK needs use_frameworks! to be enabled for your app target. This also means that Flipper has to be disabled. In addition, every dependecy thats 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

Testing Configuration

It is possible to set a different environment when using the SDK. To use Intergration, you can

import { NuveiSimplyConnect } from 'nuvei-simply-connect’

then perform the following before creating the UI component

await NuveiSimplyConnect.setup({ “environment”: “Int” })

Usage

NuveiCreditCardField component

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

Add the NuveiCreditCardField to your component, use the ref to later perform actions:

<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"}`)
        }
    } />

Props:

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

Called each time one of the TextInput fields change value. When hasFocus=true it means the value changed after the user typed it into the field. It allows to perform only partial validation or to clear the current error.

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

Called after validate was performed on the input insdie the card fields. All the detected errors will be part of the errors array. Possible values:

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

Methods:

tokenize(openOrder: any)

Perform tokenization on the current credit card input. openOrder object should contain everything in the response of the openOrder.do api request, and with any related transaction parameters.

this is an expected openOrder object:

    {
        sessionToken: string
        merchantId: string
        merchantSiteId: string
        currency: string
        amount: string
        userTokenId?: string
        clientUniqueId?: string
        clientRequestId?: string
        customData?: string
        billingAddress?: {
            firstName?: string
            lastName?: string
            country?: string
            state?: string
            county?: string
            city?: String
            address?: string
            addressLine2?: string
            addressLine3?: string
            zip?: string
            addressMatchs: string
            email?: string
            phone?: string
            cell?: string
            homePhone?: string
            workPhone?: string
        },
        shippingAddress?: {
            firstName?: string
            lastName?: string
            country?: string
            state?: string
            county?: string
            city?: String
            address?: string
            addressLine2?: string
            addressLine3?: string
            zip?: string
            addressMatchs: string
            email?: string
            phone?: string
            cell?: string
            homePhone?: string
            workPhone?: string
        }
        userDetails?: {
            firstName?: string
            lastName?: string
            address?: string,
            zip?: string,
            state?: string,
            email?: string,
            phone?: string
            city?: String
            country?: string,
            county?: string
        }
    }

Returns a promise, on success resolves with the token When an input validation failure occurs the onInputValidated callback will be called with the errors. In case of an api error, the object will contain a message

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(callback: ((errors: NVInputError[]) => void))

Manually perform validation on the current input. All the detected errors will be part of the errors array. The onInputValidated callback will not be invoked in this case.