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](https://github.com/zeit/micro) and a functioning payment form.

#### Example:

*   [**https://micro-stripe.twnsnd.co**](https://micro-stripe.twnsnd.co/), [source for front-end](https://github.com/ColeTownsend/micro-stripe-charge-example)
*   [**https://micro-stripe-api.twnsnd.co/**](https://micro-stripe-api.twnsnd.co/), [source for api](https://github.com/ColeTownsend/micro-stripe-charge-example)

#### Why Stripe Elements and Micro?

Stripe [**Elements**](https://stripe.com/docs/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:

![](https://hackernoon.com/hn-images/1*xi75CfpFnWzgdu4jEX6uqQ.png)

Both applications we will deploy through Zeit’s service [**Now**](https://zeit.co/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](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 init  
yard 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 the`json` 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](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.

STRIPE\_SECRET\_KEY=@stripe\_secret\_key  
STRIPE\_ALLOW\_DOMAIN=@stripe\_allow\_domain

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

![](https://hackernoon.com/hn-images/1*6kmaSKoDmUzfMy2sGzxbyA.png)

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

If you have any issues at this step, leave a comment or [tweet me](https://twitter.com/twnsndco)!

### Creating the front end form

![](https://hackernoon.com/hn-images/1*hCElNJcbkaTJ9cRQu_NveQ.png)

Stripe Elements library is pretty — [https://micro-stripe.twnsnd.co/](https://micro-stripe.twnsnd.co/)

Our front end will handle the form inputs and token creation. This example uses the brand new [Stripe Elements](https://stripe.com/docs/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 [gist](https://gist.github.com/ColeTownsend/2c2dbc1be1ae660c35b23cc9de9828df) 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 [gist](https://gist.github.com/ColeTownsend/2c2dbc1be1ae660c35b23cc9de9828df). 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.

1.  Change the _stripe public test key_ to your own stripe public test key found at [https://dashboard.stripe.com/account/apikeys](https://dashboard.stripe.com/account/apikeys).
2.  Replace the _API url_ in the `createCharge` function to the one you’ve deployed
3.  Change the _stripe public test key_ in the `Authorization Bearer` to your own.
4.  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`.

![](https://hackernoon.com/hn-images/1*kjOTxY412l6oJgv7nDKByQ.png)

This is the sort of output you should see.

Head to your front end domain (mine is at [https://micro-stripe.twnsnd.co](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](https://dashboard.stripe.com/test/payments). I’ve also added an alert to make it painfully obvious that the service works.

![](https://hackernoon.com/hn-images/1*QFchJVRxAO7pdbIUgIti1Q.png)

### Questions? Build something awesome?

Reach out to me on twitter [@twnsndco](https://twitter.com/twnsndco), I’d be more than happy to help out or point you towards helpful documentation.

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

Too Long; Didn't Read

Companies Mentioned

@twnsndco

RELATED STORIES