寻求PayPal Buy Now Pay Later与Squarespace集成代码，支持同页多定价

核心思路 #

通过PayPal智能支付按钮API，为每个度假产品创建独立的BNPL按钮实例，绑定对应价格与产品信息，无需为每个产品单独创建页面。

分步实现 #

1. 全局引入PayPal基础脚本 #

在Squarespace后台进入设置 > 高级 > 代码注入 > 页眉，添加以下代码（替换为你的PayPal商家客户端ID）：

<script src="https://www.paypal.com/sdk/js?client-id=你的PayPal客户端ID&components=buttons&enable-funding=paylater"></script>

这一步确保整个页面加载PayPal核心SDK，支持BNPL功能。

2. 为每个产品添加BNPL按钮容器 #

在页面每个度假产品的定价区域下方，插入Squarespace代码块或文本块，添加对应产品的容器HTML：

<!-- 产品1：示例价格$1299，产品名称"埃及Retreat单人套餐" -->
<div class="paypal-bnpl-button" data-price="1299" data-product="埃及Retreat单人套餐"></div>

<!-- 产品2：示例价格$1999，产品名称"埃及Retreat双人套餐" -->
<div class="paypal-bnpl-button" data-price="1999" data-product="埃及Retreat双人套餐"></div>

<!-- 按需复制上述代码，修改data-price和data-product值匹配每个产品 -->

用data-*属性存储每个产品的价格和名称，方便后续JS读取。

3. 添加按钮初始化脚本 #

在Squarespace的代码注入 > 页脚或产品区域的代码块末尾，添加以下JS代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有BNPL按钮容器
  const buttonContainers = document.querySelectorAll('.paypal-bnpl-button');
  
  buttonContainers.forEach(container => {
    const price = container.dataset.price;
    const productName = container.dataset.product;
    
    // 初始化PayPal BNPL按钮
    paypal.Buttons({
      style: {
        layout: 'vertical',
        color: 'gold',
        shape: 'rect',
        label: 'paylater' // 指定显示BNPL按钮样式
      },
      createOrder: function(data, actions) {
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: price
            },
            description: productName
          }]
        });
      },
      onApprove: function(data, actions) {
        return actions.order.capture().then(function(details) {
          // 支付成功后的逻辑，可替换为跳转感谢页或自定义提示
          alert('支付成功！订单ID：' + details.id);
          // 示例跳转：window.location.href = '/thank-you';
        });
      },
      onError: function(err) {
        // 处理支付错误
        console.error('PayPal支付错误:', err);
        alert('支付过程中出现错误，请稍后重试。');
      }
    }).render(container); // 将按钮渲染到对应产品容器
  });
});
</script>

4. 样式适配（可选） #

如果需要让按钮匹配现有页面风格，在设置 > 高级 > 自定义CSS中添加：

.paypal-bnpl-button {
  margin-top: 15px;
  width: 100%; /* 让按钮宽度适配产品区域 */
}

关键注意事项 #

• 务必替换client-id为你自己的PayPal商家客户端ID（在PayPal商家后台获取）
• data-price必须为纯数字格式（如1299代表$1299.00）
• 若需支持更多支付方式，可修改SDK链接中的enable-funding参数（例如添加venmo）
• Squarespace文本块嵌入JS时，确保使用代码块格式，避免代码被过滤

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