Integrating with Shopify
Pathfix allows you to easily add end-user OAuth based integration, handling authorization and enable communication between your app and Box in just a few minutes.
Before proceeding, you will first need to register your application with Box. Please refer the developer documentation provided by Box.
Shopify allows for apps to be installed in 2 ways:
- From your app interface (e.g. an Integration page in your app)
- Via their Marketplace
Please follow the below instructions for the installation method of your choice.
- Click on Apps from the left navigation and click on Create New App
- Select Create app manually on the right, give it a name and click Create
- From the next screen, copy the Client ID and Client Secret for use in your Pathfix configuration
We need to complete the setup in Pathfix and come back to Shopify to complete the configuration.
- Log in to your Pathfix account, select the Application and click on Shopify
- Add the copied Client ID and Client Secret in the configuration, modify the Scopes as per your requirement and hit Save
- Click on the Keys section on the left navigation bar and copy your Pathfix Public Key for use in the Shopify developer portal
We now need to complete the configuration in Shopify developer, navigate back to Shopify developer.
For illustration purposes, lets assume the following values as examples through this setup (please replace with values accordingly at your end)
Fields | Sample Values |
|---|---|
Pathfix Public Key | 1087AD7D-F7AF-48ED-9691-3209EC3A41FC |
Pathfix Private Key | C7DA8FFF-5AD6-4227-93D3-E2380E29E95Y |
Your App Domain | https://acme.com |
App Integration Page | https://acme.com/integration |
User's Shop Name | Betty's Market |
- Click on Configuration (under Build)
- Under App URL, enter the following as the App URL (replace the Public Key and your App domain):
- https://labs.pathfix.com/integrate/command?pfx_store=store.shopify.1087AD7D-F7AF-48ED-9691-3209EC3A41FC.pre&consented_redirect=https://acme.com
- Under Allowed redirect URL, enter the Pathfix redirect URL
- Save the changes, your setup is complete
When installing from Shopify marketplace, the Shop is pre-selected and a change in the App URL is needed. There are a few changes in the flow that needs to be considered when installing from the Shopify marketplace. Please follow the steps as shown exactly to avoid errors
For purpose of this flow, we will assume your app database looks something like this (notice the ID value and the PATHFIX_SHOPIFY_USER_ID, they are the same):
The Authorization/Auth process is initiated from your app via a Connect button placed on your Integration page.
The setup for this is standard, please follow the documentation for:
When the Auth process is initiated from the Shopify Marketplace, the setup is different as you do not need to put a Connect button in your app.
- Once you have published your app to the Marketplace, Shopify will ask your user to select a Shop to install the app into
- After the user selects the Shop they wish to install it to, Shopify will redirect the user to the URL specified in the App URL, that is configured above, with some additional encrypted information
- Pathfix has all the information to complete the authorization but there is no information regarding the user_id of acme.com that initiated the request. This is a key difference from the previous process.
- Pathfix completes the authorization and assigns a user_id itself when redirecting to https://acme.com.
- Post authorization, the URL looks something like this: https://acme.com?pathfix_user_id=shopify_cfcc1817-c53f-66ef-a090-c31ec0ef22e5
- Pathfix assigns a temporary user_id for the auth'd user as shown/highlighted in the url above as pathfix_user_id
- Your app has to store the pathfix_user_id against the user that subsequently logs in. e.g. image below
- Note now that the values for ID and the PATHFIX_SHOPIFY_USER_ID are different, this is how you will need to save the value returned from the querystring
- You can now make API calls for the connected user as shown in the Enable pass-through API documentation
- Instead of using the ID/Unique ID value, you will need to use the PATHFIX_SHOPIFY_USER_ID value instead for the user_id field
To add the integration to your Bubble app, please follow this documentation Bubble.io Setup
Need help? Reach out to us at [email protected] and we would be happy to assist!
