Accept payments on your site with NextJS, Stripe, and Micro

April 19th 2017 8,257 reads

@twnsndco
Cole Townsend

I often create small side projects where I’d like to charge for a single product. Rather than pay fees to use Plasso or Gumroad, you can make your own stripe server! In this tutorial, I walk you through how to add a payment form to your app or website. You will end up with a Stripe charge server built with Zeit’s micro and a functioning payment form.

Example:

Why Stripe Elements and Micro?

Stripe Elements is a series of drop-in UI components that handle sensitive card information. If you’re trying to collect payment info without using a third party service like Plasso or Gumroad, this is your best bet.

Micro is a slim server written in NodeJS:

Both applications we will deploy through Zeit’s service Now, a command line tool. You will need a Zeit account, which shouldn’t take too much time to set up. Then, install the cli npm install -g now. Then run now --login. For more on setting up now: https://zeit.co/now#get-started.

Getting started

First, we’re going to set up our stripe payment server. This is what where we will make a post request with our form containing a stripe charge token and actually charge the card. Create an application folder like my-stripe-app and make a second directory within that called api:

mkdir my-stripe-app && cd $_

mkdir api && cd $_

yarn inityard add dotenv micro stripe

A little about our dependencies:

dotenv is for our environment variables (stripe tokens)
micro is our server
stripe handles handling charge tokens and creating charges and is the wrapper for the Stripe API.

Create a file called index.js which is what Now will run by default. We’re going to import 2 modules from the micro package: send and json . Send lets our server send a response and json lets our server parse thejson data that we receive from our front-end application’s post request.

The Post

One of the required files here we don’t have yet :post. That’s where most of our post request and server logic will live. Go ahead and create a post.js file in the same directory (/api)) as index.js.

In Post we’re exporting a function that accepts an input function. This bit is mostly built off of Romulo Alves’ [micro-post](https://github.com/romuloalves/micro-post) but I needed a little bit more customization. We only want to accept get and post request and cross-origin headers from our specified domain to keep things secure. We’re going to use a [secret](https://zeit.co/docs/features/env-and-secrets#config-files) for this so we can change it on the fly.

Note: I’ve added the _GET_ method so we have some indicator that our server is running. You don’t need this.

In your command line, run now secret add STRIPE_ALLOW_DOMAIN 'your-domain-here.com' . We’re going to set this to something else in the future so you don’t need to have an exact domain now.

Note: you can set this to any origin with an asterisk _'*'_, but that is not advisable as it leaves the server vulnerable to XSS. Since this server only takes 2 requests and relies on Stripe it’s probably OK but only temporarily for testing purposes.

Deploy the `/api` with Now

We need some keys to interact with Stripe’s api. We’re going to store our secret key with Now. Run now secret add STRIPE_SECRET_KEY sk_test_XXXXXX where the second value starting with sk_test is your full test secret key from your stripe dashboard. You can find this value at https://dashboard.stripe.com/account/apikeys after you’ve logged in.

Then create an .env file at the root of your /api directory. Here we want to add the aliases for the Stripe secret key as well as for the domain we want to allow.

[email protected][email protected]_allow_domain

Run now deploy --dotenv to deploy your api. Pay your domain a visit. You should see something like the following:

https://micro-stripe-api.twnsnd.co

If you have any issues at this step, leave a comment or tweet me!

Creating the front end form

Stripe Elements library is pretty — https://micro-stripe.twnsnd.co/

Our front end will handle the form inputs and token creation. This example uses the brand new Stripe Elements which allows you to customize your inputs but reap the benefits of error checking and security.

For this part, I’ve mostly copied Stripe’s Element example. Instead of breaking down the front-end here I’m going to direct you to a that you can copy.

Create an /app directory in your /my-stripe-app folder, cd app, and create an index.html where you can copy the . We’re going to edit the javascript charge functions now that are in the <script> tag at the bottom of the index.html file. I’ve copied the script below:

Modifying the data collection script

We need to do a few things to customize the charge.

Change the stripe public test key to your own stripe public test key found at https://dashboard.stripe.com/account/apikeys.
Replace the API url in the createCharge function to the one you’ve deployed
Change the stripe public test key in the Authorization Bearer to your own.
Change the data to a charge of your choice. Stripe requires cents as the amount so whatever dollar charge you want * 100 will work. I chose 2500, or $25, for this example.

Deploying the front end and tying it in to our API

We don’t need any packages or special commands for this deploy! Run now deploy in the /app directory to deploy this app to its own url. Now automatically copies this url to your clipboard. Keep it there, because we need it for the next step.

With the domain of your static site copied to your clipboard, run now secret rm STRIPE_ALLOW_DOMAIN && now secret add STRIPE_ALLOW_DOMAIN 'your-deployed-domain.now.sh' Make sure to paste your static site URL where I have your-deployed-domain.now.sh. Include the single quotes.

Let’s double-check our keys. Run now secret ls. You should see the terminal output with your secrets stored on Now.

This is the sort of output you should see.

Head to your front end domain (mine is at https://micro-stripe.twnsnd.co) and attempt a test! You can use the test credit card 4242 4242 4242 4242 with any expiration date in the future, any security code, and any zip . Your test payments should appear in your dashboard. I’ve also added an alert to make it painfully obvious that the service works.