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.
- https://micro-stripe.twnsnd.co, source for front-end
- https://micro-stripe-api.twnsnd.co/, source for api
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.
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 $_
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
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 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 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 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!
Creating the front end form
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.
/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:
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
createChargefunction to the one you’ve deployed
- Change the stripe public test key in the
Authorization Bearerto your own.
- Change the
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.
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
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.
Questions? Build something awesome?
Reach out to me on twitter @twnsndco, I’d be more than happy to help out or point you towards helpful documentation.