检索令牌/创建费用 - 条带 [英] Retrieve token/Create charge - Stripe

问题描述

这可能是一个愚蠢的问题，但我们现在就走。
我设置了条纹元素（ https://stripe.com/docs/elements）收集信用卡信息，并对其进行确认。
现在我试图设置费用，但我不确定如何设置我的服务器端代码。

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

  function stripeTokenHandler （token）{
 //将令牌ID插入表单中，以便将其提交给服务器
 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）; 
 
 //提交表单
 form.submit（）; 
} 
  

https://stripe.com/docs/charges ：
在你的服务器上，抓住由表单提交的POST参数中的Stripe标记。

在我的Nodecharge.js中：

  //设置您的密钥：记住将其更改为您在
生产
中的实时密钥//在此处查看您的密钥：https://dashboard.stripe.com/account/apikeys 
 var stripe = require（stripe ）（ sk_test_111111111111111111）; 
 
 //使用Stripe.js或Checkout创建令牌！ 
 //获取表单提交的支付令牌ID：
 var token = request.body.stripeToken; //使用Express 
 
 //为用户卡充值：
 stripe.charges.create（{
金额：1000，
货币：sek，
描述：Example charge，
 source：token，
}，function（err，charge）{
 //异步调用
}）; 
  

我的HTML表单：

 < form action =/ chargemethod =postid =payment-form> 
< div class =form-row> 
< label for =card-element> 
信用卡或借记卡
< / label> 
< div id =card-element> 
<！ - 一个条纹元素将被插入此处。 - > 
< / div> 
 
 <！ - 用于显示表单错误 - > 
< div id =card-errorsrole =alert>< / div> 
< / div> 
 
<按钮>提交付款< /按钮> 
< / form> 
  

使用测试卡提交付款后，我将重定向到/收费404.
我对此很陌生，而且我显然已经复制/粘贴了一些代码，但我正在努力将自己的头围绕在它的周围，我想理解它，而不仅仅是让它工作。
我有点了解信用卡信息检索如何与js协同工作，但是当涉及到收费/重定向/ 404 /时，我有点困惑。


我的意思是，这个行动路线将我指向一个不存在的页面，对吧？我需要创建此页面吗？

 < form action =/ chargemethod =postid =payment - 形式> 
  

对不起，这篇文章的长度，请帮我理解一下是怎么回事在这里，或者我需要修复的东西。


感谢任何帮助。

解决方案

您如何为后端服务--- Express？

当您将表单提交给 / charge 时，如果您看到 404 / code>听起来您可能没有在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（）; 
 $ b $ app.get（'/'，function（req，res）{
 //对于踢球，只是发送结帐
 res.send（'< form action = / chargemethod =POST>购买它！< script src =https://checkout.stripe.com/checkout.jsclass =stripe-buttondata-key =pk_test_xxxyyyyzzzz><<<< ; / script>< / form>'）
}）; 
 $ b $ app.post（'/ charge'，urlencodedParser，function（req，res）{
 
 //获取令牌
 var token = req.body。 stripeToken; 
 
 //创建费用，用于实际使用添加错误处理等事情
 stripe.charges.create（{
 amount：2000，
 currency： usd，
 source：token，//通过Stripe.js获得
描述：Charge
}，function（err，charge）{
 res.send（You收取费用：+ charge.id）; 
}）; 
}）; 
 
 app.listen（5000）
  

This might be a stupid question but here we go. I've set up Stripe Elements (https://stripe.com/docs/elements) to collect credit card info, and tockenize it. Now I'm trying to set up charges, but I'm unsure of how to set up my "server-side" code.

Submitting the form in my 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: "On your server, grab the Stripe token in the POST parameters submitted by your form."

From my 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
});

My HTML-form:

<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>

Submitting a payment with the test card, I get redirected to /charge with a 404. I'm new to this, and I've obviously copy/pasted some code, but I'm trying hard to wrap my head around it, and I want to understand it, not just make it work. I kinda get how the credit card info retrieval works with js, but I'm a bit confused when it comes to the charging/redirecting/404/.
I mean, this action-line points me to a non-existing page on my end, right? Do I need to create this page?

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

Sorry for the length of this post, please help me understand what's going on here, or what I need to fix.

Appreciate any help.

解决方案

How are you serving your backend --- Express?

If you're seeing a 404 when you submit your form to /charge it sounds like you might not have a app.post route setup for /charge in Express.

You can read through the guide on routing for a little more detail https://expressjs.com/en/guide/routing.html

If you want to see a simple working example, take a look at this (make sure to replace the pk_test and sk_test with your actual test keys):

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)

这篇关于检索令牌/创建费用 - 条带的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！