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.
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.
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
mkdir my-stripe-app && cd $_
mkdir api && cd $_
yarn inityard add dotenv micro stripe
A little about our dependencies:
Create a file called
index.js which is what Now will run by default. We’re going to import 2 modules from the
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
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 (
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
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.
We need some keys to interact with Stripe’s api. We’re going to store our secret key with
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.
now deploy --dotenv to deploy your api. Pay your domain a visit. You should see something like the following:
If you have any issues at this step, leave a comment or tweet me!
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.
/app directory in your
cd app, and create an
<script> tag at the bottom of the
index.html file. I’ve copied the script below:
We need to do a few things to customize the charge.
createChargefunction to the one you’ve deployed
Authorization Bearerto your own.
datato a charge of your choice. Stripe requires cents as the
amountso whatever dollar charge you want * 100 will work. I chose
2500, or $25, for this example.
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
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.
Reach out to me on twitter @twnsndco, I’d be more than happy to help out or point you towards helpful documentation.