Python后端集成Duffel Payments(UMD模块)及支付函数实现求助

一、UMD模块引入与基础布局 #

直接在你的Flask模板HTML中添加以下内容：

<!-- 支付组件容器 -->
<div id="duffel-payment-element"></div>

<!-- 引入Duffel支付UMD脚本 -->
<script src="https://js.duffel.com/v1/payment-element.js"></script>

<script>
// 从Flask后端通过Jinja获取支付会话参数
const paymentIntentId = "{{ payment_intent_id }}";
const clientSecret = "{{ payment_intent_client_secret }}";
</script>

二、初始化支付组件与核心函数实现 #

在上述script标签中补充完整JS代码：

// 初始化Duffel支付组件
async function initDuffelPayment() {
  try {
    const paymentElement = window.DuffelPaymentElement.initialize({
      clientSecret: clientSecret,
      elementId: "duffel-payment-element",
      // 可选：自定义组件样式
      style: {
        base: {
          fontSize: "16px",
          color: "#32325d"
        }
      }
    });

    // 绑定支付提交事件
    document.getElementById("submit-payment-btn").addEventListener("click", async () => {
      await paymentElement.submit();
    });

    // 绑定支付状态回调
    paymentElement.on("success", successfulPaymentHandlerFn);
    paymentElement.on("error", errorPaymentFn);
  } catch (err) {
    console.error("支付组件初始化失败:", err);
    errorPaymentFn(err);
  }
}

// 1. 支付成功处理函数
function successfulPaymentHandlerFn(paymentIntent) {
  // 支付成功后的业务逻辑：跳转订单页、更新本地状态等
  console.log("支付成功，会话ID:", paymentIntent.id);
  
  // 示例：显示成功提示并跳转
  document.getElementById("payment-status").textContent = "支付成功！正在跳转订单确认页...";
  setTimeout(() => {
    window.location.href = `/order-confirm/${paymentIntent.id}`;
  }, 2000);
}

// 2. 支付错误处理函数
function errorPaymentFn(error) {
  // 错误处理逻辑：展示用户友好提示、重置组件
  console.error("支付错误详情:", error);
  
  // 示例：显示格式化错误信息
  const errorElement = document.getElementById("payment-error");
  errorElement.textContent = getFriendlyErrorMsg(error.code);
  errorElement.style.display = "block";
  
  // 重置支付组件状态
  window.DuffelPaymentElement.reset();
}

// 辅助函数：将错误码转为用户友好提示
function getFriendlyErrorMsg(code) {
  const errorMap = {
    "payment_intent_payment_failed": "支付失败，请检查银行卡信息或更换支付方式",
    "payment_intent_expired": "支付会话已过期，请重新发起支付",
    "invalid_client_secret": "支付会话无效，请刷新页面重试",
    "card_declined": "银行卡被拒绝，请联系发卡行或更换卡片"
  };
  return errorMap[code] || "支付出现未知错误，请稍后重试";
}

// 页面加载完成后初始化组件
document.addEventListener("DOMContentLoaded", initDuffelPayment);

三、补充页面元素 #

在HTML中添加支付提交按钮和状态展示区域：

<button id="submit-payment-btn" type="button" style="margin-top:16px;padding:10px 20px;">确认支付</button>
<div id="payment-status" style="margin-top:16px;"></div>
<div id="payment-error" style="color:red;margin-top:16px;display:none;"></div>

注意事项 #

• 确保Flask后端正确生成并传递payment_intent_id和clientSecret两个参数到模板
• 支付组件会自动处理银行卡敏感信息的加密与传输，无需手动处理卡号、CVV等数据

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