Подсоединение пользовательской кнопки полосы к фоновому контенту

Question

Предположим, что у меня есть обычная реализация полосы, например.

<script src="https://checkout.stripe.com/checkout.js"></script> 

<button id="customButton">Purchase</button> 

<script> 
var handler = StripeCheckout.configure({ 
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh', 
    image: '/img/documentation/checkout/marketplace.png', 
    locale: 'auto', 
    token: function(token) { 
    // You can access the token ID with `token.id`. 
    // Get the token ID to your server-side code for use. 
    } 
}); 

$('#customButton').on('click', function(e) { 
    // Open Checkout with further options: 
    handler.open({ 
    name: 'Stripe.com', 
    description: '2 widgets', 
zipCode: true, 
    amount: 2000 
    }); 
    e.preventDefault(); 
}); 

// Close Checkout on page navigation: 
$(window).on('popstate', function() { 
    handler.close(); 
}); 
</script> 

У меня есть функция в заднем конце, который доступен по маршруту «/ заряд» и имеет тип PUT. Эта функция берет на себя плату и написана на PHP (laravel).

Раньше у меня была простая реализация, которая представила форму для маршрута/заряда, как это.

<form action="/charge" method="POST"> 
    <script 
    src="https://checkout.stripe.com/checkout.js" class="stripe-button" 
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh" 
    data-amount="2000" 
    data-name="Stripe.com" 
    data-description="2 widgets" 
    data-image="/img/documentation/checkout/marketplace.png" 
    data-locale="auto" 
data-zip-code=&quot;true&quot;> 
    </script> 
    </form> 

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

Причина, по которой я переключился на более сложный способ, заключалась в том, что я мог настроить кнопку «платить за карточку» с помощью CSS, чтобы выглядеть иначе.

Спасибо,

Answer 1

Вам просто нужно представить маркер в качестве параметра POST к вашему URL. Как правило, это делается путем отправки формы. Форма может уже существовать, или вы можете создать ее динамически. Например:

token: function(token) { 
    // Use the token to create the charge with a server-side script. 
    // You can access the token ID with `token.id` 
    var form = document.createElement("form"); 
    form.setAttribute('method', "post"); 
    form.setAttribute('action', "/charge"); 

    var input = document.createElement("input"); 
    input.setAttribute('type', "hidden"); 
    input.setAttribute('name', "stripeToken"); 
    input.setAttribute('value', token.id); 

    form.appendChild(input); 
    form.submit(); 
} 

Когда обратный вызов token выполняется, он динамически создает форму с /charge как его атрибут action, добавляет маркер ID как скрытый вход и отправляет форму.