Question

我的任务是建立一个具有以下要求的结帐页面：它必须使用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 ...这只会呈现空白的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>

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

Answer 1

这个...

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

...不起作用。您无法更改<iframe>内的任何DOM节点，因为它违反了同源策略。

您可以添加自己的表单，并使其在提交之前更改Paypal表单中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();
});

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

1 个答案: