如何为Braintree Drop-In UI的GooglePay和ApplePay实现动态定价

要实现套餐切换时更新Google Pay和Apple Pay的价格，核心思路是销毁当前Drop-In实例，再用新价格重新初始化——因为Braintree Drop-In初始化后无法直接修改已配置的支付参数。具体步骤如下：

1. 封装Drop-In初始化函数 #

把初始化逻辑抽成可复用的函数，接收当前选中的价格作为参数，这样每次切换套餐时都能传入新价格生成配置：

function initBraintreeDropIn(price) {
  // 先销毁已存在的Drop-In实例（如果有的话）
  if (window.dropinInstance) {
    window.dropinInstance.teardown(() => {
      // 销毁后再初始化新实例
      createNewDropIn(price);
    });
  } else {
    createNewDropIn(price);
  }
}

function createNewDropIn(price) {
  braintree.dropin.create({
    authorization: 'YOUR_CLIENT_TOKEN', // 替换成你的客户端token
    container: '#dropin-container',
    googlePay: {
      googlePayVersion: 2,
      merchantId: 'merchant-id-from-google',
      transactionInfo: {
        currencyCode: 'USD',
        totalPriceStatus: 'ESTIMATED',
        totalPrice: price // 使用传入的动态价格
      },
      allowedPaymentMethods: [{
        type: 'CARD',
        parameters: {
          billingAddressRequired: true,
          billingAddressParameters: {
            format: 'FULL'
          }
        }
      }]
    },
    applePay: {
      displayName: 'My Store',
      paymentRequest: {
        total: {
          label: 'My Store',
          amount: price // 使用传入的动态价格
        },
        requiredBillingContactFields: ["postalAddress"]
      }
    }
  }, (err, instance) => {
    if (err) {
      console.error('Drop-In初始化失败:', err);
      return;
    }
    window.dropinInstance = instance; // 保存实例到全局，方便后续销毁
  });
}

2. 监听套餐选择事件 #

给你的套餐选项（比如单选框、下拉菜单）添加change事件监听，获取选中套餐的价格，调用初始化函数更新Drop-In：

<!-- 示例套餐选项 -->
<div class="subscription-plans">
  <label>
    <input type="radio" name="plan" value="19.99" checked> 基础套餐 $19.99
  </label>
  <label>
    <input type="radio" name="plan" value="29.99"> 高级套餐 $29.99
  </label>
  <label>
    <input type="radio" name="plan" value="49.99"> 尊享套餐 $49.99
  </label>
</div>

<div id="dropin-container"></div>

// 初始化页面时加载默认价格的Drop-In
initBraintreeDropIn('19.99');

// 监听套餐选择变化
document.querySelectorAll('input[name="plan"]').forEach(radio => {
  radio.addEventListener('change', function() {
    const selectedPrice = this.value;
    initBraintreeDropIn(selectedPrice);
  });
});

注意事项 #

• 确保authorization（客户端token）是有效的，若使用订阅模式，可能需要根据套餐生成对应的token，或者后端支持动态价格验证。
• totalPriceStatus设为ESTIMATED是合理的，因为价格是用户选择套餐后确定的，符合Google Pay的规范。
• 销毁Drop-In时要使用teardown方法，确保清理之前的DOM和事件监听，避免内存泄漏。

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