Access Worldpay
/
React Native SDK

Last Updated: 15 May 2024 | Change Log

React Native SDK

Create your own uniquely styled and branded checkout form by integrating our SDK into your native app.

Read more about the Checkout SDK and the supported payment journeys here.

Note

Make yourself familiar with our API Principles to ensure a resilient integration.

Important

Please ensure you integrate the SDK as advised in our documentation or you might be subject to additional PCI Compliance and won't meet the SAQ-A Compliance level.

How does it work?

We are securing your customer's payment details by creating a session. You can then either apply the session directly in the Payments API or create a token for use with our modular APIs.

What is a session?

A session is a unique identifier for your customer's payment details, generated by the SDK.

Prerequisites

The React Native SDK is compatible with the following:

  • react-native version >= 0.70.0
  • react version >= 18.1
  • For iOS dependencies, Cocoapods support only.

Get our SDK

  1. Run the following command to install our SDK.

npm

npm install @worldpay/access-worldpay-checkout-react-native-sdk

yarn

yarn add @worldpay/access-worldpay-checkout-react-native-sdk

  1. Add a dependency to the Android Bridge in the Android part of your application.

    1. Define in your android/build.gradle file a local maven Repo for the Android Bridge which is shipped with the SDK.

      gradle

         allprojects {
      repositories {
         ...
         maven { url "$rootDir/../node_modules/@worldpay/access-worldpay-checkout-react-native-sdk/android/" }
      }
   }

    2. Add the Android Bridge dependency in your gradle configuration.

      gradle

      dependencies { 
   ...
   implementation "com.worldpay.access:access-checkout-react-native-sdk-android-bridge:+"
   ...
}

    3. Add the AccessCheckoutReactPackage which contains the Android Bridge to the list of ReactPackage exposed by your ReactApplication.

      ...
import com.worldpay.access.checkout.reactnative.AccessCheckoutReactPackage;

public class MainActivity extends ReactActivity {
  ...

  public static class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
      @Override
      public boolean getUseDeveloperSupport() {
        ...
      }

      @Override
      protected List<ReactPackage> getPackages() {
        List<ReactPackage> packages = new PackageList(this).getPackages();
        ...
        packages.add(new AccessCheckoutReactPackage());

        return packages;
      }

      @Override
      protected String getJSMainModuleName() {
        ...
      }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
    }

    @Override
    public void onCreate() {
      ...
    }
  }
}

  2. Add a dependency to the iOS Bridge in the iOS part of your application.

    To add the iOS dependency into your application, define the dependencies in the Podfile.

    Cocoapods

    target 'my-app' do
  ...
  pod 'AccessCheckoutReactNativeSDKiOSBridge', :path => '../node_modules/@worldpay/access-worldpay-checkout-react-native-sdk/ios/'
end

What to do next

Create a session to pay with a card

  1. Submit card details to create a session
  2. Apply the session in the payment request

Create a session for CVC only and pay with a stored token

  1. Submit the CVC to create a session
  2. Apply the sessions.cvc and stored token in the payment request