react-native-nuvei

Installation

With yarn:

yarn add react-native-nuvei

With npm:

npm install react-native-nuvei

For iOS you need to install pods:

cd ios && pod install

Dependencies

Native modules need to be installed so they can link to the SDK.

With yarn:

yarn add react-native-device-info react-native-webview @react-native-async-storage/async-storage @react-native-community/checkbox

With npm:

npm install react-native-device-info react-native-webview @react-native-async-storage/async-storage @react-native-community/checkbox

For iOS you need to install pods:

cd ios && pod install

Setup

Import the provider and wrap your application with it. The SDK relies on this context, so it must be accessible throughout your app.

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

export default function App() {
  return (
    <NuveiProvider>
      <YourApp />
    </NuveiProvider>
  );
}

Open Order

Before initiating a payment, you need to fetch the order details using Nuvei's openOrder API.

API Reference:
https://docs.nuvei.com/api/main/indexMain_v1_0.html?json#openOrder

The response from this request of type OrderResponse will be passed to the payment component of your choice and will be referred to as the order throughout the documentation.

Make sure the response includes:

• status = "SUCCESS"
• sessionToken

Without these values, the payment flow will not proceed.

Nuvei Fields

Description

Nuvei fields is a component for paying with card. It includes the following fields: cardholder name, card number, expiry date, cvv and button, that triggers the payment.

Integration

Import the component:

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

The component expects the following props:

type Props = {
  paymentSettings: {  
    googlePayGateway: string;
    googlePayGatewayMerchantId: string;
    googlePayMerchantId: string;
    googlePayMerchantName: string;
  };
  order: OrderResponse;
  uiSettings:  type UiSettings = {
  customFonts: boolean;

  backgroundColor: ColorType;
  borderColor: ColorType;
  borderWidth: number;
  cornerRadius: number;
  labelFontSize: number;
  labelFontColor: ColorType;
  fieldFontSize: number;
  fieldFontColor: ColorType;
  fieldBackgroundColor: ColorType;
  fieldBorderColor: ColorType;
  fieldBorderWidth: number;
  fieldCornerRadius: number;
  errorFontSize: number;
  errorFontColor: ColorType;

  i18NTextManagement: boolean;
  i18NLabels: {
    cardHolderNameTitle: string
    cardHolderNamePlaceholder: string
    cardNumberTitle: string
    cardNumberPlaceholder: string
    expirationDateTitle: string
    expirationDatePlaceholder: string
    cvvTitle: string
    cvvPlaceholder: string

    numberEmpty: string
    creditCardInvalid: string
    expiryEmpty: string
    expiryInvalid: string
    cvvEmpty: string
    cvvInvalid: string
    holderNameEmpty: string
    holderNameInvalid: string
  }
};
;
  onSuccess: (response: any) => void;
  onFail: (response: any) => void;
  navigateToWebView: (webViewParams: any) => void;
  forceWebChallengeChecked: boolean;
  onInputValidated?: onInputValidatedType;
  onCardDetailsUpdated?: onCardDetailsUpdatedType;
};

type onInputValidatedType = (errors: string[]) => void;

type onCardDetailsUpdatedType = (
  output: any,
  error: {
    result: string;
    errorCode: number;
    errorDescription: string;
    rawResult: {};
  } | null
) => void;

type ColorType = 'black' | 'green' | 'yellow' | 'blue' | 'red' | 'transparent'

onInputValidatedType – a callback function invoked whenever input validation occurs.
It receives one parameter: an array of strings containing the validation errors.

onCardDetailsUpdated – a callback function invoked when a credit card number is validated.
It receives two parameters: output and error.

• output contains the response from getCardDetails.do when the lookup succeeds.
• error contains an error object if the lookup fails, in which case output will be null.

