Search Overlay
Searchbox clear search filters ESC
Filter PreferencesClear

No results found

React Native SDK Overview

The React Native monorepo provides seamless integration with the native Paysafe Android SDK, enabling a unified and customizable payment experience within your React Native app.

The monorepo wraps the native Paysafe Android SDK, which is designed to embed smoothly into your mobile app while maintaining strict data security and PCI compliance. Sensitive payment information—such as card number, CVV, and expiry date—is securely handled by the native SDK, ensuring your app stays compliant without directly processing or storing sensitive customer inputs.

  • Security & PCI compliance: All sensitive fields and customer data are managed securely by Paysafe’s native SDK, reducing your compliance scope.

  • Customizable customer experience: The SDK allows full customization of the payment UI, enabling you to tailor the design and flow to match your app’s branding and customer experience.

  • Modular & idiomatic: The native SDK is built with an idiomatic and modular approach, which this monorepo preserves to ensure easy integration and maintenance.

  • Unified React Native API: The monorepo exposes a consistent React Native API that bridges the native Android SDK, simplifying payment integration across platforms.

  • Native payment handling: Payments are processed via Paysafe’s Payments API, ensuring robust and reliable transaction handling.

The React Native monorepo empowers developers to integrate advanced payment capabilities effortlessly, combining the power and security of Paysafe’s native SDK with the flexibility of React Native.

Advantages

  • Improved PCI compliance scope: By securely collecting sensitive card data within the app through native SDK wrappers, the React Native integration helps reduce your PCI compliance scope.

  • Extensive customization: Fully customizable payment forms that seamlessly match your app’s design and branding. Supports multiple translations and localized versions for a global audience.

  • Seamless native embedding: The SDK integrates naturally and remains invisible within your React Native app, providing a smooth customer experience without disruptive UI elements.

  • 3D Secure support without redirection: Supports payments with 3D Secure-enabled cards without redirecting customers to external web pages, maintaining customer trust and improving conversion rates.

  • Multi-payment method support: Enables processing of cards and Venmo, plus Google Pay on Android, providing flexible payment options for your customers.

  • Unified cross-platform API: Provides a single, consistent React Native API that wraps the native Android SDK, simplifying development and maintenance across platforms.

Before you begin

Contact your business relationship manager or send an email to integrations@paysafe.com for your Business Portal credentials.

To obtain the Public API key from the Business Portal:

  1. Log in to the Business Portal.
  2. Go to Integrate > API Keys.
  3. For the Public Key, click the Copy icon to copy the API key.
  4. Your API key will have the following format:
    • Key Username – MerchantXYZ
    • Key Password – 
      B-tst1-0-51ed39e4-312d02345d3f123120881dff9bb4020a89e8ac44cdfdcecd702151182fdc952272661d290ab2e5849e31bb03deede7
  5. Use the same API key for all payment methods.
    • You must Base64 Encode your Public API key before using it in the SDK.
    • The API key is case-sensitive and sent using HTTP Basic Authentication.
    • To use HTTP Basic Authentication, you must send the API key credentials using the Authorization header with every request.
  6. You must construct the Authorization header as follows:
    • Combine the Key Username and Key Password into a string separated by a colon, e.g., “Key Username:Key Password”.
    • The resulting string literal is then encoded using Base64.
    • The authorization method and space (i.e., “Basic”) are then put before the encoded string.
    • For example, using the Key Username and Password examples above, the header is formed as follows:
       
      Authorization: Basic TWVyY2hhbnRYWVo6Qi10c3QxLTAtNTFlZDM5ZTQtMzEyZDAyMzQ1ZDNmMTIzMTIwODgxZGZmOWJiNDAyMGE4OWU4YWM0NGNkZmRjZWNkNzAyMTUxMTgyZmRjOTU yMjcyNjYxZDI5MGFiMmU1ODQ5ZTMxYmIwM2RlZWRlN2U=

For more information, see Authentication.

Packages - payment methods

The SDK comprises several dedicated packages that contain logic for the corresponding payment methods:

Integrating the React Native SDK

The Paysafe React Native SDK includes a demo for testing the various functionalities.

To integrate any package from the Paysafe Payments React Native SDK:

  • Install package:
    npm install @paysafe/package-name@current-version
  • Import and use functions:
    import * as PackageName from '@paysafe/package-name';

SDK requirements

Setup

