Retrieve token/Create charge - Stripe

Question

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.

Answer 1

To create source token via stripe, first need to refer stripe.js from stripe.com and it must be from stripe.com.

And then add below code to add your card info and generate a token.

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

Now, you can get your required amount form this user from the card token you got from stripe like below:

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

Answer 2

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)