使用Angular和Stripe，我们可以扩展客户检索以获取Sources。源是存储在Stripe中的客户支付详情。

首先，需要安装Stripe JavaScript库：

npm install @types/stripe-v3 --save

接下来，我们需要在app.module.ts文件中添加以下引用：

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { HttpClientModule } from '@angular/common/http'; import { StripePaymentComponent } from './stripe-payment/stripe-payment.component'; import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({ imports: [BrowserModule, HttpClientModule, FormsModule, ReactiveFormsModule], declarations: [AppComponent, StripePaymentComponent], bootstrap: [AppComponent], }) export class AppModule {}

现在，我们可以为Stripe客户添加获取源代码的方法：

import { Component } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { StripeSource } from './stripe-source'; import { environment } from '../environments/environment';

@Component({ selector: 'app-stripe-payment', templateUrl: './stripe-payment.component.html', }) export class StripePaymentComponent { sources: Array = [];

constructor(private http: HttpClient) {}

getSources(token: string): void { this.http .get>(${environment.apiUrl}/customers/${token}/sources) .subscribe((sources) => { this.sources = sources; }); } }

在此示例中，我们从Stripe API获取客户源并将其存储在StripeSource数组中。我们需要为StripeSource模型创建一个接口，如下所示：

export interface StripeSource { object: string; id: string; country: string; client_secret: string; created: number; currency: string; livemode: boolean; metadata: { email: string; }; owner?: { address: { city: string; country: string; line1: string; line2: string; postal_code: string; state: string;