时间戳

首页 > 解决方案 > 如何在 angular-8 中集成最新版本的条带支付网关（服务器结账）？

angular - 如何在 angular-8 中集成最新版本的条带支付网关（服务器结账）？

问题描述

我正在使用 Angular（v8.1.2）的最新版本。现在我需要在我的项目中集成最新版本的 Stripe（API 版本 2019-05-16）支付网关。具体来说，我想添加条带的服务器结帐付款。

我尝试使用 npm 模块 @types/stripe 进行集成，但它不起作用。

从“条纹”导入*作为条纹；const stripe = new Stripe("sk_test_B...");

它应该可以工作，但出现以下错误... ./src/app/app.component.ts 中的错误找不到模块：错误：无法解析“/home/helal/Desktop/Angular/stripe-”中的“条纹” checkout/src/app' ℹ ｢wdm｣: 编译失败

更新

Finally, I have solved this issue.
1) My Front-end is Angular and created backend API in NodeJS
2) Created session id (stripe) in API (at backend, NodeJS)
3) Then using the session id, redirected to stripe hosted page from angular component ts file. I am giving example code below form more clarification.

银行端代码示例

const stripe = Stripe('sk_test_*****************');

stripe.checkout.sessions.create(
  {
    success_url: 'http://localhost:4200/success',
    cancel_url: 'http://localhost:4200/cancel',
    payment_method_types: ['card'],
    line_items: [
      {
        name: 'T-shirt',
        description: 'Comfortable cotton t-shirt',
        amount: 1500,
        currency: 'usd',
        quantity: 2,
      },
    ],
  },
  (err, session) => {
    // asynchronously called
    res.send(JSON.stringify(session));
  },
);

前端代码示例（_.component.ts 文件）

// stripe session is the object returned from api
this.stripe_session = stripe_session; 
const stripe = Stripe('pk_test_*****************');
stripe.redirectToCheckout({
  sessionId: stripe_session.id
}).then(function (result) {
  console.log(result);
});

有关详细信息，请访问Stripe 托管结帐文档。

标签： angularstripe-paymentsangular8

解决方案

该@types/stripe包仅包含Stripe API for Node JS的类型定义。它不能用于客户端库或框架，例如 Angular。

如果您想实现 Stripe.js 和 Stripe Elements，它们分别是 Stripe 和 UI 组件的客户端 JavaScript 库，您应该按照下一页上的说明进行操作。这将允许您在前端实现客户端支付流程。

一般来说，你应该怎么做，就是在你的 index.html 中添加以下行，

<script src="https://js.stripe.com/v3/"></script>

此外，您可能希望安装Stripe Checkout和Stripe Elements的类型定义。

npm i @types/stripe-checkout
npm i @types/stripe-v3

而在需要使用 Stripe 的组件上，

将此添加到您的类/组件的声明之上。

declare var Stripe;

然后，您可以安装 Stripe Elements

stripe;

ngOnInit() {
  this.stripe = Stripe('your_stripe_key');
  // do the rest.
}

如果您想了解更多有关它的信息，也可以参考这个 3rd 方教程。

推荐阅读