檢索令牌/創建費用 - Stripe

Question

這可能是一個愚蠢的問題，但我們開始了。 我已經設置了 Stripe Elements ( https://stripe.com/docs/elements ) 來收集信用卡信息，並對其進行標記。 現在我正在嘗試設置費用，但我不確定如何設置我的“服務器端”代碼。

在我的 controller.js 中提交表單：

function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment-form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);

// Submit the form
form.submit();
}

https://stripe.com/docs/charges ：“在您的服務器上，獲取表單提交的 POST 參數中的 Stripe 令牌。”

從我的 Nodecharge.js：

// Set your secret key: remember to change this to your live secret key in 
production
// See your keys here: https://dashboard.stripe.com/account/apikeys
var stripe = require("stripe")("sk_test_111111111111111111");

// Token is created using Stripe.js or Checkout!
// Get the payment token ID submitted by the form:
var token = request.body.stripeToken; // Using Express

// Charge the user's card:
stripe.charges.create({
amount: 1000,
currency: "sek",
description: "Example charge",
source: token,
}, function(err, charge) {
// asynchronously called
});

我的 HTML 表單：

<form action="/charge" method="post" id="payment-form">
    <div class="form-row">
      <label for="card-element">
      Credit or debit card
      </label>
        <div id="card-element">
        <!-- a Stripe Element will be inserted here. -->
        </div>

            <!-- Used to display form errors -->
            <div id="card-errors" role="alert"></div>
    </div>

    <button>Submit Payment</button>
</form>

使用測試卡提交付款后，我被重定向到 /charge 並顯示 404。我對此很陌生，顯然我已經復制/粘貼了一些代碼，但我正在努力解決它，並且我想了解它，而不僅僅是讓它發揮作用。 我有點了解信用卡信息檢索如何與 js 一起使用，但是當涉及到收費/重定向/404/時我有點困惑。
我的意思是，這條行動線將我指向一個不存在的頁面，對嗎？ 我需要創建這個頁面嗎？

 <form action="/charge" method="post" id="payment-form">

抱歉這篇文章的長度，請幫助我理解這里發生了什么，或者我需要修復什么。

感謝任何幫助。

Answer 1

你如何為你的后端服務——Express？

如果您在向/charge提交表單時看到404 ，則聽起來您可能沒有在 Express 中為/charge設置app.post路由。

您可以通讀路由指南以獲取更多詳細信息https://expressjs.com/en/guide/routing.html

如果您想查看一個簡單的工作示例，請查看此示例（確保將 pk_test 和 sk_test 替換為您的實際測試密鑰）：

var stripe = require("stripe")("sk_test_xxxyyyzzz");
var express = require('express'), bodyParser = require('body-parser');

var urlencodedParser = bodyParser.urlencoded({ extended: false })
var app = express();

app.get('/',function(req, res) {
  // for kicks, just sending checkout
  res.send('<form action="/charge" method="POST">Buy it !<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_xxxyyyyzzzz"></script></form>')
});

app.post('/charge',urlencodedParser, function(req, res) {

  // grab a token
  var token = req.body.stripeToken;

  // creating a charge, for real use add things like error handling
  stripe.charges.create({
  amount: 2000,
  currency: "usd",
  source: token, // obtained with Stripe.js
  description: "Charge"
  }, function(err, charge) {
    res.send("You made a charge: "+ charge.id);
  });
});

app.listen(5000)

Answer 2

要通過stripe創建源令牌，首先需要從stripe.com引用stripe.js，它必須來自stripe.com。

然后添加以下代碼以添加您的卡信息並生成令牌。

    var stripe = Stripe('Your stripe publisheable key');
      var elements = stripe.elements;



stripe.createToken(elements[0], additionalData).then(function (result) {
                example.classList.remove('submitting');

                if (result.token) {
                    // If we received a token, show the token ID.
                    example.querySelector('.token').innerText = result.token.id;
                    example.classList.add('submitted');
                }
Here, you will get a token, that will be necessary to create your customer. Use below code to create your customer. I used C#.NET

StripeConfiguration.SetApiKey("sk_test_JTJYT2SJCb3JjLQQ4I5ShDLD");

var options = new CustomerCreateOptions {
  Description = "Customer for jenny.rosen@example.com",
  SourceToken = "tok_amex"
};

var service = new CustomerService();
Customer customer = service.Create(options);

現在，您可以從您從 Stripe 獲得的卡令牌中從該用戶那里獲得所需的金額，如下所示：

StripeConfiguration.SetApiKey("sk_test_JTJYT2SJCb3JjLQQ4I5ShDLD");

var options = new ChargeCreateOptions {
    Amount = 2000,
    Currency = "aud",
    Description = "Charge for jenny.rosen@example.com",
    SourceId = "tok_amex" // obtained with Stripe.js, }; var service = new ChargeService();