Not being good in UI design and usually spending way too much time tweaking things to make them look good, I was hoping to find something that would let me avoid that. Luckily, I did — I found a react-stripe-checkout component that works with React and gives you a nice UI like below:
Frontend is handled, now we need a backend to process the payments. Stripe gives you two type of keys — a publishable key (starting with
pk_)that you use in your frontend and a secret key (starting with
sk_) to be used in your backend to process the actual payment. There are two sets of these keys — one for testing and other one for production.
The react-express-stripe repo has an example implementation of a React frontend and backend to process the payments. Backend payment implementation is simple — you use the stripe package to create a new charge by passing in a JSON object like this:
Backend implementation seemed like a perfect candidate to be implemented as an Azure Functions, instead of another server-side Node that I have to manage.
You can do bunch of different things with Azure Functions, but in my case I only need a way to get the charge from frontend and use the Stripe server-side package to create a charge. Azure functions can be created both using a CLI or from the Azure portal — since this was a fairly simple function, I used a portal. With the CLI you can develop, test and debug your functions locally as well.
First, you need to create an Function App resource and provide a name for it — name if also part of the URL where you function will be accessible; no worries if you don’t like the name too much as you can provide your own custom domain as well.
Function app creation takes a minute or so and when it completes, you can open the Function apps dashboard:
Let’s start by creating a new function — click on the Functions item in the left side bar and then New Function link that shows up:
As you click on the template you’ll be given an option to name your function and then click Create button to create it and open the code editor. You can copy/paste the code below inside the function in the editor.
This code configures the Stripe package by passing in the secret key and then calls the
create function and passes in the body that was passed to the function. Body is the JSON object I mentioned above.
If you use the react-express-stripe example, you need to replace the value for the
frontend/src/constants with the function URL — you can get the function URL by clicking the Get Function URL button in the top right corner of the editor. The URL looks like this:
You also need to add the Stripe package to the project — this is accomplished by adding
package.json to the function and running
npm install from Kudu console. First off, adding a file to the function is as simple as clicking the View All files link on the right side of the editor and click Add to add the project. You can either create a new
package.json or just use the one from the example. The point is to have the Stripe package in there. Once you have the file, you need to go to the Kudu console to run
npm install in the function folder. You can access the Kudu console at
https://[FUNCTION_APP_NAME].scm.azurewebsites.net and selecting Debug Console->CMD from the drop down menu. Finally, go to the function folder (e.g.
home\site\wwwroot\[function_name] ) and run
npm install .
One last thing we need to do is to update the CORS and allow the function to be called from your own domain or even localhost (make sure you do this only for testing and not for production!).
To change the CORS settings on the Azure function, you can click the name of your Function app in the left sidebar, then click the Platform Features tab and under API, click CORS. The designer is self explanatory — just type or copy/paste the URL(s) you want allow.
You can fire up your frontend now and test the payment process. If you expand your function in the left sidebar and click Monitor, you can get the invocation log for your function. Alternatively, go to Stripe dashboard to see the payment there.