使用 Stripe 为我的电子商务 Rails/React 项目实现自定义结账
使用 Stripe 为我的电子商务 Rails/React 项目实现自定义结账
啊啊啊。终于结束了我与熨斗学校的旅程。我已经完成了我的最后一个项目。要求是创建一个带有 Ruby on Rails 后端和 React/Redux 前端的 SPA。项目创意的概念是无穷无尽的！最终，我决定创建一个应用程序，让客户可以在支付运费的同时“购买”我不再穿的衣服和鞋子！我对项目的开始非常满意，但是，尝试实施 Stripe 是另一个障碍。
用户体验
客户将项目/项目添加到他们的购物车，
然后，一旦他们点击“结帐”，他们就会被发送到账单表格。
在他们完成账单详细信息后，当他们点击继续结账时，他们将被发送到 Stripe 的 PaymentElement 以完成他们的卡详细信息。
最后，一旦他们添加了他们的信息并单击“立即付款”，付款将被提交并发送到 Stripe。
条纹流
使用 Stripe 收款的付款流程：
付款意向
我向我的服务器添加了一个端点来创建支付意图。
当然，第一步是将 Stripe gem 添加到我的 gemfile 中：
**捆绑添加条纹**
然后我通过添加文件将我的条带密钥添加到我的凭据中 配置/初始化程序/stripe.rb 在我添加的那个文件中：
**Stripe.api_key = Rails.application.credentials.stripe[:secret_key]**
将密钥添加到初始化程序文件夹会设置密钥，以便在 Rails 启动时加载并在任何地方可用。然后我在我的凭证文件中设置了我的 secret_key。
#aws：
# access_key_id: 123
#secret_access_key: 345
条纹：
secret_key: YOUR_STRIPE_SECRET_KEY
打开我的凭据编辑器以添加我的密钥。
我生成了一个新的控制器：
**rails g 控制器 PaymentIntents**
除了控制器，我不需要模型或任何额外的东西，所以我选择使用控制器生成器。
在文档中，您可以在不同语言之间切换，以帮助使用 Stripe 实现一次性付款的自定义表单，这给了我一些代码。
在我的 PaymentIntents 控制器中，我有一个 create 方法，它向 Stripe 发送一个请求，以根据我的前端将发送给它的参数创建一个新的支付意图。
反应
在我的 App.js 中，我使用 React Router 将 props 传递给不同的路由。计费表单的输入在 App.js 中设置，以将它们传递给 Stripe CheckoutContainer。
CheckoutContainer 接受从 App.js 传递的参数 {name, email, address}。此外，我使用了 useLocation 挂钩来检索购物车中设置的 {total}。在我的后端向 Payment Intent 发出获取请求并返回 clientSecret，然后 Elements 将从 loadStripe 传递返回的 stripePromise 并将其传递给 CheckoutForm。
PaymentElement 被返回，以便客户可以输入他们的卡信息。当按下“立即付款”按钮时，使用 client_secret 和卡详细信息调用 stripe.confirmPayment()，然后尝试付款，如果接受，将返回成功的付款意图，客户将被重定向到我的“谢谢”您为您的订单”页面。呸！现在我们有了一个可以工作的电子商务 Web 应用程序。这花了一些时间，但我们做到了！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
