[重要] 反应原生新架构支持

这个 新建筑 为 React Industrial 提供版本支持 0.76.0及以上(含)。 。 。 .

[重要]

Adyen Android SDK 5.2.2.0需要克特林 2.3 (2.20 on Expo SDK 54),Android API 36和Android Gradle插件 8.9.1. 它由React Independent 0.79和Expo SDK 54.支持.

见 兼容性 用于设定您的“ 反应原生” 或“ 博览会” 版本 。 同一文档为官方不支持的React Industrial版本保留了0.74以下的注释.

Adyen 反应原生

Adyen React Introduct为您提供构件,为您的购物者创造出票体验,允许他们使用自己选择的支付方法支付.

您可以通过两种方式与Adyen React Industrial融合:

• 下潜: React Industrial iOS和Android Adyen Drop-in - 一个全能的解决方案,是接受在你的 React Industrial app上付款的最快捷方式.
• 构成部分: 原生iOS和Android Adyen组件的回放原生包装器 - 每个支付方法一个组件,可以与你自己的支付流量结合.

目录

• 先决条件
• 安装
  • 博览
  • 手动整合
• 使用量
  • 配置
  • 流程
  • 高级流程
  • 处理动作
• 文档
• 捐款
• 支助
• 许可证

先决条件

• Adyen 测试账户
• API 密钥
• 客户端密钥

安装

添加 @adyen/react-native 切换到您的 React 原生项目 :

yarn add @adyen/react-native

博览会整合

[大

此库与 Expo Go 不符 。 专门设计用于: 连续的土著一代。 。 。 .

添加 @adyen/react-native 您的插件 app.json数字 :

{
  "expo": {
    "plugins": ["@adyen/react-native"]
  }
}

为Android安装 expo-build-properties 并设定您的 Expo SDK 的 Kotlin 和 Android API 值 兼容性。 。 。 .

{
  "expo": {
    "plugins": [
      [
        "@adyen/react-native",
        {
          "merchantIdentifier": "merchant.com.my-merchant-id",
          "useFrameworks": true
        }
      ]
    ]
  }
}

[TIP]

如果您正面临插件的问题, 请预先构建您的应用程序并调查生成的文件 :

npx expo prebuild --clean

手动整合

[注]

关于目标C和爪哇一体化,见 遗留文件。 。 。 .

import Adyen

// ...

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    return RedirectComponent.applicationDidOpen(from: url)
}

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    return RedirectComponent.applicationDidOpen(from: url) || RCTLinkingManager.application(app, open: url, options: options)
}

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
    if userActivity.activityType == NSUserActivityTypeBrowsingWeb,
       let url = userActivity.webpageURL,
       RedirectComponent.applicationDidOpen(from: url) {
        return true
    }
    return RCTLinkingManager.application(application, continue: userActivity, restorationHandler: restorationHandler)
}

import com.adyenreactnativesdk.AdyenCheckout
import android.os.Bundle

// ...

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
    AdyenCheckout.setLauncherActivity(this)
}

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="myapp" android:path="/payment" />
</intent-filter>

import android.content.Intent

// ...

override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    AdyenCheckout.handleIntent(intent)
}

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Your configuration here -->
</style>

使用量

为了解Adyen工程的预建UI组件,您可以遵循 我们的文件。 。 。 .

配置

欲进一步了解其他配置,请参见 完整列表。 。 。 . 所需配置实例:

import { Configuration } from '@adyen/react-native';

const configuration: Configuration = {
  environment: 'test', // When you're ready to accept real payments, change the value to a suitable live environment.
  clientKey: '{YOUR_CLIENT_KEY}',
  countryCode: 'NL',
  amount: { currency: 'EUR', value: 1000 }, // Value in minor units
  returnUrl: 'myapp://payment', // See description below.
};

返回 URL

