Динамически обновлять «сумму» на кнопке PayPal / iframe?

Question

Мне было поручено создать страницу оформления заказа с одним требованием: она должна использовать PayPal для оформления заказа.У меня проблема в том, что сумма полностью варьируется ... пользователь может выбрать сумму, которую он хочет приобрести (например, купить подарочный код за 100 фунтов стерлингов).

PayPal обычно отображает свои кнопки / рамки при загрузке страницыЭто означает, что сумма установлена.

<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>

Я думаю, что последним средством может быть добавление еще одной страницы ... пусть пользователь выберет сумму, а затем отправит ее на новую страницу, но предпочел бы избежать этого.

Answer 1

Это ...

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

... не будет работать.Вы не можете изменять любые узлы DOM внутри <iframe>, потому что это нарушает политику одного и того же происхождения.

Вы можете добавить свою собственную форму и изменить ее на значение subtotal в форме PayPal до ее отправки.:

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();
});