npm包 react-native-cybersource-sdk 使用教程

前言

随着移动支付时代的到来，越来越多的商家开始使用移动支付，而移动支付唯一和传统支付方式不同的是密码输入界面，因此支付安全问题越来越受到大家的关注。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：

--- ------- ---------------------------- ------

集成

Android 集成

1. 配置 SDK

在设置 Android 环境之后，打开将要使用的 Android 项目，添加 react-native-cybersource-sdk 包到您的项目中。

2. 配置应用

在 app 的build.gradle文件下的android > defaultConfig标签下添加以下代码：

--------------- ----

3. 配置 javaScript

在以后的代码中，可以使用以下代码导入SDK：

------ ------------------ ---- -------------------------------

iOS 集成

1. 配置 SDK

在设置 Xcode 环境之后，打开将要使用的 iOS 项目，添加 react-native-cybersource-sdk 包到您的项目中。

2. 点击你的 'target -> General', 选择在 'Embedded Binaries' 区域添加一个库. 命名 'VisaCybersourceSDK.framework’

3. 添加必要权限

添加以下权限到 info.plist 文件：

-----------------------------------
------------- ----------- -- ------ ---------------
---------------------------------------
------------- ----------- -- ------ -------------------
-------------------------------------
------------- ----------- -- ------ -----------------

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 文件中添加以下代码：

------- ---------------------------

在 didFinishLaunchingWithOptions 中添加：

----- ----------------

-------------- - ---------------------- --------------- --------------------------------- ----------------------

------------------- -------

--------- ------- - ----------- ------ --------------------------------
                                            ------------------
                                             -------------------

----------- --------- - ------------- ------ ---------------------
                                                 ------------------------
                                          -----------------------

---------------------- --------------- ------------------- ------- -----------------------------

------------------------ - --------- ------ ---------------- ---------- --------- ---------

----------- - ---------- ------ ----------------------- --------------------
---------------- ------------------- - ----------------- -----
----------------------- - ---------
------------------------------ - -------------------
------------ -------------------

支付流程

react-native-cybersource-sdk 的支付流程如下：

初始化 VisaCybersourceSDK

在支付之前，需要初始化 VisaCybersourceSDK ，然后使用以下方法对其进行初始化。

----- ------------------------ - -- -- -
  ----------------------------------------------
-

配置 VisaCybersourceSDK

使用以下方法配置 VisaCybersourceSDK：

----- ------------ - -- -- -
  ----- -------------- - -
      ----------- -----------------
      ------ ------------
      ---------- ---------------
      ----------- -----------------
      ------------------ -----------------
      --------------- -------------
  --

  ------------------------------------------------
-

其中，merchantId，keyId，keyValue，requestUrl，paymentSuccessUrl和paymentFailUrl值需要替换为您的自有信息。

configuration 是 VisaCybersourceSDK 初始化的关键信息。确保在使用此库之前，您需要知道这些信息。

打开支付界面

使用以下方法创建支付视图并显示它：

----- ---------------------- - -- -- -
  -------------------------------------------------------------
-

其中 getOrderDetails()是你要支付的订单信息。

示例代码

获取订单信息的代码示例：

----- --------------- - -- -- -
  ------ -
      ------------------------ --------
      --------- -------
      ------------ ----------
      ----------- --------
      --------- ----- ---- -----
      ------- ---- ------
      -------- -----
      ---------- ------
      ------ --------
      ------------- ----------------
  -
-

完整的示例代码如下：

------ ------ ----------- ---- --------
------ ------ ----- ----------------- ---- ---------------
------ ------------------ ---- -------------------------------

----- ------------------ ------- --------- -

  ----- --------------- - -- -- -
    ------ -
        ------------------------ --------
        --------- -------
        ------------ ----------
        ----------- --------
        --------- ----- ---- -----
        ------- ---- ------
        -------- -----
        ---------- ------
        ------ --------
        ------------- ----------------
    -
  -

  ----- ------------------------ - -- -- -
    ----------------------------------------------
  -

  ----- ------------ - -- -- -
    ----- -------------- - -
        ----------- -----------------
        ------ ------------
        ---------- ---------------
        ----------- -----------------
        ------------------ -----------------
        --------------- -------------
    --

    ------------------------------------------------
  -

  ----- ---------------------- - -- -- -
    -------------------------------------------------------------
  -

  -------- -
    ------ -
      ------
        ----------------- ----------- -- ----------------------------
          --------------------------
        -------------------
        ----------------- ----------- -- ----------------
          -------------------------
        -------------------
        ----------------- ----------- -- --------------------------
          ----------------
        -------------------
      -------
    --
  -
-

------ ------- -------------------

结论

在本文中，我们介绍了使用 npm 包 react-native-cybersource-sdk 的基本流程，包括安装、配置、支付流程和示例代码。使用 react-native-cybersource-sdk 有助于 React Native 应用开发者更加方便地集成 Cybersource 支付功能，从而更加安全和便捷地实现移动支付。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671a130d0927023822360

阅读全文