[大

打开 config 使用自定义的 URL 方案或您的应用程序的 App/ Universal 链接.

const returnUrl = Platform.select({
  ios: 'myapp://payment',
  android: await AdyenDropIn.getReturnURL(),
});

开始支付部分

用于 @adyen/react-native 您可以使用我们的助手组件 AdyenCheckout 和助手的函数来自 useAdyenCheckout 具有独立组件:

import { useAdyenCheckout } from '@adyen/react-native';

const MyCheckoutView = () => {
  const { start } = useAdyenCheckout();

  return (
    <Button
      title="Open DropIn"
      onPress={() => {
        start('dropIn');
      }}
    />
  );
};

流程

[大

回忆你的回电 与 useCallback 以防止不必要的重报和事件听众重新登记。 内置函数会导致性能问题.

import { AdyenCheckout } from '@adyen/react-native';
import { useCallback } from 'react';

const onComplete = useCallback((result, component) => {
  // Payment was completed - call `component.hide(true)` to dismiss the payment UI.
  // Call /sessions/(sessionId)?sessionResult={result} API to get more information about the payment outcome.
}, []);

const onError = useCallback((error, component) => {
  // Payment was terminated by shopper or encountered an error
  // Call `component.hide(false)` to dismiss the payment UI.
}, []);

<AdyenCheckout
  config={configuration}
  session={session}
  onComplete={onComplete}
  onError={onError}
>
  <MyCheckoutView />
</AdyenCheckout>;

高级流程

import { AdyenCheckout } from '@adyen/react-native';
import { useCallback } from 'react';

const onSubmit = useCallback((data, component) => {
  // Call your server to make the `/payments` request
  // Pass `returnUrl: data.returnUrl` for cross-platform redirect flow
  // If response contains `action`, call `component.handle(response.action)`
  // Otherwise, call `component.hide(true | false)` to dismiss the payment UI
}, []);

const onAdditionalDetails = useCallback((paymentData, component) => {
  // Call your server to make the `/payments/details` request
  // Call `component.hide(true | false)` to dismiss the payment UI
}, []);

const onError = useCallback((error, component) => {
  // Payment was terminated by shopper or encountered an error
  // Call `component.hide(false)` to dismiss the payment UI
}, []);

<AdyenCheckout
  config={configuration}
  paymentMethods={paymentMethods}
  onSubmit={onSubmit}
  onAdditionalDetails={onAdditionalDetails}
  onError={onError}
>
  <MyCheckoutView />
</AdyenCheckout>;

处理动作

一些支付方法要求shopper采取额外行动,例如:扫描QR代码,用3D Security认证支付,或者登录他们的银行网站完成支付. 为了应对这些额外的前端挑战,使用 nativeComponent.handle(action) 从 onSubmit 调用.

const handleSubmit = (paymentData, nativeComponent) => {
  server.makePayment(paymentData)
    .then((response) => {
      if (response.action) {
        nativeComponent.handle(response.action);
      } else {
        nativeComponent.hide(response.result);
      }
    });
};

<AdyenCheckout
  ...
  onSubmit={handleSubmit}
  >
    ...
</AdyenCheckout>

独立行动处理

仅限API的整合 AdyenAction.handle 可以用来. 在你开始之前,确保你跟随所有 iOS 整合 财务报告和审定财务报表 Android 集成系统 步骤.

示例

import { AdyenAction } from '@adyen/react-native';

const data = await AdyenAction.handle(apiResponse.action, { environment: 'test', clientKey: '{YOUR_CLIENT_KEY}');
result = await ApiClient.paymentDetails(data);

文档

• 配置
• 本地化
• UI 自定义
• 错误代码
• 降入文档
• 构成部分文件

捐款

我们强烈鼓励你们与我们一道为这个存放处作出贡献,以便每个人都能从以下各方面获益:

• 新功能和功能
• 解决错误修正和问题
• 任何一般性改进

读我们 捐款准则 找出办法.

支助

如果你有特性请求 或发现错误或技术问题, 创建 GitHub 问题关于其他问题,请通过 客户区 通过电子邮件: 支持@ adyen.com

许可证

麻省理工学院执照. 更多信息,请参见 自由主义 文档.