确认已经在Angular 12项目中正确引入Stripe js。
在Angular 12项目中,打开样式表文件(styles.css或styles.scss)。
在样式表中添加以下代码,以选择所需的主题:
@import 'https://cdn.jsdelivr.net/npm/@stripe/stripe-js@v1.15.0/themes/{insert_theme_name}/index.css';
注意:将“{insert_theme_name}”替换为所需的主题名称,例如“default”、“dark”或“light”。
import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { StripeService, Elements } from 'ngx-stripe';
@Component({
selector: 'app-stripe-payment',
templateUrl: './stripe-payment.component.html',
styleUrls: ['./stripe-payment.component.css']
})
export class StripePaymentComponent implements OnInit {
elements: Elements;
@ViewChild('cardElement') cardElement: ElementRef;
constructor(private stripeService: StripeService) {}
ngOnInit() {
this.elements = this.stripeService.elements();
this.elements.create('card').mount(this.cardElement.nativeElement);
}
}
注意:这是使用ngx-stripe库初始化Stripe Payment的示例代码。如果您使用不同的库,请根据该库提供的文档进行初始化。
注意:这是使用Stripe js的默认样式类“StripeElement”的示例代码。如果您选择了不同的主题,请根据所选的主题替换相应的样式类。