接受支付宝付款

用 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

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

For iOS, go to the ios directory and run pod install to ensure that you also install the required native dependencies.
对于 Android，无需安装其他依赖项。

注意

建议按照官方 TypeScript 指南添加 TypeScript 支持。

Stripe 初始化

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

import { 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，请执行以下操作：

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

注意

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

App.tsx
import { 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>
  );
}

可选处理付款后事件

支持的货币

Your account must have a bank account for one of the following currencies. You can create Alipay payments in the currencies that map to your country. The default local currency for Alipay is cny and customers also see their purchase amount in cny.

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

如果您拥有以另一种货币开设的银行账户，并希望以该货币创建支付宝支付，可以联系支持服务。我们会根据具体情况为其他货币提供支持服务。