

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 api
:
mkdir my-stripe-app && cd $_
mkdir api && cd $_
yarn init
yard 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 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.
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
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
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
. 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.
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:
If you have any issues at this step, leave a comment or tweet me!
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 gist 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. 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:
We need to do a few things to customize the charge.
createCharge
function to the one youβve deployedAuthorization Bearer
to your own.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.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
.
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.
Create your free account to unlock your custom reading experience.