猜你喜欢

  • npm 包 react-dotmailer 使用教程

    简介 react-dotmailer 是一个 npm 包，可用于在 React 应用程序中集成 Dotmailer 的电子邮件营销和自动化工具。Dotmailer 是一个强大的电子邮件营销和自动化平台...

    4 年前
  • npm 包 eslint-config-picnic 使用教程

    eslint-config-picnic 是一个非常有用的包，用于配置 ESLint，该库提供了 Picnic CSS 样式指南的规则，可以很方便地使用，并将你的代码规范化。

    4 年前
  • npm 包 documentation42 使用教程

    前言 在前端开发中，有许多优秀的 npm 包可以帮助我们快速地构建应用程序。其中一个非常好用的 npm 包就是 documentation42。本文将详细介绍 documentation42 的使用方...

    4 年前
  • npm 包 eslint-config-o2team-wx 使用教程

    在前端开发中，代码质量的检查和保证非常重要。而 eslint 是一个 JavaScript 代码规范和语法检查工具，能够帮助开发者团队遵守一致的代码规范，并在写代码的时候即时发现潜在问题。

    4 年前
  • npm 包 @shortcm/checkbox 使用教程

    在前端开发中，复选框是常见的 UI 控件之一，而 @shortcm/checkbox 可以帮助我们快速实现复选框的功能。本文将介绍 @shortcm/checkbox 的基本用法，并提供示例代码供参考...

    4 年前
  • npm 包 kh-popover 使用教程

    在前端开发过程中，弹出层是很常用的一个功能。而 kh-popover 是一个基于 jQuery 的弹出层插件，它支持多种触发方式和位置展示，非常方便实用。本文将详细介绍 kh-popover 的使用教...

    4 年前
  • npm 包 node-mongo-seeds-atlas 使用教程

    介绍 node-mongo-seeds-atlas 是一个方便快捷的 Node.js 包，它的作用是简化数据的种子数据处理，尤其是在 MongoDB 中的种子数据。

    4 年前
  • npm包@devsnicket/plugin-discovery-commonjs-babel-plugin使用教程

    简介 在前端开发中，使用JavaScript等语言编写的模块需要导入和使用。当项目中的模块越来越多，手动管理它们的依赖关系和引用关系会变得非常困难。因此，开发者们开始使用npm包管理工具来管理依赖。

    4 年前
  • npm 包 Good-DOM 的使用教程

    在前端开发中，DOM 操作是一个常见的任务。Good-DOM 是一个可以方便地进行 DOM 操作的 npm 包，本文将介绍 Good-DOM 的基本用法和一些高级使用技巧，希望能够帮助大家更好地掌握 ...

    4 年前
  • npm 包 kiokiru 使用教程

    简介 kiokiru 是一款基于 TypeScript 的前端开发工具，它提供了丰富的工具函数和类型定义，方便开发者快速开发高质量的前端应用程序。 安装 使用 npm 安装 kiokiru： --- ...

    4 年前
  • npm 包 amazo 使用教程

    什么是 amazo amazo 是一个基于 React 开发的图像拖拽工具，它支持拖拽图像并在画布上进行布局，同时还提供了多种常用的布局方式，例如栅格、自由排列、表格等等。

    4 年前
  • npm 包 pace-progress-loading-bar 使用教程

    在前端开发中，进度条和 loading 动画是常见的效果。我们经常会需要在页面加载过程中给用户一个提示，告诉他们页面正在加载中或正在做某些操作。 在这种情况下，有一个非常好用的 npm 包：pace-...

    4 年前
  • npm 包 @shortcm/elevation 使用教程

    @shortcm/elevation 是一个基于 Material Design 风格设计的前端 UI 组件库，其中包含了一个用于实现阴影效果的 npm 包 @shortcm/elevation。

    4 年前
  • npm 包 @shortcm/fab 使用教程

    随着前端开发的日益发展，前端开发者们的工具箱也越来越丰富。其中，npm 是最为常用的包管理工具之一。 本篇文章将对 npm 包 @shortcm/fab 进行详细介绍和使用教程，以及该工具对于前端开发...

    4 年前
  • npm 包 @shortcm/feature-targeting 使用教程

    前言 现今互联网行业日新月异，前端领域更是变化快速，功能逐渐复杂。为了更好的解决这些问题，前端工程师们开发出了许多工具和框架，npm 是其中非常重要的一部分。 在使用 npm 包时，我们可以快速地引入...

    4 年前
  • npm 包 hyper-orama 使用教程

    本文将介绍如何使用 npm 包 hyper-orama，以及如何在前端开发中应用它。 什么是 hyper-orama? hyper-orama 是一个基于 three.js 的 WebVR 库。

    4 年前
  • npm 包 @shortcm/button 使用教程

    简介 @shortcm/button 是一个用于创建按钮的轻量级 npm 包，可以被集成到任何 Web 项目中。 安装与引入 在命令行中使用以下命令安装该 npm 包： --- - ---------...

    4 年前
  • npm 包 github-jira-pr 使用教程

    在前端开发中，常常需要与 GitHub 和 JIRA 打交道。而当你在处理一个 Pull Request 时，会经常需要在 JIRA 上与相关人员沟通。这时，我们一个一个复制粘贴 URL 到 JIRA...

    4 年前
  • npm 包 @shortcm/drawer 使用教程

    前端开发中经常使用到的一个功能就是抽屉式导航菜单。而 @shortcm/drawer 是一个非常方便实用的 npm 包，能帮助我们快速实现这一功能。 什么是 @shortcm/drawer @shor...

    4 年前
  • npm 包 dprops-ui 使用教程

    前言 在前端开发过程中，我们经常会使用到许多第三方库和工具，它们可以帮助我们更高效地完成工作。在这些工具中，npm 是一个非常重要的工具，它能够让我们方便地管理我们的项目依赖。

    4 年前

相关推荐

    暂无文章