E-commerce is taking the internet by storms. We are seeing fast paced and exponential growth for e-commerce year on year. Shopify is one of the biggest names when it comes to e-commerce.

There are over 1,000,000 businesses in 175 different countries running on Shopify [Source]. As e-commerce on Shopify is growing rapidly so is the Shopify App Development.

There are over 7,000 public app on Shopify app store [Source: Shopify] and many more custom apps specifically designed for merchant stores.

Shopify is coming up with new technologies for app developers to help them develop apps more easily. You need to be familiar with one of the languages that is supported by Shopify tools in order to efficiently use them.

If you don’t want to depend on Shopify and take complete control of your app.

This article helps you understand what is required by an app dev to setup a Shopify app before they actually start working on the business logic

‍

Authentication Flow

Whenever a merchant installs a Shopify App, the developer needs to handle the complete flow of installation.

There are few terms that are needed in order to understand the flow:

App URL

• Whenever a merchant installs your app, Shopify makes a GET request to this URL and add some query parameters to this.

1. shop → This is the Shopify Shop URL. For ex: myshop.myshopify.com
2. hmac → HMAC that needs to be validated using your app’s API Secret Key and the query parameters

• Once you validate the HMAC, you need to redirect the merchant to permissions page
• permissions page → This is page where the merchant authorises the app to use the required resources. This looks like th

^{https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}&grant_options[]={access_mode}}

^{shop -> Shopify Shop URL
api_key -> App's API Key
scopes -> comma (,) separated access scopes => read_orders,read_customers
redirect_uri -> This is URL where Shopify will make a GET request once the merchant authorizes the permissions [See more info below]
nonce -> This is a string that is sent as a query param in redirect_uri so that you can verify that the request is valid
access_mode -> For online_access_mode, this value needs to be `per-user` and for offline_access_mode, this value needs to be `value`. Default access mode is offline_access_mode}

Allowed Redirection URL (s)

• When the merchant authorizes the above mentioned permissions. Shopify makes a GET call to this URL along with:

1. hmac
2. shop

• This is the redirect_uri that you mention in the above mentioned permissions page URL.
• An app can have multiple Allowed redirection URL(s) but when you send a redirect_uri in the permissions page URL. It has to match one of the URL mentioned here.
• When Shopify makes a GET call to your redirect_uri, this would mean that merchant has authorized the app and the app is now installed on the store
• You can add DB entry for the shop and take all the actions that you need to take when a merchant has installed the app now. These could be:

1. Add DB entry for the Shop
2. Send Email to Merchant
3. Notify your Customer Success team for a new Install

For more understanding of Shopify’s Auth Flow. You can check Shopify Doc for OAuth

Our users at SmoothCode are able to do all of the mentioned things in less than 1 minutes using our platform.

‍

Pricing Flow

Once you’re developing your app and you want to charge the merchants for using your app. You need to use Shopify’s Billing API in order to charge the merchants for using your App.

Shopify supports 3 types of Charges:

• One-Time Charge: When a merchant needs to pay once and use for lifetime
• Subscription or Recurring Charge: When a merchant subscribes and is charged monthly or annually
• Usage Based Charge: When a merchant is charged based on the usage of the app instead of a Flat fee

In order to charge merchants you need to use Shopify’s Billing

Whenever a merchant triggers an Plan Upgrade or Downgrade here’s how the flow works:

• The app needs to create a Charge at Shopify.
• Shopify returns a Confirmation URL in the response to Charge creation.
• Merchant needs to be redirected to the Confirmation URL. Confirmation Page consists of the following:
  

1. Plan Name
2. Details of the plan.
3. Bill details and an action to approve the plan

‍

‍

• Once merchant approves the plan. A call is made to your application again with the charge ID. This calls ensures that the merchant has upgraded/downgraded the plan
• This is the time you take plan based actions like:

1. Increase or decrease merchant’s features based on upgrade or downgrade
2. Notify your Customer Success team to get in touch with merchant
3. Update the attached plan to the merchant in your DB

Important Note for Recurring Plans:

• There can only be a single recurring plan activated for a merchant.
• If a merchant upgrades or downgrades the plan, older plan is automatically cancelled by Shopify.
• However, when you’re creating a charge, the amount needs to be greater than 0.
• In case a merchant is downgrading from a paid plan to a free plan. You can no longer create a charge for 0 amount and Shopify won’t cancel the existing plan.
• This is an edge case that needs handling where instead of creating new charge and letting Shopify cancel the active plan automatically.
• We need to cancel the active charge using Shopify’s API.

Our users at SmoothCode are able to create their plans with simple clicks in less than a minute and are able to make merchants upgrade or downgrade using our APIs: SmoothCode APIs

We also have the edge case covered where merchant needs to downgrade from a paid plan to a free plan.

‍

Webhook Registration

Sometime we need information from Shopify when some event happen. For eg:

• When an order is placed
• When inventory is updated
• Many more...

Instead of querying these information via Shopify’s APIs. We can register webhooks for certain events. Shopify will let us know when that event will happen along with the data associated with it.

Whenever an app is registering for a webhook for a certain shop event. It requires 2 things:

• Topic: Topic of the event for which you want to receive the webhook
• Endpoint: API endpoint where you’ll receive the POST request from Shopify when that event occurs along with that data.

You can check the list of Webhook topics from Shopify’s Webhook Resource

GDPR Webhooks

When you’re submitting an app to Shopify’s App Store. There are 3 mandatory webhooks that Shopify wants you to create:

• customers/data_request: You need to share the stored customer data with the Shop
• customers/redact: You need to delete the customer data for the given customer
• shop/redact: You need to delete the shop data

You need to complete these requests within 30 days.

Once you’ve added the endpoints for these webhooks. You need to add those endpoints in App Setup > GDPR mandatory webhooks

‍

Our users at SmoothCode are able to add webhooks by selecting a few checkboxes in under a minute. We also give a complete list for you to choose from so that you don’t have to roam around the documentation on which webhook is best suited for your requirements.

‍

Access Scope

Based on your app’s requirements, it might need access to certain resources.

• If you want order metrics and want order details, you need access for Reading the orders
• If you want to access products of a merchant, you need access for Reading the products
• If you want to add content on the store, you need access for Writing the content.

‍

All of these access scopes needs to be approved by the merchant during the installation process using the permissions page as stated above.

If your app needs to have more access once merchant has already installed your app, you need to redirect the merchant again to permissions page with all the access scopes (old and new) and get them to reauthorize your app.

‍

Things to keep in mind:

There are certain webhooks that requires read access to certain resources.

• If you register for Order Create event, then your app must have access to Read Orders
• If you register for Product Create event, then your app must have access to Read Products

While the relation of some of these webhooks with access scopes are pretty straight forward. Some are extremely complex. You need to make sure your app has access to those resources in order to register for those webhook events.

‍

Our users at SmoothCode are able to select access scopes using a few checkboxes and if they add new access scopes after the merchant has installed, SmoothCode automatically redirects to merchant to permissions page . SmoothCode also auto selects the related access scopes if you select a webhook for your app. All this you can do in under a minute without writing a single line of code.

We are open to Beta Users at SmoothCode. For our beta users, we help them from starting out on Shopify app development to getting their app submitted to the app store.

If you want to get a head start on writing your business logic without writing all the nuances to setup your Shopify app.

Head to our website: https://www.smoothcode.io

Join our Discord to get latest updates

‍