动态更新 PayPal 按钮/iframe 上的“金额”？答案

【问题标题】：Dynamically update 'amount' on PayPal button/iframe?动态更新 PayPal 按钮/iframe 上的“金额”？
【发布时间】：2019-03-27 02:40:45
【问题描述】：

我的任务是构建一个结帐页面，其中有一个要求：它必须使用 PayPal 进行结帐。我遇到的问题是，金额是完全可变的......用户可以选择他们希望购买的金额（例如购买 100 英镑的礼品代码）。

PayPal 通常在页面加载时呈现其按钮/iframe，这意味着金额已设置。

<input type="hidden" name="subtotal" value="50"> <input type="hidden" name="currency_code" value="GBP">

当用户尝试付款时，价格将固定为 50 英镑

我需要能够更改此设置，以便用户输入的金额就是他们支付的金额。在我的结帐页面上，我有一个金额字段，用户可以在其中输入任何值...是否可以让 PayPal 接受这个值？

我已经尝试动态（使用 Javascript）更改 subtotal 输入的值，然后删除 iframe 并使用相同的数据创建一个新的...这只会呈现一个空白 iframe。

document.getElementById("paypal-iframe").setAttribute('value','25');

var elem = document.querySelector('#paypal-iframe');
elem.parentNode.removeChild(elem);

// create new iframe...

最初的 PayPal 代码如下所示：

<iframe name="hss_iframe" id="paypal-iframe" height="540px" width=100%" style="border: none; max-width: 100%; margin:0;padding:0"></iframe>
<form style="display:none" target="hss_iframe" name="form_iframe" method="post"
      action="https://securepayments.paypal.com/...">
    <input type="hidden" name="cmd" value="_hosted-payment">
    <input type="hidden" name="subtotal" value="50">
    <input type="hidden" name="currency_code" value="GBP">
    <input type="hidden" name="business" value="XXX">
    <input type="hidden" name="paymentaction" value="sale">
    <input type="hidden" name="template" value="mobile-iframe">
    <input type="hidden" name="solution_type" value="Sole">
</form>

我认为最后的手段可能是添加另一个页面...让用户选择数量，然后将其提交到新页面，但希望避免这种情况。

【问题讨论】：

标签： javascript php iframe paypal

【解决方案1】：

这...

document.getElementById("paypal-iframe").setAttribute('value','25');

...行不通。您不能更改 <iframe> 内的任何 DOM 节点，因为它违反了同源策略。

您可以添加自己的表单，并在提交之前更改贝宝表单中subtotal 的值：

HTML：

<input type="text" id="paypal-price">
<button id="donate">pay</button>

<iframe name="hss_iframe" id="paypal-iframe" height="540px" width=100%" style="border: none; max-width: 100%; margin:0;padding:0"></iframe>
<form style="display:none" target="hss_iframe" name="form_iframe" method="post"
      action="https://securepayments.paypal.com/...">
    <input type="hidden" name="cmd" value="_hosted-payment">
    <input type="hidden" name="subtotal" value="50">
    <input type="hidden" name="currency_code" value="GBP">
    <input type="hidden" name="business" value="XXX">
    <input type="hidden" name="paymentaction" value="sale">
    <input type="hidden" name="template" value="mobile-iframe">
    <input type="hidden" name="solution_type" value="Sole">
</form>

Javascript：

document.querySelector('button#pay').addEventListener('click', function() {
  document.querySelector('form[name="form_iframe"] input[name="subtotal"]').value = document.querySelector('input#paypal-price').value;
  document.querySelector('form[name="form_iframe"]').submit();
});

【讨论】：