Stripe / ngx-stripe:如何显示保存的付款方式

Stripe是一家全球领先的在线支付解决方案提供商，他们提供了一套强大的API和工具，可以帮助开发人员轻松集成支付功能到他们的应用程序中。

ngx-stripe是Stripe的官方Angular插件，它为开发人员提供了在Angular应用程序中使用Stripe API的便捷方式。ngx-stripe可以帮助开发人员轻松地添加信用卡支付功能、管理客户和订阅，并与Stripe的其他功能无缝集成。

要显示保存的付款方式，你可以使用ngx-stripe提供的相应方法和组件。首先，你需要获取当前用户的付款方式列表，然后在前端展示出来。以下是一个示例代码片段，用于显示保存的付款方式：

导入ngx-stripe模块和其他必要的Angular模块：

import { Component } from '@angular/core';
import { StripeService } from 'ngx-stripe';

@Component({
  selector: 'app-payment',
  templateUrl: './payment.component.html',
  styleUrls: ['./payment.component.css']
})
export class PaymentComponent {
  paymentMethods: any[];

  constructor(private stripeService: StripeService) { }

  ngOnInit() {
    this.getPaymentMethods();
  }

  getPaymentMethods() {
    this.stripeService.getPaymentMethods().subscribe((result) => {
      this.paymentMethods = result.data;
    });
  }
}

在HTML模板中，使用ngFor指令循环遍历付款方式列表并显示出来：

<div *ngFor="let paymentMethod of paymentMethods">
  <p>{{ paymentMethod.name }}</p>
  <p>{{ paymentMethod.cardNumber }}</p>
  <p>{{ paymentMethod.expiryDate }}</p>
  <!-- 显示其他付款方式的相关信息 -->
</div>

在这个示例中，我们调用了ngx-stripe提供的getPaymentMethods方法来获取保存的付款方式列表，并将结果赋值给paymentMethods属性。然后，我们使用ngFor指令在HTML模板中遍历paymentMethods数组，并显示每个付款方式的相关信息。

需要注意的是，上述代码仅为示例，实际应用中可能需要根据自己的业务需求做相应的修改和适配。

推荐的腾讯云相关产品：腾讯云支付、腾讯云数据库、腾讯云服务器、腾讯云网络安全、腾讯云音视频、腾讯云人工智能、腾讯云物联网、腾讯云移动开发、腾讯云存储、腾讯云区块链、腾讯云元宇宙。你可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。