使用Stripe with Angular 5 [英] Using Stripe with Angular 5

问题描述

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

I have an angular application that uses Stripe to save customer payment card info.

我在index.html中包含此脚本

I include this script in my index.html

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

这个脚本提供了一个Stripe对象，我可以像这样使用：

this script provides a "Stripe" object that I can use like this:

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

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

the question is: How can I access the Stripe object from my angular typescript code?

推荐答案

在 typings.d.ts 中注册类型

declare var Stripe: any;

从服务实例化Stripe对象

Instantiate a Stripe object from a Service

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

@Injectable()
export class PaymentService {

  stripe = Stripe('pk_test_XXXXX');

}

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

Now you can inject this service into your components and interact with elements, but make sure to use AfterViewInit.

export class SomeComponent implements AfterViewInit {

  elements: any;

  constructor(private pmt: PaymentService) 

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

}

这篇关于使用Stripe with Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！