检索令牌/创建费用 - 条纹

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创建源token，首先需要引用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);

现在，您可以从您从条带获得的卡令牌中从该用户那里获得所需的金额，如下所示：

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();