NOTE: The setupPaysafeSdk method must be called before initializing the first module.
Each package provides its own setupPaysafeSdk method.
Once the SDK has been set up by any package, the other packages can then be initialized and used.

In the native part of the Android code:

/// In the native part of Android codeimport com.paysafevenmo.PaysafeVenmoModule



try {

  PaysafeVenmoModule.setupPaysafeSdk("<api-key>", "TEST")

} catch (e: SomeException) {

    // handler

}
                                

/// in typescript code

import React, { useEffect } from 'react';

import { View, Text, Alert } from 'react-native';

import * as Venmo from "paysafe-venmo"



export const App = () => {

  const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));

  const [isInitializedSdk, setIsInitializedSdk] = useState<boolean>(false);



  useEffect(() => {

    const initializeSDK = async () => {

      try {

		Venmo.setupPaysafeSdk('api-key', 'TEST')

        await delay(5000); 

	    if (Venmo.isPaysafeSdkInitialized()) {

          setIsInitializedSdk(true);

        } else {

          setIsInitializedSdk(false);

        }

      } catch {

        Alert.alert('Error', 'Something went wrong during SDK setup');

      }

    };



    initializeSDK();

  }, []);



  return (

    <View>

      <Text>SDK Initialized: {isInitializedSdk ? 'Yes' : 'No'}</Text>

    </View>

  );

};



export default App;

The setupPaysafeSdk function creates and initializes the Paysafe Android SDK. Pass the following parameters during its initialization from the application:

Parameter Required Type Description

apiKey

true

String

The Base64-encoded version of the single-use token API key is used to authenticate with the Paysafe Payments API/ Payment Hub REST API.

environment

true

String

Paysafe server environment.

Environment is a String class that can take the following values:

  • PROD
  • TEST

API key

The Base64-encoded version of the single-use token API key is used to authenticate with the Payments API. For information on how to obtain API keys, see Before you begin.

Note that this key can be used only to generate single-use tokens and has no other API access rights (such as for taking payments). Consequently, it can be exposed publicly in your customer's browser.

Environment

The environment string is used to select the environment for tokenization. The accepted environments are PROD (Paysafe Production environment) and TEST (Paysafe Merchant Test or Sandbox environment).

Do not use real card numbers or other payment instrument details in the Merchant Test environment. The Test/ Sandbox environment is not compliant with Payment Card Industry Data Security Standards (PCI-DSS) and does not protect cardholder/ payee information. Any upload of real cardholder data is strictly prohibited, as described in the Terms of Use.

Callback error object

The error object contains the following parameters:

Parameter Required Type Description

code

true

String

Error code.

displayMessage

true

String

Error message to display to customers.

detailedMessage

true

String

Detailed description of the error (this information should not be displayed to customers).

correlationId

true

String

Unique error ID to be provided to Paysafe Support during investigation.

Setup errors

Error code Display message Detailed message Comments

9167

There was an error (9167), please contact our support.

The API key should not be empty.

 

9013

There was an error (9013), please contact our support.

Invalid API key.

The decoded API key doesn’t conform to the format “username:password”.

Additional methods

The following two additional methods are available for all packages:

  • isPaysafeSdkInitialized
  • getMerchantReferenceNumber

isPaysafeSdkInitialized method signature

function isPaysafeSdkInitialized()

Checks whether the Paysafe SDK has been initialized.

Returns:

  • The isPaysafeSdkInitialized method resolves the promise with a boolean value if the SDK is initialized successfully.

    • If the SDK is initialized → the promise resolves with true.

    • If the SDK is not initialized → the promise resolves with false.

    • If there is any problem while checking the initialization state → the promise is rejected with an error.

Usage example:

import { isPaysafeSdkInitialized } from 'your-module';



isPaysafeSdkInitialized()

  .then((initialized) => {

    if (initialized) {

      console.log("SDK is initialized");

    } else {

      console.log("SDK is not initialized");

    }

  })

  .catch((error) => {

    console.error("Failed to check SDK initialization:", error);

  });

getMerchantReferenceNumber method signature

function getMerchantReferenceNumber(): string

Retrieves the merchant reference number currently set in the Paysafe SDK.

Returns:

  • string — The merchant reference number.

Usage example:

import { getMerchantReferenceNumber } from 'your-module';



const referenceNumber = getMerchantReferenceNumber();

console.log(referenceNumber); // e.g., "MERCHANT12345"

NOTE: the methods getMerchantReferenceNumber and isPaysafeSdkInitialized can be called from both native and TypeScript code.

On this Page