ColorType also accepts any valid hex color value (e.g. #FFFFFF, #000000).

i18NLabels object customizes the labels, placeholders and error messages of the fields.

Simply Connect

Simply Connect is a full-screen component that displays multiple payment methods such as Google Pay, Apple Pay, credit/debit cards, bank transfers, PayPal, and more.
It also allows users to save their payment methods for faster checkout in the future. Saved payment methods are shown on the same screen.

Because this component is intended to take over the full screen, the SDK does not handle navigation.
You need to import the component and register it in your own navigation flow. The example below uses @react-navigation/stack:

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

<Stack.Screen
    name="SimplyConnectScreen"
    component={SimplyConnectScreen}
    options={{ title: 'Simply Connect' }}
/>

Import useCheckout hook. IT accepts the following parameters:

• order: OpenOrder;
• settings
• navigate - function that navigates to the Simply connect screen
• onSuccess - callback for success
• onFail - callback for error
• checkoutI18NFields - optional customization of the labels, placeholders and the error messages

The hook returns a function that needs to be called when the user wants to proceed to checkout.

const useCheckout = (
  settings: {
  forceWebChallenge: boolean;
  enableInstallments: boolean;
  requirePersonalId: boolean;
},
  navigate: () => void,
  onSuccess: () => void,
  onFail: (error: { errorCode?: number; reason: string }) => void,
  checkoutI18NFields?: i18NFieldsType
)

type i18NFieldsType = {
  cardHolderNameTitle: string;
  cardHolderNamePlaceholder: string;
  cardNumberTitle: string;
  cardNumberPlaceholder: string;
  expirationDateTitle: string;
  expirationDatePlaceholder: string;
  cvvTitle: string;
  cvvPlaceholder: string;
  cvvPlaceholderAmex: string;
  installmentsProgramTitle: string;
  singlePaymentText: string;
  deferredWithInterestText: string;
  deferredWithoutInterestText: string;
  deferredWithoutInterestAndGraceText: string;
  numberOfInstallmentsTitle: string;
  personalIdTitle: string;
  personalIdPlaceholder: string;
  saveDetailsText: string;
  payButtonTitle: string;
  numberEmpty: string;
  creditCardInvalid: string;
  expiryEmpty: string;
  expiryInvalid: string;
  cvvEmpty: string;
  cvvInvalid: string;
  holderNameEmpty: string;
  holderNameInvalid: string;
  nationalityIdEmpty: string;
  nationalityIdInvalid: string;
};

The function accepts the order as a parameter.

const checkout = useCheckout(
    settings,
    navigate,
    onSuccess,
    onFail,
    checkoutI18NFields
)

checkout(  order: OrderResponse )`

Simple example using again @react-navigation/stack:

import { useNavigation } from '@react-navigation/native';

const navigation = useNavigation();

const checkout = useCheckout(
    {
      forceWebChallenge: false,
      enableInstallments: false,
      requirePersonalId: false,
    },
    () => navigation.navigate('SimplyConnectScreen'),
    () => {console.log('Successful payment!')},
    (error) => {console.log('Error while paying', error)},
    i18nFields, //your settings here
);

<Button onPress={() => checkout(order)}>Checkout</Button>

Alternatively you can use the SimplyConnectScreen component in a Modal.

import { SimplyConnectScreen } from 'react-native-nuvei';
const [visible, setVisible] = useState(false);

<Modal visible={visible}>
    <SimplyConnectScreen />
</Modal>

const checkout = useCheckout(
    ...,
    () => setVisible(true),
    ...
);

<Button onPress={checkout}>Checkout</Button>  

Google pay

To add google pay you need to import the component. It is a button that on click it triggers tyh payment.

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

<GooglePayButton
    order={order}
    onSuccess={() => console.log('Successful payment!')}
    onError={(error) =>{console.log('Error while paying.', error)}}
/>

It accepts the following props:

• order: OpenOrder
• onSuccess: function that triggers when the payment is successful
• onError: function that triggers when there is an error

Apple pay

To add google pay you need to import the component. It is a button that on click it triggers tyh payment.

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

<ApplePayButton
    order={order}
    onSuccess={onSuccess}
    onError={onError}
    applePayMerchantId={applePayMerchantId}
/>

It accepts the following props:

• order: OpenOrder
• onSuccess: function that triggers when the payment is successful
• onError: function that triggers when there is an error
• applePayMerchantId

License

MIT

Made with create-react-native-library