在 React 中设置 Stripe Payments
有效集成支付解决方案对于开发商业应用程序至关重要。Stripe Payments 是领先的支付服务之一，为开发人员提供了一个强大的 API，用于将支付处理功能嵌入到他们的应用程序中。
传统上，要接受付款，开发人员必须设置后端服务器来处理付款处理。但是，借助 Stripe 的客户端专用解决方案，开发人员现在可以直接从客户端安全地接受付款，无需后端服务器。
什么是 Stripe Checkout？
Stripe Checkout 是一种仅限客户端的支付解决方案，允许开发人员在不需要后端服务器的情况下接受付款。它提供了一个预构建的、可定制的支付表单，可以安全地从客户那里收集支付详细信息。Stripe Checkout 处理支付处理，确保敏感的支付信息永远不会接触您的服务器。
它还提供了针对移动和桌面设备优化的用户界面，使客户可以轻松完成交易。Stripe Checkout 支持多种支付方式，包括信用卡、Apple Pay 等。
Stripe Checkout 由 Stripe 托管
Stripe Checkout 是一个托管解决方案，这意味着付款表单由 Stripe 托管。当客户发起付款时，他们会被重定向到一个安全的 Stripe 托管页面，以输入他们的付款详细信息。付款处理完毕后，客户将被重定向回您的网站。
设置 Stripe 账户
在开始使用 Stripe Checkout 接受付款之前，您需要创建一个 Stripe 账户。访问 Stripe 网站并注册一个账户。创建账户后，您将收到一个 API 密钥，您将使用该密钥验证您对 Stripe API 的请求。
确保您的 Stripe 账户中启用了测试模式，以便在不处理真实交易的情况下测试付款。当您准备好接受真实付款时，您可以切换到实时模式。
下一步是创建付款链接，您将在其中添加新产品并设置付款详细信息。您可以自定义付款表单以匹配您的品牌并指定付款金额、货币和其他详细信息。
在 API 密钥页面（在测试模式下），您将找到您的可发布密钥和密钥。可发布密钥用于在从客户端向 Stripe API 发出请求时识别您的账户。密钥用于验证从您的服务器向 Stripe API 发出的请求。
可发布密钥以 开头，密钥以 开头。确保密钥安全，切勿将其暴露给客户端。pk_test_sk_test_
在 React 中集成 Stripe Checkout
现在您已经设置了 Stripe 账户并获得了可发布密钥，您可以将 Stripe Checkout 集成到您的 React 应用程序中。
让我们先使用 TypeScript 通过 Vite 创建一个 React 应用程序：
npm create vite@latest接下来，安装 Stripe SDK：
npm install @stripe/stripe-js安装 Stripe SDK 后，我们将在其中创建一个新文件夹和文件：lib/getStripe.ts
import { loadStripe, Stripe } from '@stripe/stripe-js';
let stripePromise: Promise;
const getStripe = (): Promise => {
if (!stripePromise) {
stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '');
}
return stripePromise;
};
export default getStripe;密钥存储在文件中：.env
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY='your_pk_test_key'
NEXT_PUBLIC_STRIPE_PRICE_ID='your_price_id'您可以在 Stripe 管理平台中创建的产品下找到价格 ID。
在我们创建一个按钮，该按钮将打开 Stripe Payments Checkout 表单：App.tsx
import './App.css'
function App() {
return (
)
}
export default App现在，我们将创建一个函数，该函数将打开 Stripe Checkout 表单：handleCheckout
async function handleCheckout() {
const stripe = await getStripe();
if (stripe) {
const { error } = await stripe.redirectToCheckout({
lineItems: [
{
price: 'price_1P92AaSEo9fNIGOa6fYgIkUt',
quantity: 1,
},
],
mode: "payment", // here you can specify the mode as either payment or subscription for one time payments or recurring payments respectively
successUrl: http://localhost:3000/success,
cancelUrl: http://localhost:3000/cancel,
customerEmail: "[email protected]",
});
console.warn(error.message);
}
}在这里，我们使用该方法打开 Stripe Payments Checkout 表单。我们指定价格 ID、数量和其他详细信息，例如成功和取消 URL。您可以根据需要自定义这些参数。redirectToCheckout
您可以指定其他属性，例如在付款表单中预填电子邮件字段。customerEmail
最后，我们在按钮中添加一个事件来调用该函数，然后您就可以在 React 应用程序中使用 Stripe Checkout 接受付款了。onClickhandleCheckout
以下是单击按钮后应看到的内容的示例：
处理付款后，客户将被重定向到您指定的成功 URL。您可以处理成功和取消 URL，以显示适当的消息或根据付款结果将客户重定向到不同的页面。
注意：请确保在您的 Stripe 账户设置中启用仅限客户端的集成，以使用 Stripe Checkout。
结论
Stripe Checkout 提供了一种简单安全的方式，无需后端服务器即可在您的 React 应用程序中接受 Stripe 付款。您可以自定义付款表单以匹配您的品牌，并指定付款详细信息以满足您的要求。这为开发人员构建电子商务应用程序和无缝接受付款开启了无限可能。