如何为PayPal按钮添加额外信息：尺寸描述与差异化运费设置

需求实现思路 #

要实现尺寸加入订单描述和按尺寸设置不同运费，需要通过JS动态同步选择的尺寸信息，更新PayPal表单的对应隐藏字段，同时修正原代码的拼写错误（quanity应为quantity）。

修改后的完整代码 #

<form id="for-sale-form" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin: 0px;">
    <input type="hidden" name="cmd" value="_cart">
    <input type="hidden" name="business" value="paypal@your-web-domain.com">
    <!-- 初始商品名称，后续通过JS追加尺寸 -->
    <input type="hidden" id="item_name" name="item_name" value="<?php echo $artwork; ?>">
    <input type="hidden" name="custom" value="">
    <input type="hidden" name="return" value="http://your-web-domain.com/thanks-payment.htm">
    <input type="hidden" name="no_note" value="1">
    <input type="hidden" name="currency_code" value="GBP">
    <!-- 修正拼写错误：quanity → quantity -->
    <input type="hidden" name="quantity" value="1">
    <input type="hidden" name="add" value="1">

    <!-- 下拉选择框添加id，每个选项存储尺寸、价格、运费数据 -->
    <select id="size-select" name="amount">
        <option data-size="Large" data-shipping="29.99" value="499.99">Large £499.99</option>
        <option data-size="Medium" data-shipping="9.99" value="49.99">Medium £49.99</option>
        <option data-size="Small" data-shipping="2.99" value="4.99">Small £4.99</option>
    </select><br>

    <!-- 隐藏字段存储运费，由JS动态更新 -->
    <input type="hidden" id="shipping" name="shipping" value="29.99">

    <input name="bn" type="hidden" value="PP-BuyNowBF">
    <input type="hidden" name="add" value="1">
    <input type="hidden" name="currency_code" value="GBP">
    <input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" alt="Add to Cart">
    <img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">
</form>

<script>
// 获取元素
const sizeSelect = document.getElementById('size-select');
const itemNameInput = document.getElementById('item_name');
const shippingInput = document.getElementById('shipping');
// 初始商品名称（不带尺寸）
const baseItemName = itemNameInput.value;

// 监听选择变化事件
sizeSelect.addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const selectedSize = selectedOption.dataset.size;
    const selectedShipping = selectedOption.dataset.shipping;

    // 更新商品名称：基础名称 + 尺寸
    itemNameInput.value = `${baseItemName} (${selectedSize})`;
    // 更新运费
    shippingInput.value = selectedShipping;
});

// 页面加载时触发一次，确保初始状态正确
sizeSelect.dispatchEvent(new Event('change'));
</script>

关键修改说明 #

• 修正拼写错误：将原代码中的quanity改为正确的quantity，避免PayPal识别订单数量时出错。
• 尺寸加入订单描述：给每个<option>添加data-size属性存储尺寸信息，通过JS监听选择事件，将尺寸追加到item_name字段中，PayPal订单的商品名称会显示为「商品名 (尺寸)」格式。
• 动态设置运费：给每个<option>添加data-shipping属性对应尺寸的运费，JS选择时自动更新shipping隐藏字段，PayPal会将该金额作为运费计入订单总额。
• 初始状态同步：页面加载时主动触发一次选择事件，确保默认选中选项对应的尺寸和运费设置正确。

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