调至内容部分
创建账户
或
登录
Stripe 文档徽标
/
创建账户
登录

收款

安全地在线上收款。

制作支付表单或使用预构建的结账页面来开始接收线上付款。

该集成将支付所需的所有步骤（收集付款详情及确认付款）组合到在您的应用顶部显示的单一表单内。

设置 Stripe
服务器端
客户端

首先，您需要有 Stripe 账户。立即注册。

Server-side

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

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Client-side

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

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

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

  • 对于 iOS，前往 ios 目录并运行 pod install，确保您也安装了所需的本地依赖项。
  • 对于 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。

默认情况下，Stripe 支持信用卡和其他常见的支付方式，可以帮助您获得更多客户，但建议您开启与您的业务和客户相关的其他支付方式。查看支付方式支持，了解支持的产品和支付方式，并查看我们的定价页面了解费用。

添加端点
服务器端

注意

要在创建 PaymentIntent 之前显示 PaymentSheet，请参阅收集支付详情后再创建 Intent。

该集成使用三个 Stripe API 对象：

  1. PaymentIntent：Stripe 用它来表示您从客户收款的意图，跟踪您的扣款尝试及整个过程中付款状态的变化情况。

  2. （可选）Customer：要为将来的付款设置支付方式，就必须将它绑定到 Customer。当客户在您的公司创建账户时，创建 Customer 对象。如果您的客户以访客身份付款，则可以在付款前创建个 Customer 对象，然后再将它关联到您自己内部的客户账户表示。

  3. （可选）Customer Ephemeral Key：Customer 对象的信息属于敏感信息，无法直接从应用中检索。临时密钥授予 SDK 对客户的临时访问权限。

注意

如果您从不将银行卡保存到客户，并且不允许回头客重复使用已保存的银行卡，则可以从集成中省略 Customer 和 Customer Ephemeral Key 对象。

出于安全原因，您的应用无法创建这些对象。相反，在服务器上会添加一个端点，其功能如下：

  1. 检索 Customer，或新建一个。
  2. 为 Customer 创建一个 Ephemeral Key。
  3. 创建 PaymentIntent，设置好 amount、currency 和 customer。您还可以选择包含 automatic_payment_methods 参数。默认情况下，Stripe 会在最新版的 API 中启用其功能。
  4. 将 Payment Intent 的客户端私钥、Ephemeral Key 的 secret 以及 Customer 的 id 和您的公钥返回到您的应用程序。

在结账过程中显示给客户的支付方式也包含在 PaymentIntent 中。您可以让 Stripe 从管理平台设置中提取支付方式，也可以手动列出它们。无论选择哪种方式，都要知道在 PaymentIntent 中传递的货币会过滤显示给客户的支付方式。例如，如果您在 PaymentIntent 中传递 eur，并且在管理平台中启用了 OXXO，则不会向客户显示 OXXO，因为 OXXO 不支持 eur 支付。

除非您的集成需要基于代码的选项来提供支付方式，否则 Stripe 建议使用自动选项。这是因为 Stripe 会评估货币、支付方式限制和其他参数，以确定支持的支付方式列表。优先显示可提高转化率且与货币和客户所在地最相关的支付方式。

注意

在 Glitch 上测试此端点的一个运行实现。

您可以从管理平台管理支付方式。Stripe 根据交易金额、货币和支付流程等因素处理符合条件的支付方式的退货。PaymentIntent 是用您在管理平台中配置的支付方式创建的。如不想使用管理平台或想手动指定支付方式，可通过 payment_method_types 属性将其列出。

Command Line
# Create a Customer (use an existing Customer ID if this is a returning customer)
curl https://api.stripe.com/v1/customers \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST"

# Create an Ephemeral Key for the Customer
curl https://api.stripe.com/v1/ephemeral_keys \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -H "Stripe-Version: 2025-06-30.basil" \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \

# Create a PaymentIntent
curl https://api.stripe.com/v1/payment_intents \
  -u 
sk_test_BQokikJOvBiI2HlWgH4olfQ2
: \
  -X "POST" \
  -d "customer"="{{CUSTOMER_ID}}" \
  -d "amount"=1099 \
  -d "currency"="eur" \
  # In the latest version of the API, specifying the `automatic_payment_methods` parameter
  # is optional because Stripe enables its functionality by default.
  -d "automatic_payment_methods[enabled]"=true \

收集付款详情
客户端

显示移动端 Payment Element 前，您的结账页面应：

  • 显示购买的产品和总金额
  • 收集所需的配送信息
  • 包含一个结账按钮来展示 Stripe 的 UI

在您的应用的结账表单内，向上一步中创建的后端端点发送网络请求，从 useStripe hook 调用 initPaymentSheet。

