如何使用Stripe、Angular、Node创建客户并添加信用卡信息？

核心注意事项 #

绝对不能在前端直接处理信用卡卡号、CVV等敏感数据，必须通过Stripe官方提供的Elements组件处理，生成安全的payment_method ID后再传给后端。

1. 后端（Node.js）代码 #

负责创建Stripe客户、附加支付方式：

首先安装依赖：

npm install stripe

创建客户并关联支付方式的代码：

const stripe = require('stripe')('sk_test_xxx'); // 替换为你的测试密钥

// 处理前端请求的接口
async function createCustomerWithPaymentMethod(req, res) {
  try {
    // 1. 创建Stripe客户，传入姓名、邮箱
    const customer = await stripe.customers.create({
      name: 'Juan Cheese',
      email: 'jcasas@gmail.com',
      description: '测试客户 - Juan Cheese'
    });

    // 2. 附加支付方式到客户（payment_method来自前端）
    await stripe.paymentMethods.attach(req.body.paymentMethodId, {
      customer: customer.id
    });

    // 3. 设置该支付方式为客户默认支付方式（可选）
    await stripe.customers.update(customer.id, {
      invoice_settings: {
        default_payment_method: req.body.paymentMethodId
      }
    });

    res.status(200).json({ customerId: customer.id });
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
}

2. 前端（Angular）代码 #

使用Stripe Elements收集支付信息，生成payment_method ID后传给后端：

步骤1：安装依赖 #

npm install @stripe/stripe-js @stripe/angular-stripe

步骤2：在AppModule中配置 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StripeModule } from '@stripe/angular-stripe';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StripeModule.forRoot('pk_test_xxx') // 替换为你的测试公钥
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

步骤3：组件代码 #

import { Component, OnInit } from '@angular/core';
import { StripeService, Elements, Element as StripeElement, ElementsOptions } from '@stripe/angular-stripe';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-payment-form',
  template: `
    <form (ngSubmit)="onSubmit()">
      <div id="card-element"></div>
      <div id="card-errors" role="alert"></div>
      <button type="submit" [disabled]="!stripeElement || !stripeElement.complete">
        保存支付信息
      </button>
    </form>
  `,
  styles: [`
    #card-element {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 15px 0;
    }
    #card-errors {
      color: red;
      margin: 10px 0;
    }
  `]
})
export class PaymentFormComponent implements OnInit {
  elements: Elements;
  stripeElement: StripeElement;
  elementsOptions: ElementsOptions = {
    locale: 'en'
  };

  constructor(private stripeService: StripeService, private http: HttpClient) { }

  ngOnInit(): void {
    this.stripeService.elements(this.elementsOptions)
      .subscribe(elements => {
        this.elements = elements;
        // 创建卡片元素
        this.stripeElement = this.elements.create('card', {
          style: {
            base: {
              fontSize: '16px'
            }
          }
        });
        this.stripeElement.mount('#card-element');
      });
  }

  async onSubmit() {
    try {
      // 创建支付方式
      const { error, paymentMethod } = await this.stripeService.createPaymentMethod({
        type: 'card',
        card: this.stripeElement,
        billing_details: {
          name: 'Juan Cheese' // 持卡人姓名
        }
      });

      if (error) {
        console.error(error.message);
        return;
      }

      // 把paymentMethod.id传给后端
      const response = await this.http.post('/api/create-customer', {
        paymentMethodId: paymentMethod.id
      }).toPromise();

      console.log('客户创建成功:', response);
    } catch (err) {
      console.error('提交失败:', err);
    }
  }
}

测试说明 #

你可以使用Stripe提供的测试卡号4242 4242 4242 4242，CVV231，有效期02/25进行测试，这些信息符合Stripe的测试环境要求。

内容的提问来源于stack exchange，提问作者user17281101