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

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 and a functioning payment form. micro Example: , https://micro-stripe.twnsnd.co source for front-end , https://micro-stripe-api.twnsnd.co/ source for api Why Stripe Elements and Micro? Stripe 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. Elements is a slim server written in NodeJS: Micro Both applications we will deploy through Zeit’s service a command line tool. You will need a Zeit account, which shouldn’t take too much time to set up. Then, install the cli . Then run . For more on setting up now: . Now , npm install -g now now --login 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 request with our form containing a stripe charge and actually charge the card. Create an application folder like and make a second directory within that called : post token my-stripe-app api mkdir my-stripe-app && cd $_ mkdir api && cd $_ yarn inityard add dotenv micro stripe A little about our dependencies: is for our environment variables (stripe tokens) dotenv is our server micro handles handling charge tokens and creating charges and is the wrapper for the Stripe API. stripe Create a file called which is what Now will run by default. We’re going to import 2 modules from the package: and . lets our server a response and lets our server parse the data that we receive from our front-end application’s request. index.js micro send json Send send json json post The Post One of the required files here we don’t have yet : . That’s where most of our post request and server logic will live. Go ahead and create a file in the same directory ( ) as . post post.js /api) index.js In we’re exporting a function that accepts an input function. This bit is mostly built off of Romulo Alves’ but I needed a little bit more customization. We only want to accept and request and headers from our specified domain to keep things secure. We’re going to use a for this so we can change it on the fly. Post [micro-post](https://github.com/romuloalves/micro-post) get post cross-origin [secret](https://zeit.co/docs/features/env-and-secrets#config-files) 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 . We’re going to set this to something else in the future so you don’t need to have an exact domain now. now secret add STRIPE_ALLOW_DOMAIN 'your-domain-here.com' 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 . Run where the second value starting with is your full test secret key from your stripe dashboard. You can find this value at after you’ve logged in. Now now secret add STRIPE_SECRET_KEY sk_test_XXXXXX sk_test https://dashboard.stripe.com/account/apikeys Then create an file at the root of your directory. Here we want to add the aliases for the Stripe secret key as well as for the domain we want to allow. .env /api STRIPE_SECRET_KEY=@stripe_secret_keySTRIPE_ALLOW_DOMAIN=@stripe_allow_domain Run to deploy your api. Pay your domain a visit. You should see something like the following: now deploy --dotenv 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 which allows you to customize your inputs but reap the benefits of error checking and security. Stripe Elements 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. gist Create an directory in your folder, , and create an where you can copy the . We’re going to edit the javascript charge functions now that are in the tag at the bottom of the file. I’ve copied the script below: /app /my-stripe-app cd app index.html gist index.html Modifying the data collection script We need to do a few things to customize the charge. Change the to your own stripe public test key found at . stripe public test key https://dashboard.stripe.com/account/apikeys Replace the in the function to the one you’ve deployed API url createCharge Change the in the to your own. stripe public test key Authorization Bearer Change the to a charge of your choice. Stripe requires cents as the so whatever dollar charge you want * 100 will work. I chose , or $25, for this example. data amount 2500 Deploying the front end and tying it in to our API We don’t need any packages or special commands for this deploy! Run in the directory to deploy this app to its own url. automatically copies this url to your clipboard. , because we need it for the next step. now deploy /app Now Keep it there With the domain of your static site copied to your clipboard, run Make sure to paste your static site URL where I have Include the single quotes. now secret rm STRIPE_ALLOW_DOMAIN && now secret add STRIPE_ALLOW_DOMAIN 'your-deployed-domain.now.sh' your-deployed-domain.now.sh. Let’s double-check our keys. Run . You should see the terminal output with your secrets stored on . now secret ls Now This is the sort of output you should see. Head to your front end domain (mine is at ) and attempt a test! You can use the test credit card with any expiration date in the future, any security code, and any zip . Your test payments should appear in . I’ve also added an alert to make it painfully obvious that the service works. https://micro-stripe.twnsnd.co 4242 4242 4242 4242 your dashboard Questions? Build something awesome? Reach out to me on twitter , I’d be more than happy to help out or point you towards helpful documentation. @twnsndco