在Express应用中处理Stripe响应及页面格式化问题

看起来你已经搞定了Stripe的核心支付流程，接下来咱们一步步解决响应处理和页面格式化的问题：

1. 解析Stripe响应，返回友好提示 #

Stripe的charge对象里有很多关键字段可以用来判断支付状态，最核心的是charge.status，常见状态包括succeeded（支付成功）、failed（支付失败）、pending（待处理，比如某些银行授权）。咱们可以根据这个状态生成对应的友好提示，同时还能提取其他有用信息比如charge.id（支付凭证ID）给用户。

修改你的业务代码如下：

stripe.customers.create({ card: stripeToken })
  .then(customer => stripe.charges.create({
    amount: fee,
    description: "Client Ref: " + clientref,
    currency: "gbp",
    customer: customer.id,
    metadata: { 'allocation': allocate } // 注意去掉字段名里多余的冒号
  }))
  .then(charge => {
    // 根据charge状态生成对应提示内容
    let responseContent;
    switch(charge.status) {
      case 'succeeded':
        responseContent = {
          message: `支付成功！你的支付凭证ID是：${charge.id}`,
          status: 'success'
        };
        break;
      case 'failed':
        responseContent = {
          message: `支付失败：${charge.failure_message || '未知错误'}`,
          status: 'error'
        };
        break;
      case 'pending':
        responseContent = {
          message: `支付待处理，请稍后查看状态，支付凭证ID：${charge.id}`,
          status: 'pending'
        };
        break;
      default:
        responseContent = {
          message: `支付状态未知：${charge.status}`,
          status: 'unknown'
        };
    }
    // 调用HTML生成函数返回格式化页面
    sendHtmlResponse(response, responseContent);
  })
  .catch(err => {
    console.log("Error:", err);
    // 根据Stripe错误类型返回精准提示
    let errorMessage = "Purchase Failed";
    if (err.type === 'StripeCardError') {
      // 卡相关错误：余额不足、卡号无效、过期等
      errorMessage = err.message;
    } else if (err.type === 'StripeInvalidRequestError') {
      // 请求参数错误：金额格式不对、客户ID无效等
      errorMessage = "请求参数错误，请检查输入";
    }
    sendHtmlResponse(response, { message: errorMessage, status: 'error' });
  });

2. 将响应转为HTML格式 #

要让/charge页面显示格式化的HTML而不是纯文本，你可以写一个辅助函数来生成带样式的HTML内容，无需额外引入模板引擎：

// 生成HTML响应的辅助函数
function sendHtmlResponse(res, content) {
  let html = `
    <!DOCTYPE html>
    <html>
    <head>
      <title>支付结果</title>
      <style>
        .success { color: #2ecc71; font-size: 1.2em; }
        .error { color: #e74c3c; font-size: 1.2em; }
        .pending { color: #f39c12; font-size: 1.2em; }
        .container { max-width: 600px; margin: 40px auto; padding: 25px; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        h1 { text-align: center; color: #333; }
      </style>
    </head>
    <body>
      <div class="container">
        <h1>支付结果</h1>
        <p class="${content.status}">${content.message}</p>
        ${content.status === 'success' ? `<p>如需凭证，请记录此ID：<strong>${charge.id}</strong></p>` : ''}
      </div>
    </body>
    </html>
  `;
  res.send(html);
}

这个函数会根据支付状态生成带基础样式的页面，用户体验会比纯文本友好很多。

3. 覆盖更多异常场景 #

除了当前请求内的错误，还要注意两个关键场景：

• 拒付处理：拒付是支付成功后发生的，不会在当前请求中触发，你需要通过Stripe Webhook监听charge.dispute.created事件，收到通知后再通过邮件或站内信告知用户。
• 待处理支付更新：部分场景下支付会处于pending状态，你可以通过Webhook监听charge.succeeded事件，当状态更新为成功时再通知用户。

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