Stripe - Submit token/create charge through 1 HTML-button?

Question

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

This HTML-code, together with my controller.js is able to submit a token to Stripe. I also have a server.js written in Node.js, that successfully charges to Stripe:

// Get our dependencies
var stripe = require("stripe")("sk_test_111111111111111111111111");
var express = require('express'), bodyParser = require('body-parser');
var urlencodedParser = bodyParser.urlencoded({ extended: false })
var app = express();
var jwt = require('express-jwt');
var rsaValidation = require('auth0-api-jwt-rsa-validation');

//Implement charge endpoint 
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_111111111111111111111"></script></form>')
});

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

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

//Creating a charge
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)

Problem is, they work independently. If I localhost my website folder public (which also has the server.js located in public/subfolder) at port 7878, the Submit payment-button successfully submits a token with the Stripe test card info, but then redirects me to file:///D:/charge, with a 404-error.

Now if I run node server.js in cmd, and go to localhost:5000, then I can make a charge with the test card.
I want the button on my website to generate, and submit token (which it does), AND initiate the charge.

Feel free to elaborate on the API/HTML relationship, as I'm obviously confused.

floatingLomas floatingLomas · Accepted Answer · 2017-10-10T21:56:44

When you're serving the files up directly, you're not actually running a Node server, so there's no way for the /charge route to run.

In order for this to work, you'll need the server side Node code to run on a server - and be accessible to the HTML file for the <form> submission; that stuff can't be run client side - so you'll need to host that somewhere.

It doesn't necessarily need to be hosted the same place as the HTML, but it does need to be accessible from the web somewhere.

You might want to look at something like Heroku for hosting that part.

Stripe - Submit token/create charge through 1 HTML-button?

1 Answers