接受支付宝付款

用 Stripe API 和 Checkout 接受支付宝付款，这是中国人广泛使用的一种数字钱包

复制页面

网页

移动端

Alipay 是一种单次使用的支付方式，客户需要验证他们的付款。客户在您的网站或应用程序中被跳转到 Alipay 页面，授权付款，然后返回您的网站或应用，然后在这里收到付款成功或失败的即时通知。

设置 Stripe
服务器端
客户端

服务器端

该集成要求您的服务器上的端点与 Stripe API 通讯。请用我们的官方库从您的服务器访问 Stripe API：

客户端

React Native SDK 是开源的，有完整的文档。在内部，它利用的是原生 iOS 和 Android SDK。要安装 Stripe 的 React Native SDK，在您的项目目录中运行以下某个指令（取决于您使用的软件包管理器）。

Command Line
yarn add @stripe/stripe-react-native

然后，安装一些其他必要的依赖项：

对于 iOS，前往 ios 目录并运行 pod install，确保您也安装了所需的本地依赖项。
对于 Android，无需安装其他依赖项。

Stripe 初始化

要在您的 React Native 应用中初始化 Stripe，使用 StripeProvider 组件包裹您的支付界面，或者使用 initStripe 初始化方法。只需要 publishableKey 中的 API 公钥。下例显示的是用 StripeProvider 组件初始化 Stripe 的方式。

import React, { useState, useEffect } from 'react';
import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  const [publishableKey, setPublishableKey] = useState('');

  const fetchPublishableKey = async () => {
    const key = await fetchKey(); // fetch key from your server here
    setPublishableKey(key);
  };

  useEffect(() => {
    fetchPublishableKey();
  }, []);

  return (
    <StripeProvider
      publishableKey={publishableKey}
      merchantIdentifier="merchant.identifier" // required for Apple Pay
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
    >
      // Your app code here
    </StripeProvider>
  );
}

注意

测试与开发时使用 API 测试模式，发布时使用真实模式密钥。

创建 PaymentIntent
服务器端

PaymentIntent 是一个用来表示您从客户收款意图的对象，并可用于跟踪付款流程的生命周期。在您的服务器上创建一个 PaymentIntent，并指定要收取的金额和支持的币种。如果您有现成的 Payment Intents 集成，则将 alipay 添加到 payment method types 列表。

重定向到支付宝钱包
客户端

对于银行重定向和数字钱包支付方式，Stripe React Native SDK 指定的是 safepay/ 作为返回页面的主机。客户用支付宝完成付款后，会被重定向到 myapp://safepay/，其中 myapp 就是您的自定义页面内跳转协议。

当客户退出您的应用程序时，例如在 Safari 浏览器或他们的银行应用程序中进行验证时，为他们提供一种方式，以便之后自动返回到您的应用程序。很多支付方式类型要求提供一个返回页面，因此，如果不提供，我们就无法向您的用户显示这些支付方式——即使您已启用了这些支付方式。

要提供返回 URL，请执行以下操作：

注册自定义 URL。不支持通用链接。
配置您的自定义 URL。
设置您的根组件，将 URL 转发到 Stripe SDK，如下所示。

注意

如果您在使用 Expo，则在 app.json 文件中设置您的协议。

App.tsx
import React, { useEffect, useCallback } from 'react';
import { Linking } from 'react-native';
import { useStripe } from '@stripe/stripe-react-native';

export default function MyApp() {
  const { handleURLCallback } = useStripe();

  const handleDeepLink = useCallback(
    async (url: string | null) => {
      if (url) {
        const stripeHandled = await handleURLCallback(url);
        if (stripeHandled) {
          // This was a Stripe URL - you can return or add extra handling here as you see fit
        } else {
          // This was NOT a Stripe URL – handle as you normally would
        }
      }
    },
    [handleURLCallback]
  );

  useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      handleDeepLink(initialUrl);
    };

    getUrlAsync();

    const deepLinkListener = Linking.addEventListener(
      'url',
      (event: { url: string }) => {
        handleDeepLink(event.url);
      }
    );

    return () => deepLinkListener.remove();
  }, [handleDeepLink]);

  return (
    <View>
      <AwesomeAppComponent />
    </View>
  );
}

有关 Native URL Scheme（页面内跳转协议）的更多信息，请参考 Android 和 iOS 文档。

确认付款
客户端

当客户点击支付宝进行支付时，调用 confirmPayment，展示一个网络视图，让客户在这里完成付款。

export default function AlipayPaymentScreen() {
  const [email, setEmail] = useState('');
  const { confirmPayment, loading } = useConfirmPayment();

  const handlePayPress = async () => {
    const { clientSecret } = await fetchPaymentIntentClientSecret();

    const { error, paymentIntent } = await confirmPayment(clientSecret, {
      paymentMethodType: 'Alipay',
    });

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else if (paymentIntent) {
      Alert.alert(
        'Success',
        `The payment was confirmed successfully! currency: ${paymentIntent.currency}`
      );
    }
  };

  return (
    <Screen>
      <TextInput
        placeholder="E-mail"
        keyboardType="email-address"
        onChange={(value) => setEmail(value.nativeEvent.text)}
      />
      <Button
        variant="primary"
        onPress={handlePayPress}
        title="Pay"
        loading={loading}
      />
    </Screen>
  );
}

可选处理付款后事件

支持的货币

您可以用与您所在国家或地区对应的货币来创建支付宝付款。支付宝的默认本国货币是 cny，客户也会看到用 cny 表示的购买金额。

货币	国家/地区
`cny`	任何国家
`aud`	澳大利亚
`cad`	加拿大
`eur`	奥地利、比利时、保加利亚、塞浦路斯、捷克共和国、丹麦、爱沙尼亚、芬兰、法国、德国、希腊、爱尔兰、意大利、拉脱维亚、立陶宛、卢森堡、马耳他、荷兰、挪威、葡萄牙、罗马尼亚、斯洛伐克、斯洛文尼亚、西班牙、瑞典、瑞士
`gbp`	英国
`hkd`	香港
`jpy`	日本
`myr`	马来西亚
`nzd`	新西兰
`sgd`	新加坡
`usd`	美国

如果您有另一种货币的银行账户，并希望用该货币创建支付宝付款，则可以联系支持。是否支持其他货币取决于您的具体情况。