javascript - 在 Angular 5 中使用 Stripe

Question

我有一个使用 Stripe 保存客户支付卡信息的 Angular 应用程序。

我将这个脚本包含在我的 index.html 中

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

此脚本提供了一个“Stripe”对象，我可以像这样使用它:

<script> var stripe = Stripe('pk_XXXXXXXXXXX') </script>

问题是:如何从我的 Angular typescript 代码访问 Stripe 对象？

Answer 1

在 typings.d.ts 中注册类型

declare var Stripe: any;

从服务中实例化一个 Stripe 对象

import { Injectable } from '@angular/core';

@Injectable()
export class PaymentService {

  stripe = Stripe('pk_test_XXXXX');

}

现在您可以将此服务注入(inject)您的组件并与元素交互，但请确保使用 AfterViewInit。

export class SomeComponent implements AfterViewInit {

  elements: any;

  constructor(private pmt: PaymentService) 

  ngAfterViewInit() {
    // initalize elements
    this.elements = this.pmt.stripe.elements()
  }

}