javascript - 在 Angular 5 中使用 Stripe

Question

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

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

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

这个脚本提供了一个“条纹”对象，我可以像这样使用它：

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

问题是：如何从我的角度打字稿代码中访问 Stripe 对象？

Answer 1

在typings.d.ts中注册类型

declare var Stripe: any;

从 Service 实例化 Stripe 对象

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

@Injectable()
export class PaymentService {

  stripe = Stripe('pk_test_XXXXX');

}

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

export class SomeComponent implements AfterViewInit {

  elements: any;

  constructor(private pmt: PaymentService) 

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

}

Answer 2

试试这个 npm：ngx-stripe-checkout

有了这个，您可以轻松地以角度集成条带结帐。

更多详情：https ://www.npmjs.com/package/ngx-stripe-checkout 。

Answer 3

尝试使用

npm i stripe-payment-component

对于角打字稿版本。