HTMLフォームから動的な支払い金額を受け取るようにストライプを設定しようとしています。この形式は、以下に示すcheckout.htmlページにある：チェックアウトページでstripeTokenとchargeAmountが未定義
<html>
<header>
<title>checkout</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>
</header>
<body>
<form id="myForm" action="/charge" method="post">
<input type="hidden" id="stripeToken" name="stripeToken" />
<input type="hidden" id="stripeEmail" name="stripeEmail" />
<input type="text" id="item1price" value="253">
<input type="text" id="item2price" value="167">
<button id="customButton">Purchase</button>
<script>
//change secret key later!
var handler = StripeCheckout.configure({
key: 'pk_test',
image: 'img/stripe.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.
$("#stripeToken").val(token.id);
$("#stripeEmail").val(token.email);
$("#myForm").submit();
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
//add up each price in array to get total cost
var total = 100;
// ...
//insert total variable into hidden html text field
function insertText(){
document.getElementById('chargeAmount').value = total;
}
insertText();
// Open Checkout with further options:
handler.open({
name: 'test company',
description: "test desc",
amount: total * 100
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
<input type="hidden" id="chargeAmount" name="chargeAmount" />
</form>
</body>
</html>
私はまた私のserver.jsにこのコードを持っている：
app.get('/pay', function (req, res) {
res.sendFile(__dirname + "/checkout.html");
});
app.get('/paysuccess', function (req, res) {
res.sendFile(__dirname + "/paySuccess.html");
});
app.post('/charge', function (req, res) {
var token = req.body.stripeToken;
console.log(token);
var chargeAmount = req.body.chargeAmount;
console.log(chargeAmount);
var charge = stripe.charges.create({
amount: chargeAmount,
currency: "usd",
source: token
}, function(err, charge){
if(err & err.type ==="StripeCardError"){
console.log("your card was declined.");
}
});
res.redirect('/paysuccess');
})
と私は/賃金をlocalhostにブラウズし、checkout.htmlショーアップ。私は価格のボックスに情報を入力し、フォームに入力された価格を合計して合計を返し、テスト支払いカード情報に入力してから、/ paysuccessページに移動します。しかし、コンソールは、chargeAmountとstripeTokenの両方が定義されていないと言います。私はそれらを/ charge関数に記録しておきます。私は、私が無関係であると思っていた独自のコードを取り出しましたが、req.body.stripeTokenとreq.body.chargeAmountで呼び出すとstripeTokenとchargeAmountがなぜ定義されていないのか、私のコードの誰かが知ることができますか？ありがとう。
EDIT - すべてのHTMLフォームを表示して、その値が何であるかを確認しました。ページの読み込み時にstripeTokenとstripeEmailの値は空ですが、テストカードでテスト支払いを完了すると、値が入力されます。私はエラーがHTMLフォームの値を取得するところにあると信じています。私はこの投稿を見た：https://stackoverflow.com/questions/41712850/stripe-js-resolve-cannot-read-property-stripetoken-of-undefined?rq=1と私のコードにその答えを追加しました。それはうまくいくように見えましたが、今はエラーがヌルであるというエラーに直面しています。
if(err & err.type ==="StripeCardError"){
^
TypeError: Cannot read property 'type' of null
問題の行は、server.jsの/ charge機能にあります。