API Reference

Step-by-step guide on building customer portal

What you'll build

  • Storefront API Authentication
  • Enabling basic subscription actions for customers
  • Customizing the customer portal
  • Deploying the customer portal on your server

Step 1: Determine which authentication method to use

Before you start building the customer portal, you need to decide which authentication method to use based on where you're building the portal. The two options for fetching the access token depend on the type of customer portal you are building:

Custom Customer Portal (Outside Shopify Theme):
Use the JWT-based authentication to fetch the access token. This method is ideal if the customer portal is being built outside the Shopify theme (e.g., a custom website). You can authenticate users by exchanging a session token for an access token.

Shopify-Based Customer Portal:
If you are building the customer portal directly on a Shopify theme, use Shopify authentication to fetch the access token. This method works only for logged-in Shopify users and relies on Shopify's native authentication system.


Step 2: Implementing authentication for your Customer portal

JWT-based authentication (For Custom portals)

For custom-built portals outside the Shopify theme, you will authenticate users using a JSON Web Token (JWT).
Here’s the process:

Session Token: Generate the session token, which expires after 24 hour. This token can be generated using this Admin api endpoint.

Access Token: Exchange the session token for an access token (valid for 4 days) to authenticate API requests using this endpoint.

Refresh Token: Along with the access token, a refresh token is provided. Use this refresh token to renew the access token when it expi

Token Usage: Add the access token in the Authorization header of your API requests:

Authorization: Bearer \<access_token>

Use the refresh token to get a new access token once the old one expires using this endpoint.

For detailed instructions, refer to this detailed document.

Shopify Authentication (For Shopify Themes)

If the customer portal is being built directly within the Shopify theme, you can generate access token via Shopify authentication to simply the authentication process. Since this method utilises Shopify authentication, it will only work for customers already logged in via their Shopify account.

Fetch access token: Use the Shopify session to authenticate the customer. This method will allow you to fetch an access token for the logged-in Shopify user. If the customer isn't logged in or doesn't exist in Loop, you will receive a 401 Unauthorized error.

Authentication Endpoint:
POST /a/loop_subscriptions/storefront/auth/accessToken

Response example (200) :

A successful request will return an accessToken that you can use for subsequent API calls.
Example:

{  
  "success": true,  
  "message": "Access token generated successfully",  
  "data": {  
    "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyVHlwZSI6IkNVU1RPTUVSIiwidXNlcklkIjo2Mjg2NzE5Ny..."  
  }  
}

For detailed steps on Shopify-based authentication, refer to this document.

Step 3: Building the UI for Your Customer Portal

Once you've decided on the authentication method, the next step is to build the UI of your customer portal. The UI should be customer-friendly and intuitive, allowing users to manage their subscriptions and orders effortlessly. Here are the basic actions you should consider integrating into your customer portal:

1. Subscription management actions

Provide your customers with the ability to manage their subscription easily. The following subscription actions can be added:


2. Order management actions

Allow customers to manage their orders within the portal:

  • Add/Remove Discount: Offer the ability to apply or remove discounts on orders.
  • Order Now: Allow customers to place an order immediately for any of their subscribed items.
  • Modify order: Let customers view order history, scheduled order and modify their upcoming order, like delay order or skips order.

3. Cancellation flow integration

Integrate personalized Cancellation Flow to retain subscribers who may want to cancel their subscriptions. This includes:

  • Displaying subscription benefits to the subscribers.
  • Offering alternative action to the subscribers based on their selected cancellation reasons.
  • Offering tailored incentives or discounts to persuade the subscribers to stay.

4. Upsell section

Increase Average Order Value (AOV) by displaying personalized Upsell Section within the portal. You can promote related or complementary products to encourage customers to purchase more.


5. Update shipping address

Allow customers to easily update their shipping address for their subscription orders to ensure timely and accurate deliveries.


6. Upgrade actions

Integrate *Upgrade Actions* that let customers upgrade their current subscription for a better plan with higher quantity to increase customer LTV.


These are the essential actions we recommend to fully utilize Loop's features and run your subscription business like a pro. However, you can customize the customer portal by adding or removing actions based on their specific business requirements. The goal is to provide a seamless, customer-centric experience while maximizing subscription value.

With these features, your customer portal will allow the subscribers to manage subscriptions, drive upsell, retain subscribers, and enhance the overall customer experience.


Step 5: Deploying the Customer Portal and Ensuring Accessibility

Once the customer portal is built and fully configured, the final step is deployment. This includes making the portal accessible to your customers through your website.

  • Deploy the Portal: Ensure the portal is deployed on your chosen platform (Shopify theme or custom website). Ensure all necessary backend services and authentication systems are working smoothly.

  • Add Link to Website: Make the customer portal easily accessible by adding a prominent link or button to your website, such as in the navigation menu or the account section. This will enable customers to log in and manage their subscriptions effortlessly.

  • Test Accessibility: Before going live, thoroughly test the portal's functionality, including login, subscription management, upsell features, and cancellation flows to ensure everything works as expected.

If you have any questions or need assistance, feel free to email us at [email protected].