Angular+Django集成Stripe支付的技术疑问及配置困惑

场景说明 #

我正在开发一个前端基于Angular、后端基于Django的网站，需集成Stripe支付功能。后端通过Docker部署的微服务处理Stripe配置，该微服务支持两类请求：创建Stripe客户、创建支付。

已在Angular客户端完成Stripe配置，代码如下：

export class PaymentComponent implements OnInit {

  paymentHandler:any = null;

  constructor(private checkoutService: CheckoutService) { }

  ngOnInit() {
    this.invokeStripe();
  }
  
  initializePayment(amount: number) {
    const paymentHandler = (<any>window).StripeCheckout.configure({
      key: 'pk_test_51MKU1wDo0NxQ0glB5HRAxUsR9MsY24POw3YHwIXnoMyFRyJ3cAV6FaErUeuEiWkGuWgAOoB3ILWXTgHA1CE9LTFr00WOT5U5vJ',
      locale: 'auto',
      token: function (stripeToken: any) {
        console.log(stripeToken);
        alert('Stripe token generated!');
        paymentStripe(stripeToken);
      }
    });

    const paymentStripe = (stripeToken: any) => {
      this.checkoutService.makePayment(stripeToken).subscribe((data:any) => {
        console.log(data)
      })
    }
  
    paymentHandler.open({
      name: 'Card Details',
      description: 'Introduce the information from your card',
      amount: amount * 100
    });
  }
  
  invokeStripe() {
    if(!window.document.getElementById('stripe-script')) {
      const script = window.document.createElement("script");
      script.id = "stripe-script";
      script.type = "text/javascript";
      script.src = "https://checkout.stripe.com/checkout.js";
      script.onload = () => {
        this.paymentHandler = (<any>window).StripeCheckout.configure({
          key: 'pk_test_51MKU1wDo0NxQ0glB5HRAxUsR9MsY24POw3YHwIXnoMyFRyJ3cAV6FaErUeuEiWkGuWgAOoB3ILWXTgHA1CE9LTFr00WOT5U5vJ',
          locale: 'auto',
          token: function (stripeToken: any) {
            console.log(stripeToken)
            alert('Payment has been successfull!');
          }
        });
      }
      window.document.body.appendChild(script);
    }
  }

}

其中makePayment方法会向Django服务器发送Stripe Token，再由服务器调用上述微服务接口。

疑问解答 #

1. 既然只需调用微服务即可完成支付，为何还需服务器端配置？ #

• 安全刚需：Stripe的secret key绝对不能暴露在前端，微服务处理Stripe请求必须依赖该密钥，而密钥只能存放在后端服务中。Django作为业务后端，需要先做业务校验——比如验证用户是否有权发起支付、金额是否与订单匹配，防止前端篡改金额或恶意发起支付请求。
• 业务流程绑定：支付完成后，Django需要同步更新订单状态、生成支付记录，这些核心业务逻辑必须与支付动作强绑定，不能完全交由微服务独立处理，否则会导致业务数据脱节。
• 权限管控：Django可对请求做身份验证，确保只有合法用户能发起支付；微服务仅负责纯支付技术逻辑，不处理业务身份校验，职责更清晰。

2. Stripe Token应如何使用？ #

你前端拿到的Stripe Token是一次性支付凭证，它代表用户的银行卡信息（但不会暴露明文卡号），使用流程如下：

1. 前端将Token传给Django后端；
2. Django后端携带Token、支付金额、客户信息（如需创建客户）调用微服务的「创建支付」接口；
3. 微服务通过Stripe的secret key调用官方API，把Token作为支付来源，完成扣款操作。

• 注意：Token仅能使用一次，过期即失效，再次支付需重新生成新Token。

3. Webhook的概念及在当前场景中的用法？ #

Webhook是Stripe主动向你的服务发送的异步通知，用于告知支付的最终状态（如支付成功、失败、退款等）。因为前端或后端调用支付接口后，可能因网络延迟等原因无法及时获取最终结果，Webhook能确保你拿到最准确的支付状态。

在你的场景中：

• 配置Webhook接收地址到微服务（或Django后端，依架构设计而定）；
• 当Stripe完成支付、发生退款或支付失败时，会向该地址发送POST请求，携带事件详情；
• 你的服务收到通知后，同步更新订单状态、给用户发送通知、记录业务日志等；
• 关键：必须在后端验证Webhook签名，防止伪造的通知请求。

4. 是否必须使用Angular CLI进行全流程测试？原因是什么？ #

不是必须，但用Angular CLI测试更便捷，原因如下：

• 环境一致性：Angular CLI启动的开发服务器会模拟生产环境的静态资源加载、路由规则，能准确复现前端支付流程的真实场景，避免直接打开HTML文件出现跨域、资源加载失败等问题；
• 代理解决跨域：可通过Angular CLI的proxy.conf.json配置代理，将前端支付请求转发到Django后端，无需手动设置CORS或其他跨域方案；
• 热重载提升效率：修改前端代码后自动刷新页面，可快速测试支付流程的调整，大幅提升开发效率。

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