export default function CheckoutScreen() {
  const { initPaymentSheet, presentPaymentSheet } = useStripe();
  const [loading, setLoading] = useState(false);

  const fetchPaymentSheetParams = async () => {
    const response = await fetch(`${API_URL}/payment-sheet`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const { paymentIntent, ephemeralKey, customer } = await response.json();

    return {
      paymentIntent,
      ephemeralKey,
      customer,
    };
  };

  const initializePaymentSheet = async () => {
    const {
      paymentIntent,
      ephemeralKey,
      customer,
    } = await fetchPaymentSheetParams();

    const { error } = await initPaymentSheet({
      merchantDisplayName: "Example, Inc.",
      customerId: customer,
      customerEphemeralKeySecret: ephemeralKey,
      paymentIntentClientSecret: paymentIntent,
      // Set `allowsDelayedPaymentMethods` to true if your business can handle payment
      //methods that complete payment after a delay, like SEPA Debit and Sofort.
      allowsDelayedPaymentMethods: true,
      defaultBillingDetails: {
        name: 'Jane Doe',
      }
    });
    if (!error) {
      setLoading(true);
    }
  };

  const openPaymentSheet = async () => {
    // see below
  };

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

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

当客户点击 Checkout 按钮时，调用 presentPaymentSheet() 来打开表单。客户完成付款后，表单关闭，通过一个可选的 StripeError<PaymentSheetError> 解析 promise。

export default function CheckoutScreen() {
  // continued from above

  const openPaymentSheet = async () => {
    const { error } = await presentPaymentSheet();

    if (error) {
      Alert.alert(`Error code: ${error.code}`, error.message);
    } else {
      Alert.alert('Success', 'Your order is confirmed!');
    }
  };

  return (
    <Screen>
      <Button
        variant="primary"
        disabled={!loading}
        title="Checkout"
        onPress={openPaymentSheet}
      />
    </Screen>
  );
}

如果发生错误，则通知用户他们已完成（例如，显示订单确认界面）。

将 allowsDelayedPaymentMethods 设置为 true，以允许延迟通知型支付方式，例如美国银行账户。对于这些支付方式，只有当 PaymentSheet 完成后才能知道最终的付款状态是成功还是失败。如果您支持这些类型的支付方式，请告知客户他们的订单已被确认，并且仅在付款成功时履行订单（例如，为他们安排发货）。

设置返回页面（仅限 iOS）
客户端

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

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

  1. 注册 自定义 URL。不支持通用链接。
  2. 配置 您的自定义 URL。
  3. 设置您的根组件，将 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>
  );
}

此外，调用 initPaymentSheet 方式时设置 returnURL：

await initPaymentSheet({
  ...
  returnURL: 'your-app://stripe-redirect',
  ...
});

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

处理付款后事件

付款完成时，Stripe 会发送一个 payment_intent.succeeded 事件。使用 管理平台 Webhook 工具、或按照 Webhook 指南来接收这些事件并运行操作，例如，向客户发送订单确认邮件、在数据库中记录订单，或启动配送流程。

侦听这些事件，而不是等待客户端回调。在客户端，客户可能会在执行回调之前关闭浏览器窗口或退出应用程序，并且恶意客户端可能会操纵响应。设置您的集成来侦听异步事件，这样才能用单一集成用用接受不同类型的支付方式。

除了处理 payment_intent.succeeded 事件外，建议在使用 Payment Element 收款时也处理其他的这些事件：

事件描述操作
payment_intent.succeeded客户成功完成付款时发送。向客户发送订单确认通知，并履行他们的订单。
payment_intent.processing当客户成功发起付款但并未完成时发送。当客户发起银行借记时，通常会发送此事件。之后将会出现 payment_intent.succeeded 或 payment_intent.payment_failed 事件。向客户发送订单确认，告知他们的付款正等待处理。对于数字商品，您可能想先履行订单，然后再等付款完成。
payment_intent.payment_failed在客户尝试付款但付款失败时发送。如果一笔付款从 processing 变为 payment_failed，则让客户再尝试一次。

测试集成

卡号场景如何测试
该卡付款成功，不需要验证。使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。
该卡付款时需要验证。使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。
该卡被拒绝，显示拒付代码，例如 insufficient_funds。使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。
银联卡的长度为 13-19 位。使用信用卡号以及有效期和 CVC 和邮编填写我们的信用卡表单。

有关测试您的集成的更多信息，请参阅测试部分。

此页面的内容有帮助吗？
是否
需要帮助？联系支持。
加入我们的早期使用计划。
查看我们的更改日志。
有问题？联系销售。
LLM? Read llms.txt.
Powered by Markdoc
Code quickstart
相关指南
Elements Appearance API
更多支付场景
卡的工作原理
使用的产品
Payments
Elements
Checkout