Stripe custom checkout not Posting

Question

Может ли кто-нибудь помочь в том, почему это не выставляется для бронирования/оплаты после завершения ввода в окно всплывающего окна?

Простой пример проверки сообщений хорошо, я новичок в js, поэтому я не совсем понимаю поток команд.

<form action="/booking/charge" method="post"> 
<script src="https://checkout.stripe.com/checkout.js"></script> 
<button id="customButton">Purchase</button> 
<script> 
var handler = StripeCheckout.configure({ 
    key: 'pk_test_xxxxxxxxxxx', 
    image: 'https://stripe.com/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. 
    } 
}); 

document.getElementById('customButton').addEventListener('click', function(e) { 
    // Open Checkout with further options: 
    handler.open({ 
    name: 'xxxx', 
    email: "test@test.com", 
    description: '2 widgets', 
    currency: 'gbp', 
    amount: 350 
    }); 
    e.preventDefault(); 
}); 

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

Answer 1

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

<script src="https://checkout.stripe.com/checkout.js"></script> 
<form id="myForm"> 
    <input type="hidden" id="message" value="Hello, world"/></p> 
    <input type="hidden" id="amount" value="10.00" /></p> 
    <p><button type="submit" id="customButton">Pay</button></p> 
</form> 
<script> 
// checkout handler 
var handler = StripeCheckout.configure({ 
    key: '<YOUR PUBLIC KEY>', 
    image: 'https://stripe.com/img/documentation/checkout/marketplace.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` 
     Pass along various parameters you get from the token response 
     and your form.*/      
     var myData = { 
       token: token.id, 
       email: token.email, 
       amount: Math.round($("#amount").val() * 100), 
       message: $("#message").val() 
     }; 
     /* Make an AJAX post request using JQuery, 
      change the first parameter to your charge script*/ 
     $.post("<YOUR ROUTE TO charge.php", myData,function (data) { 
      // if you get some results back update results 
      $("#myForm").hide(); 
      $(".results").html("Your charge was successful"); 
     }).fail(function() { 
      // if things fail, tell us 
      $(".results").html("I'm sorry something went wrong"); 
     }) 
    } 
}); 
$('#myForm').on('submit', function (e) { 
    // Open Checkout with further options 
    handler.open({ 
     name: 'Stripe.com', 
     email: 'test@test.com', 
     description: '2 widgets', 
     amount: Math.round($("#amount").val() * 100) 
    }); 
    e.preventDefault(); 
}); 
// Close Checkout on page navigation 
$(window).on('popstate', function() { 
    handler.close(); 
}); 
</script> 

Надежда это помочь кому-то, испытывая такой же выпуск.

Answer 2

Если вы используете обычную интеграцию Checkout, вам нужно сделать немного больше работы. Вы пишете свой собственный код для обработки маркера, возвращаемого Stripe. Все это делается в пределах token callback.

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

function (token) { 
    // Use the token to create the charge with a server-side script. 
    $("#stripeToken").val(token.id); 
    $("#stripeEmail").val(token.email); 
    $("#myForm").submit(); 
} 

Полный пример: https://jsfiddle.net/osrLsc8m/

В качестве альтернативы, вы можете отправить данные на ваш бэкэнда с просьбой AJAX.

function (token) {   
    var myData = { 
    token: token.id, 
    email: token.email 
    }; 

    /* 
    Make an AJAX post request using JQuery, 
    change the first parameter to your charge script 
    */ 
    $.post("/echo/html/",myData,function(data){ ... }); 
} 

Полный пример: http://jsfiddle.net/742tety5/