如何在angular 8中将stripe与定期付款(即订阅)集成

Question

我正在尝试集成与定期付款的条纹。

我点击了这个链接https://stripe.com/docs/payments/checkout/subscriptions/starting

我知道我必须首先创建一个结帐会话，然后我应该传递会话id以进行进一步的处理。

我能够按照文档创建所有的API，我也能够获得会话id。

但是我被困住了，我怎么才能在前端(即Angular 8)中集成，因为这个文档只为纯js提供。

请让我知道如何在angular 8中集成创建结帐会话和重定向结帐。

一个更多的疑问是，如何在结帐会话创建之前了解已经有客户或新客户。

请给我你的建议

Answer 1

import { loadStripe } from '@stripe/stripe-js'; // this is typescript

stripePromise = loadStripe('pk_test_yourpublickeyshglhglglkdgjlrs')  

// Call your backend to create the Checkout session.

// When the customer clicks on the button, redirect them to Checkout.

async checkout() {
  const stripe = await this.stripePromise;
  const { error } = await stripe.redirectToCheckout({
    mode: 'payment',  
    lineItems: [{ price: this.plan, quantity: this.quantity }],
    successUrl: `${window.location.href}/success`,
    cancelUrl: `${window.location.href}/failure`,
  });

  if (error) {
    console.log(error);
  }
}

Answer 2

您需要将Stripe.js作为常规脚本标记包含在html基本模板中：

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

然后，您需要在组件的构造函数或ngOnInit中初始化Stripe的实例。

this.stripe = Stripe("pk_text_yourpublishablekey");

最后，当单击按钮或触发重定向事件时，您将使用在服务器上创建的sessionId调用redirectToCheckout。

this.stripe.redirectToCheckout({ sessionId: sessionId });

Answer 3

如果“未定义条纹”，请确保正确加载了js.stripe.com/v3。对于Angular安装相应的软件包

npm i @stripe/stripe-js

你可以检查一下源码标签下的chrome developer tools来检查它是否加载了。一旦它出现，就在您的组件上加载PubApiKey：

  stripePromise: any = null;
  stripe: any = null;

  constructor(...)
  {
   ...
  this.stripePromise = loadStripe('pk_test_***')
      .then(res => {
        this.stripe = res;
      });
   }

然后，无论你在哪里从后台返回你的会话id，都要进行重定向：

  this.stripe.redirectToCheckout({sessionId: stripeSession_id})
  .then(res => {
     console.log(res);
  })
  .catch(error => {
     console.log(error);
  });