Angular 和 Stripe 集成

Question

我正在尝试将 Stripe 集成到我的网站中，但我目前遇到了一些麻烦。我其实有问题

#1:我已经关注了这个thread还有这个stackblitz页。但它仍然无法正常工作。看起来我的应用程序没有获取 Stripe 组件。 我的ts文件

import {
 Component,
 AfterViewInit,
 OnDestroy,
 ViewChild,
 ElementRef,
 ChangeDetectorRef
} from '@angular/core';

import  { NgForm } from "@angular/forms"
import { AngularStripeService } from '@fireflysemantics/angular-stripe-service'

@Component({
selector: 'payment',
templateUrl: './payment.component.html',
styleUrls: ['./payment.component.css']
})
export class PaymentComponent implements AfterViewInit, OnDestroy {

@ViewChild('cardInfo', { static: false }) cardInfo: ElementRef;

stripe: any;
loading = false;
confirmation: any;

card: any;
cardHandler = this.onChange.bind(this);
error: any;

constructor(
 private cd: ChangeDetectorRef,
 private stripeService:AngularStripeService) {}

ngAfterViewInit() {
 this.stripeService.setPublishableKey('pk_test____________').then(
  stripe=> {
    console.log("in function"); // logging to console
    this.stripe = stripe;
    const elements = stripe.elements();    
    this.card = elements.create('card');
    this.card.mount(this.cardInfo.nativeElement); // also tried "#card-info"
    this.card.addEventListener('change', this.cardHandler);
 }).catch((e:any)) => { // no errors
   console.error(e);
}

ngOnDestroy() {
 this.card.removeEventListener('change', this.cardHandler);
 this.card.destroy();
}

onChange( error: any ) {
 if (error) {
  this.error = error.message;
 } else {
  this.error = null;
 }
 this.cd.detectChanges();
}

async onSubmit(form: NgForm) {
 console.log(form)
 const { token, error } = await this.stripe.createToken(this.card);

 if (error) {
  console.log('Error:', error);
 } else {
  console.log('Success!', token);
 }
}
}

只有在提交表单时，应用程序才不会给出任何错误，我得到一个错误，即表单为空，这是有道理的。

我的包 JSON strip 组件

"@types/stripe-checkout": "^1.0.3",
"@types/stripe-v3": "^3.1.20",
"@fireflysemantics/angular-stripe-service": "^1.0.0",
"@stripe/stripe-js": "^1.9.0",
"@types/stripe": "^7.13.24",

我不确定我做错了什么我也在脑海中尝试过 CDN 版本，但这对

我的 HTML 和 CSS 与 Stackblitz 页面完全一样

#2:是否有关于如何将 Stripe IDEAL 与 Angular 集成的文档？

我没有必要解决这个教程，但我需要一个很好的 Stripe 和 Angular 示例

Answer 1

我找到了一个最新的教程 tutorial

完整文档 here

创建组件

首先，您应该通过 NPM 安装 Stripe。

 npm install ngx-stripe @stripe/stripe-js;

像这样导入 Stripe。

import { NgxStripeModule } from 'ngx-stripe';

之后，现在将 Stripe 包含在您的导入中

    NgxStripeModule.forRoot('***your-stripe-publishable-key***'),

之后，您现在可以在您的文件中使用 Stripe在您的 TS 中导入 Stripe 元素

import { StripeService, StripeCardComponent } from 'ngx-stripe';
import { StripeCardElementOptions, StripeElementsOptions } from '@stripe/stripe-js';

您可以更改样式和语言

 cardOptions: StripeCardElementOptions = {
    hidePostalCode: true,
    style: {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        fontWeight: '300',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSize: '14px',
        '::placeholder': {
          color: '#CFD7E0',
        },
      },
    },
  };

  elementsOptions: StripeElementsOptions = {
    locale: 'nl',
  };

然后你可以初始化一个信用卡组件

<ngx-stripe-card
    [options]="cardOptions"
    [elementsOptions]="elementsOptions"
></ngx-stripe-card>

或者一个理想的组件

<ngx-stripe-ideal-bank
    [options]="cardOptions"
    [elementsOptions]="elementsOptions"
></ngx-stripe-ideal-bank>

创建付款

对于付款，您应该向创建和处理付款的后端服务器创建一个 http 请求。我是用 ExpressJS 服务器做的。首先是http请求

let data = {
      name: name,
      email: email,
      postal: postal,
      paymentOption: this.paymentOption,
      products: this.products,
      userEmail: this.email,
    };

    const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Access-Control-Allow-Origin', '*')
      .set('Access-Control-Allow-Credentials', 'true')
      .set('Access-Control-Allow-Methods', 'POST')
      .set('Access-Control-Allow-Headers', 'Content-Type')
      .set('Authorization', '*');

    this.http
      .post('http://127.0.0.1:3000/pay', JSON.stringify(data), {
        headers: headers,
      })

现在您已经创建了一个 http 请求

app.post('/pay', cors(), async function (req, res) {
   const paymentIntent = await stripe.paymentIntents.create({
        amount: price, // watch out in cents
        currency: 'eur',
        receipt_email: email,
        payment_method_types: [method], // card or ideal
        description: `Customer named ${name}`,
    });
)}

将您的响应发送回您的前端

    res.status(201).json(paymentIntent.client_secret);

并确认付款

this.http
          .post('http://127.0.0.1:3000/pay', JSON.stringify(data), {
            headers: headers,
          }).subscribe(async (data) => {
                console.log(data);
                if (this.paymentOption == 'creditcard') {
                    // confirm creditcard payment
                    this.stripeService
                        .confirmCardPayment(data.toString(), {
                            payment_method: {
                                card: this.card.element,
                                billing_details: {
                                    name: name,
                                },
                            },
                        })
                        .subscribe((result) => {
                            console.log('result', result);
                        });
                } 
                    
            });