Как интегрировать полосу в angular 8 с повторяющимися платежами (т.е. подпиской)

Question

Я пытаюсь интегрировать Stripe с повторяющимися платежами.

Я перешел по этой ссылке https://stripe.com/docs/payments/checkout/subscriptions/starting

Я понял, что сначала нужно создать сеанс проверки, а затем я должен передать идентификатор сеанса для дальнейшего процесса.

Я могу создать все API согласно документу, и я также могу получить идентификатор сеанса.

Но я застрял, как я могу интегрироваться во Front end (то есть Angular 8), потому что вы делаете c только для чистого js.

Пожалуйста, дайте мне знать, как интегрировать для создания сеанса оформления заказа и перенаправить оформление заказа в angular 8.

Еще одно сомнение: как узнать клиента или нового клиента до создания сеанса оформления заказа.

Пожалуйста, дайте мне ваш предложения

Answer 1

Если 'Stripe не определен', убедитесь, что js .stripe.com / v3 загружается правильно. Для Angular Установите соответствующий пакет

npm i @stripe/stripe-js

Вы можете проверить chrome средства разработчика на вкладке Источники, чтобы проверить, загружен ли он. Как только он появится, на ваш компонент загрузите PubApiKey:

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

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

И затем, куда бы вы ни возвращали свой идентификатор сеанса из бэкэнда, сделайте перенаправление:

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

Answer 2

Вам нужно будет включить Stripe. js в базовый шаблон html как обычный тег сценария:

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

Затем вам нужно будет инициализировать экземпляр Stripe в конструкторе или ngOnInit вашего компонента.

this.stripe = Stripe("pk_text_yourpublishablekey");

Наконец, когда нажата кнопка или событие, вызывающее перенаправление, вы вызовете redirectToCheckout с идентификатором сеанса, который вы создали сервер.

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