How to automate payment for your e-commerce store
I'm back from my short haitus and I decided to write a build article on creating an e-commerce platform and automating your payment. So what are we covering in this build?
What we're building
We're building an e-commerce store for an imaginary small business that sells really cool beanies. I'm calling it Beanieville for lack of a better name. Beanieville sources for these cool beanies and then sells to their customers but right now they don't really have an online presence and sales are done on instagram.
This means countless dms, mixing up orders and having to send bank details and ask for proof of payment before processing orders. Nobody at Beanieville has the time or money for a web developer which is where we come in.
We're going to build an e-commerce store for Beanieville; a simple platform for them to show their products and accept payments. An extended part of this build is Beanieville confirming orders and then automating delivery but we'll look at that in another build maybe.
Toolstack
The tools we will be using are:
How it works
New products are added to the store through a form on Airtable, this sets off an automation in Make to create a payment link on Orchestrate and then update the record of that product accordingly. The details of the product show up on Softr, which is basically our frontend and how people interact with the site. When a customer visits the website and clicks on the Buy button, they are redirected to the product payment page on Orchestrate.
Checklist
This entire build took me roughly four hours but it should take you less if you're not working on other things at the same time. Here's our checklist to get started:
- Create a table in Airtable
- Set up the automation in Make
- Build out the website in Softr
Pretty straight forward, right?
Let's Build
Create a table in Airtable
Start by creating a table in Airtable. Add columns for the name of the product, description, price, country, picture, payment link and created time.
You can fill out a couple of rows with sample products so this helps when setting up Softr. Make sure to leave the payment links cells blank for the next step.
Set up the automation in Make
Now we need to set up an automation to generate a payment link and update the record everytime we add a new product to our table.
Sign in to Make and create a new scenario. We're going to be connecting Airtable first so search for it and select 'Watch Records' from the list of Triggers.
Next, connect your account on Airtable to Make. All you need is your API key which you can get on your account page on Airtable.
Paste that in and if it's the correct key you should see a couple of fields that appear.
Choose the appropriate base and table that you want to connect to. Select the created time column from your table as the trigger field and the product name column as the label field. Click OK to save and then run the scenario once. This helps you fetch a record that you can use to set up the next step of the automation.
Next thing to do is connect our Orchestrate account to Make so we can generate the payment links. There are no publicly available modules for Orchestrate on Make so I created a private module for my account but you can get the same results by making use of a HTTP module.
To use the HTTP module, search from the list of apps and then select the 'Make a request' action to run the API inside Make. Using the private module, I added my API key and that basically made the connection.
After making the connection, a couple of fields appear and this is where we map the values from our Airtable base. Map the product name to the payment link name, same goes for the description and country.
For the amount, map the value of the price from Airtable and then use the math operators to multiply the price value by 100.
We're doing this because when passing the amount in the API request, it should be in kobo but if you remember, in our table we wrote the price in Naira. And if you're thinking: why can't we do that on the table then? That's because we need the actual Naira value to show when we start building on Softr.
Save your progress and run the scenario once again to check that it actually works and the payment links are generated correctly. When you confirm that, it's time to move to the final part of the automation.
We want to update our record on Airtable with the newly generated payment link. Add another Airtable module and choose 'Update Records' from the list of actions. We're going to map values from the previous steps here as well.
Map the ID of the record from the first step to the field labelled Record ID.
And map the link url from the results of second step to the field labelled Payment Link.
Click OK, save your scenario and run it for the last time. If everything was set perfectly, you should have payment links added to the records in your Airtable base.
Build out the website in Softr
Create a new Softr account or sign in if you already have one. I started with a template, you can do this too or start from scratch. After duplicating a template or starting a new build, you'll be prompted to connect your Airtable account.
Copy your Airtable key and connect your accounts. Next, select the base that you would like to use for this particular website and complete the set up.
Ideally, whether you are starting from scratch or using a template, you should have a list block added. You can design it however you like but you'll need a list to display the products that were added on Airtable. Make sure you have the correct data source (Your Airtable base and table) linked to the list component.
Head over to the Features tab to match the related items fields in the list to columns on Airtable. For example, the fields here are are image, text, heading and a button. If you're following the structure of your Airtable base, you'll need an image field, 3 text fields and a button.
Softr allows you to customize these fields as you'd like. You can change font type, font weight and size, button color etc.
Match the image field to the picture on Airtable, the text fields should be for the product name, description and price. As you match them, your site would update to reflect the actual product on Airtable.
For the button, open the field item and select 'Add action'. Choose 'Open external url' from the pop up that appears.
When you do that, a drop down will appear, match the field for the external url to the payment link column on Airtable.
Customize and design your website however you like,add headers, footers and more pages if you like. When you are done, you can change the domain name under settings or add your own custom domain for free. Finally, click on Publish at the top right corner of your screen and that's it.
Testing
Now you can test your entire build from start to finish to be sure that it works. Make sure that your scenario on Make has been turned on. Go to Airtable and create a form view. Use that form to submit a new product to your base. The automation should instantly run, creating a payment link for your product and updating the record. You should now see that new product on your Softr site, when you click on it, you should get redirected to the unique payment page for the product.
Here's the final website that I built. I got all the pictures from Smiley Socks. The payment links are test links so feel free to check it out.
And that's all for this build. If you got this far, thank you and great job!.
If you liked this article, make sure to share it with someone.
Have any feedback, cool ideas or thoughts? You can tweet at me or send a dm.
Need help with the build or anything no-code related? Send me an email.