In this tutorial I will walk thru how you can sell eSIMs on your Shopify store with Make.com (Integromat). Make.com is a no code platform similar to Zapier, which lets you connect and exchange data between various apps.
If you want a ready built Shopify store and integration, learn more.
Getting Started
Here’s what we will cover:
- Importing eSIM products via CSV for Shopify
- Setting up a dummy payment gateway
- Getting the Make.com eSIM application and API keys
- Connecting and testing the Make scenario
- Making a complete purchase with email delivery of the eSIM
What’s needed
To complete this tutorial you’ll need a few things first:
- A US server Make.com account
- Installation of the eSIM app for Make ( Request a nocodekit API key )
- A public Shopify store or private developer account
- A funded eSIM Access account – (to make live but refundable purchases)
eSIM Access set up
You’ll need to create your eSIM Access account. Here is where you can source regional and local eSIMs. After you sign up, you can make a deposit of $10 to cover live eSIM purchases. Don’t worry, you can cancel uninstalled eSIMs and your balance refunded.
Shopify
Firstly we’ll make sure the store is set up and then do a product import and finally set up API key access for Make. You will be responsible for your theme, connecting payment gateways and other Shopify settings.
If you don’t have a live store, you’ll want to start with a Shopify development store.
Importing Products
In the Products section of admin view of the site, you can find the Import button at top left. This will open and allow you to upload a CSV file.
eSIM Access Shopify CSV file Nov 1, 2023
The eSIM Access CSV is current as of Nov 2023 and includes the following:
- Image Src: Country flag SVG image
- Variant Price: Includes 20% margin on top of our list price
- Cost per item: Is the list price as of Nov, 2023
- Published: Set to True ( change this if you’re not ready to share publicly)
- Status: Product set to Active status ( change this if you’re not ready to share publicly)
- Handle: Product named after country or region, using variations for the different plan sizes
- SKU: is the product Id that is required for order
You can change text and price fields at your discretion. The full CSV gives about 800 eSIM plans and took about 15 minutes to import.
Select the CSV file:
Preview of the Import:
Once imported you should have populated your product list to look like this:
Setting the dummy payment
You’ll need to set up the Bogus gateway to process payments in test mode.
In Checkout settings >> As a digital product, we can auto fulfill. Then we’ll archive the order after the eSIM is delivered.
Webhooks
Now it is time to set up a webhook for a paid order notification from Shopify to start the eSIM procurement process. More about the Make application for eSIM. Make.com also has a tutorial for Shopify connections.
First step is to create a brand new Make.com scenario. Scenarios are similar to Zaps in Zapier.
There are two ways for Make to learn of a new Shopify paid order. The first is with API request on a schedule. This involves pinging Shopify on a regular basis, looking for a new order. As Make charges for these operations, you will incur more cost with this method.
The second option is to sit back and wait for Shopify to push a New Payment notice to your webhook endpoint. Because it uses les resources, this is the method we will use. Keep in mind there are tradeoffs with both, and you might want to learn more about API request vs. webhooks.
We will create a Custom Webhook with a unique URL just for waiting on these Shopify orders. Once created and named, copy the unique make.com link and we’ll head back to Shopify.
In Shopify, go to Settings >> Notifications >> Webhooks
You’ll want to choose the Order Payment event, JSON and paste in your URL.
Once saved, you will be sending order payment notifications to Make.com. We need to make a test so that Make has some data to work with, so click the “Send test notification” button.
If it worked, the Make Webhook module will now say “Successfully determined”
If you view the logs of your new webhook, you will see a JSON payload of order data sent from Shopify. This will be what we work with to make an eSIM order.
Now it is time to add our next step, the eSIM order.
Make.com eSIM Access connector
Click the “+” in Favorites and search for the “eSIM” module. Add the eSIM connector app to the scenario.
You’ll need to set it up with your API key before using it. Give your connection a name and then add your NoCodeKit API Key ( if required ) and your eSIM API Key. Your eSIM API Key is found in your eSIM Access account. Copy the AccessCode.
Paste the key and save it to your eSIM Access connection
Your key will be saved and make orders against your eSIM Access account. If you have a balance already, you will be able to make orders, if your balance is low, you’ll want to add funds to continue.
Now it’s time to test the module. We fill in some manual data to create an order. Use any text for Transaction ID ( later this will be the Shopify ID variable), Number of eSIMs to order set to 1 and use a Package code of JC015 which corresponds to a Taiwan 1GB 7 Day eSIM which is less than $2. This will be a live order in your account, which you can refund.
If success, you’ll see a result giving an Output with an orderNo
Now time to map the variables. With the data we have from Shopify we are going to pull out 3 variables to make an order – ID, Quantity and SKU. For the Package field, be sure to turn on “Map” toggle. Click OK.
There are multiple ways approach the next steps. In this post I’ll show the a two part process for saving the order data for use in a second scenario. This is to be sure we only restart the eSIM delivery once we know the eSIM order is created and is ready for download.
The single step approach
Another, simpler one step approach is to use the Make > Tools > Sleep action and wait 30 seconds for eSIM creation to complete. In nearly all cases eSIMs are created in 30 seconds or less, but the 2 step method will make certain the eSIM is created before it is requested. A future guide will illustrate the single step approach, but for now this layout of the approach will have to do:
The two step approach continued
In the two step process, we need to persist the ID, order number and customer email using the built in Data Store module. Adding it we will just the “Add/replace a record” action.
We are going to save the Shopify ID and email to the data store. First we set up the data store structure. We just need to create two columns – shopifyId and email.
Then, we map the variables into the newly created data store. Since we made an order on step 2, we now have a Key, for which we are using the orderNo which comes from the eSIM orderNo. The shopifyId and email are mapped from the Shopify details of step one. Click OK, we are done.
In summary here is what what we have done in the first scenario.
Step 1. We are waiting for Shopify order to be sent to our webhook.
Step 2. We are passing the Shopify Order ID, Qty and SKU to eSIM Access to make an eSIM order.
Step 3. We are recording the eSIM Access orderNo, the Shopify order number and email for use in the next scenario.
The Second Scenario
Much like the first scenario, we are now waiting on the results of the eSIM order we have placed in step one. Once the eSIM order is ready, eSIM Access will send a webhook notification letting the scenario know it is time to start the second step. Usually time between scenarios will be 5-30 seconds from the time of order but it can take longer in case of a large que of eSIM orders ahead of yours.
Set up another webhook like in scenario 1, and this time we will copy and place the webhook URL in our eSIM access account.
After saving the webhook, we can now make another demo purchase using the console to trigger an eSIM purchase webhook notification.
TIP: You can also simulate a purchase, by turning the JSON payload of the webhook into a query string and append it to the end of the webhook URL. I used this online converter.
After the purchase, our eSIM webhook should now have received the notification and be ready for the next steps.
Now we can work with the payload data. We’ll want the Data store module to “Get Record” so we retrieve the Shopify details of the order. We’ll want to pass the orderNo again to pull up the Shopify details.
We can manually run it the first time pasting in our previously used order number.
If our output matches the Shopify order, we are ready for the next step, the Get eSIM action from the eSIM module. While there are a few options, you really only must pass the orderNo and set the page number / page size as shown. Firstly, we will manually pass the order number.
Now to retrieve our order by running the module.
If the running the module is successful, you’ll see the eSIM payload with the needed details for delivering the eSIM. If more than one eSIM was ordered the full output will be here. This tutorial only covers the case of single orders of eSIMs per time.
Once we have the data payload, we can put in the variable in Order Number.
Now we have everything we need to send out the eSIM to the customer. From here we can grab one of the email service providers or just use your Gmail and craft a mail that will deliver the eSIM to the client.
You can go beyond just the email sending and update the Shopify order with the eSIM details using the Shopify module. You’ll need to set up a Shopify API key via a Shopify app for this.
Scenario 2 summary:
Step 1: Catch the orderNo of a newly created eSIM
Step 2: Pull the email and Shopify order ID from the data store using the orderNo
Step 3: Retrieve the eSIM order details.
Step 4: Send those details to the customer via email
Make a test order
Now it is time to make a test order. Make sure both of your scenarios are turned on and saved.
Head to your Shopify store url for the test.
After your test purchase with your bogus Shopify gateway, both scenarios should fire. First a Shopify order is paid:
Then eSIM is created and the eSIM and Shopify order is retrieved:
Finally the email containing the eSIM is sent out:
Yeah!! Completed eSIM deliver process.
Even better email
For a more reliable Email Service Provider connect a Brevo account to the Brevo module and use this template for the following email:
There are many customization options that can be done on top of this basic process. Admin emails, Shopify updates, low balance notifications and more. The main point is with our Shopify no code integration, you can customize your eSIMs delivery process without the rigid nature of a plug-in.
Going further
While this process was for Shopify, you can use the same for Woocommerce, Wix, Sellix or just about any other modern ecommerce platform. As long as you can retrieve a “paid order” web hook or access the API, delivering the customer there eSIM is possible with the eSIM Application for Make.com
