React Native SDK

利用我们的 React Native SDK 接受支付，同时仍然符合作为最低 PCI 合规级别的 SAQ-A 的资质。

将我们的 SDK 集成到您的本地应用程序中，以此创建您自己独特的样式和品牌的结账表。

请在此处阅读有关 Checkout SDK 和支持的支付过程的更多详情。

它如何工作？

我们通过生成会话来保护您的客户支付详情。您然后可以利用银行卡资料来创建 Token，并且可以选择用 CVC 来接受支付。

什么是 session？

session 是由 SDK 生成的客户支付详情的独特识别码。

前提条件

React Native SDK 与以下版本兼容：

• react-native 版本 >= 0.61.5
• react 版本 >= 16.9.0
• 对于 iOS 依赖项，仅支持 Cocoapods。

获得我们的 SDK

1. 运行以下命令安装我们的 SDK。

   • npm
   • yarn

   Copy

   Copied!

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

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

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

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

2. 在应用程序的 Android 部分向 Android Bridge 添加依赖项。

   1. 在 android/build.gradle 文件中为 SDK 附带的 Android Bridge 定义本地专家 Repo。

      Copy

      Copied!

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

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

   2. 在 Gradle 配置中添加 Android Bridge 依赖项。

      Copy

      Copied!

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

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

   3. 将内含 Android Bridge 的 AccessCheckoutReactPackage 添加到您的 ReactApplication 披露的 ReactPackage 列表中。

      • Java
      • Kotlin

      Copy

      Copied!

      ...
      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() {
            ...
          }
        }
      }

      ... 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() { ... } } }

      ...
      import com.worldpay.access.checkout.reactnative.AccessCheckoutReactPackage
      
      class MainActivity : ReactActivity() {
        ...
      
        class MainApplication : Application(), ReactApplication {
      
          private val mReactNativeHost: ReactNativeHost = object : ReactNativeHost(this) {
            @get:Override
            val useDeveloperSupport: Boolean
              get() = ...
      
            @get:Override
            protected val packages: List<Any>
              protected get() {
                val packages: List<ReactPackage> = PackageList(this).getPackages()
                ...
                packages.add(AccessCheckoutReactPackage())
      
                return packages
              }
      
            @get:Override
            protected val jSMainModuleName: String
              protected get() = ...
          }
      
          @get:Override
          val reactNativeHost: ReactNativeHost
            get() = mReactNativeHost
      
          @Override
          fun onCreate() {
            super.onCreate()
            ...
          }
        }
      }

      ... import com.worldpay.access.checkout.reactnative.AccessCheckoutReactPackage class MainActivity : ReactActivity() { ... class MainApplication : Application(), ReactApplication { private val mReactNativeHost: ReactNativeHost = object : ReactNativeHost(this) { @get:Override val useDeveloperSupport: Boolean get() = ... @get:Override protected val packages: List<Any> protected get() { val packages: List<ReactPackage> = PackageList(this).getPackages() ... packages.add(AccessCheckoutReactPackage()) return packages } @get:Override protected val jSMainModuleName: String protected get() = ... } @get:Override val reactNativeHost: ReactNativeHost get() = mReactNativeHost @Override fun onCreate() { super.onCreate() ... } } }

3. 在应用程序的 iOS 部分向 iOS Bridge 添加依赖项。

   若要将 iOS 依赖项添加到应用程序中，请在 Podfile 中定义依赖项。

   Copy

   Copied!

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

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

后续步骤

查看我们有关如何创建您可以用来接受支付的会话的指南：

创建用卡支付的会话

1. 提交卡详情以创建会话
2. 创建已验证 Token
3. 利用该 Token接受支付

创建会话以便使用卡和 CVC 进行支付

1. 提交卡详情和 CVC 以创建两个单独的会话
2. 利用您的 CARD 创建一个已验证 Tokensession
3. 在我们的 card/checkout 支付工具中使用您的 CVC session 和已验证 Token，以便利用以下端点之一接受支付：
   • payments:cardonFileAuthorize
   • payments:migrateCardOnFileSale或
   • payments:migrateCardOnFileAuthorize

仅为 CVC 创建会话并用存储的 Token 进行支付

1. 提交 CVC 以创建会话
2. 在我们的 card/checkout 支付工具中使用您的 CVC session 和存储的已验证 Token，以便利用以下端点之一接受支付：
   • payments:cardonFileAuthorize
   • payments:migrateCardOnFileSale或
   • payments:migrateCardOnFileAuthorize