前言
随着移动支付时代的到来，越来越多的商家开始使用移动支付，而移动支付唯一和传统支付方式不同的是密码输入界面，因此支付安全问题越来越受到大家的关注。Cybersource是Visa公司推出的一个全球化安全支付解决方案，它使用了多个安全策略，以确保移动商务环境下的支付安全性。
react-native-cybersource-sdk 是一个专门为 React Native 应用开发者提供的Cybersource支付集成SDK，能够帮助开发者在 React Native 应用中快速且安全地集成 Cybersource 支付功能。
本文将详细介绍 npm 包 react-native-cybersource-sdk的使用方法，包括安装配置，支付流程以及示例代码。
安装
安装 react-native-cybersource-sdk 的前提条件是在 React Native 应用上引入 VisaCybersourceSDK。
在引入 VisaCybersourceSDK 的前提下，运行以下命令安装 react-native-cybersource-sdk：
npm install react-native-cybersource-sdk --save
集成
Android 集成
1. 配置 SDK
在设置 Android 环境之后，打开将要使用的 Android 项目，添加 react-native-cybersource-sdk 包到您的项目中。
2. 配置应用
在 app 的build.gradle文件下的android > defaultConfig标签下添加以下代码：
multiDexEnabled true
3. 配置 javaScript
在以后的代码中，可以使用以下代码导入SDK：
import VisaCybersourceSDK from 'react-native-cybersource-sdk';
iOS 集成
1. 配置 SDK
在设置 Xcode 环境之后，打开将要使用的 iOS 项目，添加 react-native-cybersource-sdk 包到您的项目中。
2. 点击你的 'target -> General', 选择在 'Embedded Binaries' 区域添加一个库. 命名 'VisaCybersourceSDK.framework’
3. 添加必要权限
添加以下权限到 info.plist 文件：
<key>NSCameraUsageDescription</key> <string>Allow application to access camera</string> <key>NSMicrophoneUsageDescription</key> <string>Allow application to access microphone</string> <key>NSContactsUsageDescription</key> <string>Allow application to access contacts</string>
4. 添加 Framework
在 ”Build Phases“->”Link Binary With Libraries“ 添加以下框架：
- Accelerate.framework
- AVFoundation.framework
- SystemConfiguration.framework
- MobileCoreServices.framework
- CoreFoundation.framework
- CoreMedia.framework
- libc++.tbd
- libz.tbd
- libsqlite3.tbd
- Security.framework
5. 添加引用
在 AppDelegate.m 文件中添加以下代码：
#import <React/RCTLinkingManager.h>
在 didFinishLaunchingWithOptions 中添加：
-- -------------------- ---- -------
----- ----------------
-------------- - ---------------------- --------------- --------------------------------- ----------------------
------------------- -------
--------- ------- - ----------- ------ --------------------------------
------------------
-------------------
----------- --------- - ------------- ------ ---------------------
------------------------
-----------------------
---------------------- --------------- ------------------- ------- -----------------------------
------------------------ - --------- ------ ---------------- ---------- --------- ---------
----------- - ---------- ------ ----------------------- --------------------
---------------- ------------------- - ----------------- -----
----------------------- - ---------
------------------------------ - -------------------
------------ -------------------支付流程
react-native-cybersource-sdk 的支付流程如下：
初始化 VisaCybersourceSDK
在支付之前，需要初始化 VisaCybersourceSDK ，然后使用以下方法对其进行初始化。
const initializeCybersourceSDK = () => {
VisaCybersourceSDK.initializeCybersourceSDK();
}配置 VisaCybersourceSDK
使用以下方法配置 VisaCybersourceSDK：
-- -------------------- ---- -------
----- ------------ - -- -- -
----- -------------- - -
----------- -----------------
------ ------------
---------- ---------------
----------- -----------------
------------------ -----------------
--------------- -------------
--
------------------------------------------------
-其中，merchantId，keyId，keyValue，requestUrl，paymentSuccessUrl和paymentFailUrl值需要替换为您的自有信息。
configuration 是 VisaCybersourceSDK 初始化的关键信息。确保在使用此库之前，您需要知道这些信息。
打开支付界面
使用以下方法创建支付视图并显示它：
const onHandlePaymentRequest = () => {
VisaCybersourceSDK.onHandlePaymentRequest(getOrderDetails());
}其中 getOrderDetails()是你要支付的订单信息。
示例代码
获取订单信息的代码示例：
-- -------------------- ---- -------
----- --------------- - -- -- -
------ -
------------------------ --------
--------- -------
------------ ----------
----------- --------
--------- ----- ---- -----
------- ---- ------
-------- -----
---------- ------
------ --------
------------- ----------------
-
-完整的示例代码如下：
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ ------ ----- ----------------- ---- ---------------
------ ------------------ ---- -------------------------------
----- ------------------ ------- --------- -
----- --------------- - -- -- -
------ -
------------------------ --------
--------- -------
------------ ----------
----------- --------
--------- ----- ---- -----
------- ---- ------
-------- -----
---------- ------
------ --------
------------- ----------------
-
-
----- ------------------------ - -- -- -
----------------------------------------------
-
----- ------------ - -- -- -
----- -------------- - -
----------- -----------------
------ ------------
---------- ---------------
----------- -----------------
------------------ -----------------
--------------- -------------
--
------------------------------------------------
-
----- ---------------------- - -- -- -
-------------------------------------------------------------
-
-------- -
------ -
------
----------------- ----------- -- ----------------------------
--------------------------
-------------------
----------------- ----------- -- ----------------
-------------------------
-------------------
----------------- ----------- -- --------------------------
----------------
-------------------
-------
--
-
-
------ ------- -------------------结论
在本文中，我们介绍了使用 npm 包 react-native-cybersource-sdk 的基本流程，包括安装、配置、支付流程和示例代码。使用 react-native-cybersource-sdk 有助于 React Native 应用开发者更加方便地集成 Cybersource 支付功能，从而更加安全和便捷地实现移动支付。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a130d0927023822360