SubscriptionFlow In-App Portal Integration (Shopify)

Purpose:

The In-App Portal integration allows Shopify customers to manage their subscriptions directly within your store, without redirection to external portals. This guide explains how to configure the SubscriptionFlow In-App Portal step-by-step using a custom page template in Shopify.

Prerequisites:

• SubscriptionFlow is fully integrated with your Shopify store. 
• Your site domain is whitelisted in SubscriptionFlow. 
• You have the SubscriptionFlow Client UUID (used to initialize portal sessions). 
• jQuery is available in your Shopify theme (or will be loaded by the integration).

1. Navigate to SubscriptionFlow Portal Manager 

• Login to your SubscriptionFlow Admin Panel. 
• Go to SubscriptionFlow Administration Setting → Customer Portal. 
• Copy your unique site code and UUID for the portal script.

2. Make Auto Enable Portal Option to TRUE 

• Go to SubscriptionFlow Administration Setting → Preferences. 
• Preferences à Advance Setting à Auto Enable Portal (TRUE)  

3. Get the In-App Portal Scripts 

A. Go to Customer Portal -> In-App Portal 
Header Script: 
<script src="https://yourorg.subscriptionflow.com/portalflow-inapp.js" data-sf-site="yourorg"></script> 
Replace 'yourorg' with your actual SubscriptionFlow site code. 
 

B. Go to Customer Portal -> Single Sign-On 
Create Portal Session Script: 
const portalFlow = new window.PortalFlowInApp(); 
portalFlow.createPortalSession('your-client-id', 'user@example.com'); 
 

4. Create a Shopify Page Template 

• Go to Online Store > Themes in your Shopify admin. 
• Click Actions > Edit Code on your live theme. 
• Under the Templates folder, click Add a new template. 
Choose page and name it subscriptionflow. 
 
In the new `page.subscriptionflow.liquid` file add the above code that we copied in the step 2

Sample Code:   
{% extends 'page' %} 
{% block content %} 
 
<div id="customer-data" data-email="{{ customer.email }}"></div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script src="https://yourorg.subscriptionflow.com/portalflow-inapp.js" data-sf-site="yourorg"></script> 
<div style="padding-top: 25px;"> 
  <a id="manageAccountBtn" href="javascript:void(0)" data-sf-type="portal" data-sf-scale="full" style="display: flex; justify-content: center;"> 
    <span class="loader"></span> 
  </a> 
</div> 
<script> 
  $(document).ready(function () { 
    const portalFlow = new window.PortalFlowInApp(); 
    let sessionCreated = false; 
    let customerEmail = "{{ customer.email | escape }}" || localStorage.getItem('sfCustomerEmail') || ""; 
    if (customerEmail) { 
      localStorage.setItem('sfCustomerEmail', customerEmail); 
      portalFlow.createPortalSession('YOUR-UUID-HERE', customerEmail); 
      sessionCreated = true; 
      let checkButtonInterval = setInterval(() => { 
        let $btn = $("#manageAccountBtn"); 
        if ($btn.css("opacity") == "1" && $btn.css("pointer-events") == "auto") { 
          $btn.click(); 
          clearInterval(checkButtonInterval); 
        } 
      }, 500); 
      setTimeout(() => { 
        $("#manageAccountBtn").hide(); 
      }, 7000); 
    } 
  }); 
</script> 
{% endblock %}

5. Create a Shopify Page 

• Go to Online Store > Pages in Shopify admin. 
• Click Add page. 
• Enter a title (e.g., 'Manage Subscriptions'). 
• Under Theme template, select page.subscriptionflow. 
• Click Save.

6. Whitelist Domain in SubscriptionFlow 

• Go to Portal Manager > In-App Portal > Whitelist URL. 
• Add your Shopify domain (e.g., https://yourstore.myshopify.com). 
• Click Save.

7. Test the In-App Portal 

• Log in as a test customer. 
• Visit the page (e.g., /pages/manage-subscriptions). 
• The SubscriptionFlow portal should automatically load with customer data.

Additional Notes 

• The integration uses {{ customer.email }} from Shopify Liquid. 
• Customize the button and loader styles using CSS. 
• This method keeps users within your Shopify domain while using SubscriptionFlow.