SubscriptionFlow In-App Portal Integration (WooCommerce)

Purpose

The In-App Portal integration allows WooCommerce customers to manage their subscriptions directly on your website, without redirection to external portals. This guide explains how to configure the SubscriptionFlow In-App Portal step-by-step. 

Prerequisites

- SubscriptionFlow plugin is already installed & configured. 
- Client ID & Secret Key are already saved. 
- Domain is whitelisted in SubscriptionFlow. 
- WooCommerce is active. 

1. Navigate to Portal Manager

Login to your SubscriptionFlow Admin Panel. 
Go to Subscription-Flow → Customer Portal 
 

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 Script

Copy the header script provided: 
<script src="https://yourorg.subscriptionflow.com/portalflow-inapp.js" data-sf-site="yourorg"></script> 
Replace 'yourorg' with your actual SubscriptionFlow site code. 
 

4. Add the Script to WordPress Header

Place the script in your theme’s header.php before </head>. 
Or use a plugin like Header & Footer Scripts to inject site-wide.

5. Add the Manage Subscription Button

On the page where you want to show the portal, add this button: 
<a role="button" data-sf-type="portal" data-sf-display="popup">Manage My Subscription</a> 
This triggers the SubscriptionFlow Portal popup.

6. Create Portal Session for Logged-in Users

Add the following script to initialize the session: 
const portalFlow = new window.PortalFlowInApp(); 
portalFlow.createPortalSession('your-client-id', 'user@example.com'); 
Dynamically pass the logged-in WooCommerce user email. 
 
 
Example in PHP: 
<?php if ( is_user_logged_in() ) : ?> 
<script> 
const portalFlow = new window.PortalFlowInApp(); 
portalFlow.createPortalSession('your-client-id', '<?php echo wp_get_current_user()->user_email; ?>'); 
</script> 
<?php endif; ?>

7. Whitelist Domain in SubscriptionFlow

To ensure the In-App Portal functions correctly on your site: 
- Login to SubscriptionFlow Admin Panel. 
- Navigate to Portal Manager > In-App Portal > Whitelist URL. 
- Add your website domain (e.g., https://yourdomain.com). 
- Save the settings. 
 

8. Configure Webhook in SubscriptionFlow

Go to Settings → Webhooks → Add Webhook.

Set the following parameters: 
Webhook Name: e.g., "Create WooCommerce Customer". 
URL to notify: Enter the REST API endpoint of your WooCommerce site: 
https://yourdomain.com/wp-json/api/sf-create-update-user

Select Module and Event

• Module: Customers
• Event: Customer Created

Payload & Method

• Payload Type: Custom (recommended to control fields).
• Method: POST

Add URL Parameters

• You have to append entity parameters.
• Example:
  • Parameter Name: customer_id
  • Entity: Customers
  • Value Field: Id

Save the Webhook

• Click Save.
• SubscriptionFlow will now POST data to your WooCommerce site when a customer is created. 

9. Test In-App Portal

Login as a test WooCommerce customer. 
Click the Manage Subscription button. 
The SubscriptionFlow portal should open as a popup with your user details.

Additional Notes

- You can style the button using CSS to match your site theme. 
- This method keeps users on your domain while accessing SubscriptionFlow.