대신 AJAX 요청을 보내도록 스트라이프 체크아웃을 수정하려면 어떻게 해야 합니까?

대신 AJAX 요청을 보내도록 스트라이프 체크아웃을 수정하려면 어떻게 해야 합니까?

Stripe and Checkout을 사용하여 결제 양식을 만들고 있으며, Checkout의 멋진 Javascript 라이브러리를 사용할 수 있기를 원하지만, 양식 제출을 일반 POST에서 AJAX POST로 변경하고 싶습니다.

그래서 저는 당신이 가져야 할 양식 요소에 핸들러를 추가하려고 했지만, 제 콘솔 라인이 트리거되지 않았기 때문에 주어진 양식을 사용하여 제출하지 않습니다.

그런 다음 오버레이가 트리거될 때 나타나는 코드를 조사해 보았습니다.좀 헷갈리고 그냥 다른 사람이 알아냈는지, 아니면 보안상의 문제라서 어렵게 된 건지 궁금합니다.

// Stripe plugin
<form id="payment_form" method='post' action="{{url_for('process_payment')}}">
        <script
            src="https://checkout.stripe.com/checkout.js" class="stripe-button"
            data-key="test key">
        </script>
</form>

// Form submit handler
$(document).ready(function(){
    $("#payment_form").submit(function(e) {
        console.log("Processing...");
        ajax_payment();
        return false;
    });

});

스트라이프가 폼을 트리거합니다.submit()기능.일반적인 POST 요청을 보내지 않도록 이벤트 처리기(수신기 아님!)를 설정할 수 있습니다.

일반 자바스크립트를 사용한 예:

var form = document.getElementById('myStripeForm');
form.submit = function() {
    // ... get form data here and send it through ajax

    // Prevent form submit.
    return false;
}

jQuery 사용 예:

$('#myStripeForm').get(0).submit = function() {
    var data = $(this).serializeArray();
    // process data and send ajax request

    $.ajax(...);

    // Prevent form submit.
    return false;
}

체크아웃 통합에는 두 가지 옵션이 있습니다. 첫 번째 옵션은 '단순' 통합입니다.두 번째는 성공 콜백('토큰' 기능)이 있는 맞춤형 통합입니다.다음과 같이 표시됩니다.

<script>
  var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    image: '/square-image.png',
    token: function(token, args) {
      // 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) {
    // Open Checkout with further options
    handler.open({
      name: 'Demo Site',
      description: '2 widgets ($20.00)',
      amount: 2000
    });
    e.preventDefault();
  });
</script>

당신은 당신의ajax_payment내부의 기능token기능.

이런 식으로 하시면 됩니다.이 예에서는 PHP를 사용하지만 원하는 서버 측 언어로 스왑합니다.

작성nocontent.php다음 행을 포함하는 파일:header("HTTP/1.0 204 No Content");놀랍게도 'HTTP/1.0204 콘텐츠 없음' 헤더를 반환합니다.브라우저는 이 페이지를 요청할 때 아무 것도 하지 않는 것으로 나타납니다.선택적으로 이 페이지가 POST 데이터를 처리하도록 하거나, 한 줄로 더미 페이지로 만들 수 있습니다.

HTML에 다음을 입력합니다.nocontent.php로의 경로<form술래잡기action속성 :<form action="nocontent.php".

자바스크립트 함수를 에 첨부합니다.window.onbeforeunload이벤트. 브라우저가 새 페이지를 요청할 때 이 이벤트가 트리거되어 브라우저가 아무것도 하지 않는 것처럼 보이더라도 실행됩니다.이 함수는 Stripe가 토큰을 생성한 후에 호출됩니다.

이제 양식에 다음이 포함됩니다.<input type="hidden" name="stripeToken" value="..."/>그리고.<input type="hidden" name="stripeEmail" value="..."/>요소들.

이제 양식의 POST 데이터를 처리한 시기에 따라 옵션을 선택할 수 있습니다.

• 만약 당신이nocontent.php페이지는 단순히 '콘텐츠 없음' 헤더를 반환합니다. 이제 AJAX는 양식의 데이터를 실제로 POST 데이터를 처리하고 Stripe의 상태 정보를 반환하는 다른 페이지(정상적으로)에 다시 제출할 수 있습니다.그것이 제가 선택한 길입니다.

• 만약 당신이nocontent.php페이지 자체가 양식의 POST 데이터를 처리합니다. Stripe 응답을 서버에 저장하고 Stripe에서 도착할 때마다 토큰을 Ajax 요청의 키로 사용하여 결제 상태를 검색할 수 있습니다.

Stripe가 양식 자체에서 제출 이벤트를 트리거하지 않도록 가로채는 것이 더 나은 방법일 수 있지만, 저는 그 방법으로 신뢰할 수 있는 성공을 거두지 못했습니다.

언급URL : https://stackoverflow.com/questions/21352630/how-can-i-modify-stripe-checkout-to-instead-send-an-ajax-request