ajax/jqueryを使用してdjangoにstripe.jsトークンを渡す

Question

私は初心者で、私のdjangoアプリケーションで支払いを処理するためのストライプを実装しています。

私はdj-stripeを使用しており、顧客を作成してこの設定でプランを追加できます。

stripe.jsを使用してトークンを作成したいので、ストライプ自体（https://stripe.com/docs/elements/examples）からきれいにフォーマットされたカード送信フォームを使用できます。私はdjangoフォームを使用してカードの詳細を収集することは望ましくありません。これらはレイアウト上で変更するのが難しく、私はセキュリティ上の観点から自分のdjangoアプリケーションでクレジットカードの詳細を処理したくありません。

私はストライプのjavascriptフォームを正常に動作させることができ、出力は「トークン」形式で出力されます。私はjavascriptの出力を私のdjangoアプリケーションに渡し、これを私の顧客にアタッチする必要があります。

これはjQuery/Ajaxの設定で発生するはずですが、私は初心者なので、どうやって始めたらよいか分かりません。私はthisを見つけましたが、それを私のニーズにどのように適応させるかはわかりません。

私の現在の設定では、payment.html Success! Your Stripe token is <span class="token"></span>がコード化されている出力トークンが出力されます。 、以前payment.htmlするために追加さが、下記payment.htmlには示されていない

私のjQueryの/ AJAXスクリプトの試み：私はこのようなjQueryのスクリプト内tokenを参照しようとしたが、tokenは私のブラウザ内でエラーcould not be readを得た

<script type="text/javascript"> 
$(document).ready(function() { 
    $.ajax({ 
     method: 'POST', 
     url: '/payments/settings/', 
     data: {'yourJavaScriptArrayKey': yourJavaScriptArray}, 
     success: function (data) { 
      //this gets called when server returns an OK response 
      alert("it worked!"); 
     }, 
     error: function (data) { 
      alert("it didnt work"); 
     } 
    }); 
}); 
</script> 

payment.html：

<style> some styles regarding layout of the js-form</style> 

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

<form> 
    <div class="group"> 
    <label> 
     <span>Name</span> 
     <input name="cardholder-name" class="field" placeholder="Jane Doe" /> 
    </label> 
    <label> 
     <span>Phone</span> 
     <input class="field" placeholder="(123) 456-7890" type="tel" /> 
    </label> 
    </div> 
    <div class="group"> 
    <label> 
     <span>Card</span> 
     <div id="card-element" class="field"></div> 
    </label> 
    </div> 
    <button type="submit">Add Card</button> 
    <div class="outcome"> 
    <div class="error" role="alert"></div> 
    <div class="success"> 
     Success! Your Stripe token is <span class="token"></span> 
    </div> 
    </div> 
</form> 

<script type="text/javascript"> 

var stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxxxxxxxx'); 
var elements = stripe.elements(); 

var card = elements.create('card', { 
    style: { 
    base: { 
     iconColor: '#666EE8', 
     color: '#31325F', 
     lineHeight: '40px', 
     fontWeight: 300, 
     fontFamily: '"Helvetica Neue", Helvetica, sans-serif', 
     fontSize: '15px', 

     '::placeholder': { 
     color: '#CFD7E0', 
     }, 
    }, 
    } 
}); 
card.mount('#card-element'); 

function setOutcome(result) { 
    var successElement = document.querySelector('.success'); 
    var errorElement = document.querySelector('.error'); 
    successElement.classList.remove('visible'); 
    errorElement.classList.remove('visible'); 

    if (result.token) { 
    // Use the token to create a charge or a customer 
    // https://stripe.com/docs/charges 
    successElement.querySelector('.token').textContent = result.token.id; 
    successElement.classList.add('visible'); 
    } else if (result.error) { 
    errorElement.textContent = result.error.message; 
    errorElement.classList.add('visible'); 
    } 
} 

card.on('change', function(event) { 
    setOutcome(event); 
}); 

document.querySelector('form').addEventListener('submit', function(e) { 
    e.preventDefault(); 
    var form = document.querySelector('form'); 
    var extraDetails = { 
    name: form.querySelector('input[name=cardholder-name]').value, 
    }; 
    stripe.createToken(card, extraDetails).then(setOutcome); 
}); 

</script> 
<script> 
// I am missing an AJAX/jQUERY script to pass the outcome of the javascript generated token 
</script> 

views.py

def payment(request): 
    template = get_template('payment.html') 
    context = { 

    } 
    # HERE THERE SHOULD BE SOME AJAX CALL 
    return HttpResponse(template.render(context,request)) 

私のAJAX/jQueryスクリプトは、payment.htmlの中にあるので、出力されたトークンにアクセスするにはどうすればいいですか？views.pyの中でこのトークンをどのように呼び出すことができますか？

Answer 1

まず、setOutcomeを2回、カードの変更イベントに1回、ストライプからトークンを取得しようとしたときにもう一度使用するのは嫌いです。これらを分割してください：

​​

サーバーレスポンスをJSONタイプのオブジェクトにします。あなたのdoCardCharge機能は、次のようになります。

function doCardCharge(stripeToken){ 
    $.ajax({ 
     type: 'post', 
     data: { 
      // Add any other fields you need to here 
      'name': $('input[name="cardholder-name"]').val(), 
      'stripeToken': stripeToken 
     }, 
     cache: false, 
     url: '/payments/settings/', 
     dataType: 'json', 
     success: function(data){ 
      if(data.server_errors){ 
       // There could be errors on the server 
      }else if(data.status == 'success'){ 
       // The charge was successful 
      }else if(data.errors){ 
       // There were validation errors 
      }else{ 
       // There was some unknown error 
      } 
     }, 
     error: function(){ 
      // There was some sort of network error, or error on the server 
     } 
    }); 
} 

そして、それはあなたがdata.server_errorsとしてそれらを表示したい場合は、エラーをキャッチするために出力バッファリングのいくつかの並べ替えを持っていることを前提としています。請求が成功した場合は、data.statusの値として「成功」を返します。サーバーがユーザーのアドレス= "2o3n5o2i3n5o2i"などの検証エラーを検出した場合、それらの値はdata.errorsの値に設定されているため、これらのエラーを処理しています。

また、ajaxレスポンスのdataTypeを宣言することに注意してください.jQueryはレスポンスのタイプをインテリジェントに推測しようとしますが、多くの場合、インテリジェントではないことがわかりました。

ジャンゴで

、あなたはあなたのビュー内のデータを掲載取得する必要がある場合、それを得る方法については、この点を確認してください。ジャンゴでDjango - taking values from POST request

は、あなたは非常に簡単にJSON型応答を設定することができます。このスタックオーバーフローページをご覧ください：Creating a JSON response using Django and Python

最後に、何が起こっているのか分からない場合は、開発者のコ​​ンソールのネットワークタブ（Webブラウザ内）を見ると便利な場合があります。それは生の応答を提供することが多いでしょう。