настройка полосы с пользовательской суммой

Ответ 1

Используемый конкретный метод (простая, внедренная форма) не будет работать в направлении искомого конца. Вместо этого вы должны использовать более гибкую пользовательскую интеграцию, как показано в документах. Единственное, что не включено в приведенный пример, заключается в том, как подключить ввод количества, что совсем не сложно.

<input class="form-control"
       type="number"
       id="custom-donation-amount"
       placeholder="50.00"
       min="0"
       step="10.00"/>
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton ">Purchase</button>
<script>
  var handler = StripeCheckout.configure({
    key: 'pk_test_ppailxxxxxxxxxxxxxxxxxxx',
    image: '/square-image.png',
    token: function(token) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with 'token.id'
    }
  });

  document.getElementById('customButton').addEventListener('click', function(e) {
    // This line is the only real modification...
    var amount = $("#custom-donation-amount").val() * 100;
    handler.open({
      name: 'Demo Site',
      description: 'Some donation',
      // ... aside from this line where we use the value.
      amount: amount
    });
    e.preventDefault();
  });
</script>

Обратите внимание, что вам действительно нужно будет заполнить функцию token: переданную вызову StripeCheckout.configure. В частности, вам нужно либо отправить форму, либо запрос ajax и обработать это на своем сервере. Затем вы будете использовать эту информацию на сервере вместе с секретным ключом, чтобы отправить запрос на создание платежа на Stripe. В документации по Stripe содержится информация о том, какую информацию нужно будет отправить на вызов API, и, следовательно, какую информацию вам нужно передать для вызова API на вашем сервере. В частности, обратите внимание, что вам, вероятно, придется сделать некоторые дополнительные захват цен и т.д. В вашей функции token.

Ответ 2

Для этого вам понадобится еще один тег сценария, вы не можете использовать javascript в теге скрипта, у которого есть источник.

<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-image="images/button.png" data-key="pk_test_FTZOOu9FL0iYJXXXXXX" data-name="Fund" data-label="DONATE" data-description="ysysys" data-amount="0"></script>
<script type="text/javascript">
    $(function() {
        $('.donate-button').click(function(event) {
            var amount = $('#custom-donation-amount').val();        
            $('.stripe-button').attr('data-amount', amount)
        });
    });
</script>


<input type="number" id="custom-donation-amount" placeholder="50.00" min="0" step="10.00 " />

Ответ 3

В простой форме вы можете получить переменную сумму. Я не уверен, какие рамки вы используете, но я смог добиться этого в моем приложении Ruby (Padrino - not Rails), используя gon следующим образом. "charge_amount_pence" - это вспомогательный метод, возвращающий строку, представляющую собой заряд, который должен быть сделан. При необходимости, это может быть настроено на переменную, выбранную пользователем через запрос Ajax, например.

<script type="text/javascript">
    window.gon = {};
    gon.charge = charge_amount_pence;
</script>

И в скрипте проверки:

"data-amount" = gon.charge

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

Ответ 4

Как насчет создания нового элемента stripe? Это сработало для меня,

<script type="text/javascript">
    $(function() {
        $('.donate-button').click(function(event) {
            var holder = document.getElementById('aNewDiv');
            var script = document.createElement('script');
            script.src = 'https://checkout.stripe.com/checkout.js';
            script.setAttribute('class', 'stripe-button');
            script.setAttribute('data-amount', $('#Amount').val()*100);
            script.setAttribute('data-key',"pk_test_W0ML1BmfFMa6z3MgD90s7WeN");
            script.setAttribute('data-name', "Fund");
            script.setAttribute('data-description', "ysysys");
            script.setAttribute('data-locale', "auto");
        }
    }
</script>