Wix SubscriptionFlow App

Contents

1. Onboarding - Account Setup
2. Adding Purchase Option as Variants in Products
3. Add Subscription Management Portal

1. Onboarding - Account Setup

On first install, complete a one-time onboarding flow that provisions your SubscriptionFlow workspace.

1.1 Accessing Onboarding

If onboarding is incomplete, you are redirected automatically when opening the app from Wix Dashboard.

1.2 Onboarding Form

• Company Name
• Full Name
• Email
• Password
• Currency
• Country

1.3 Submission and Provisioning

After submission, the system validates data, creates your workspace, generates the workspace domain, and provisions your environment.

1.4 Success Screen

• Workspace creation confirmation
• Your workspace URL
• Optional onboarding support call link
• Continue to dashboard action

---

2. Adding Purchase Option as Variants in Products

In Wix subscription functionality is implemented using a variant-based structure. This allows a single product to support both one-time and recurring purchase options.

2.1 Accessing Product Settings

1. Go to Wix Dashboard
2. Navigate to Store Products
3. Create a new product or edit an existing one
4. Scroll to the Product Options section

2.2 Creating Purchase Option

Add a new product option that will control purchase type selection:

• Option Name: Purchase Option
• Field Type: Text

This option allows customers to choose between one-time and subscription purchases directly on the product page.

2.3 Defining Subscription Variants

Add the following values:

• One-Time
• Every 2 Weeks
• Every Month
• Every 2 Months

Each value represents a different purchase type and will be used later to determine checkout behavior.

2.4 Generating Variants

1. Click Apply after adding options
2. Wix will automatically generate product variants

Each variant now represents a selectable purchase option for the customer.

2.5 SKU Configuration

Assign unique SKUs for tracking:

Variant	Example SKU
One-Time	ONE-TIME
Every 2 Weeks	2-WEEK
Every Month	1-MONTH
Every 2 Months	2-MONTH

2.6 Final Outcome

After completing this step:

• Products support both one-time and subscription purchases
• Variants are properly structured for detection
• Pricing is configured for subscription discounts
• System is ready for frontend and checkout integration

---

3. Add Subscription Management Portal

3.1 Add the HTML iFrame Widget

• In the page, drag and drop an HTML iframe element from the Embed section.
• Set the ID of the iframe to html1 (in properties panel).
• Paste the following HTML code into the widget:

HTML Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://yourwebsite.subscriptionflow.com/portalflow-inapp.js?v=1.0.3" data-sf-site="yourwebsite"> </script>
<div style="padding-top: 25px;">
<a id="manageAccountBtn" href="javascript:void(0)" data-sf-type="portal" data-sf-scale="full"
style="transition: all 0.2s ease, visibility 0s; padding-right: 16px; padding-left: 16px; width: 100%; color: #000; font-size: 50px; text-align: center; display: flex; justify-content: center;"> <span class="loader"></span> </a>
</div>
<script>
$(document).ready(function () {
const portalFlow = new window.PortalFlowInApp();
let sessionCreated = false;
window.addEventListener("message", (event) => {
try {
if (event.data && event.data.email) {
if (!sessionCreated) {
portalFlow.createPortalSession("YOUR-UUID-HERE", event.data.email);
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);
}
}
} catch (error) {
console.error("Error:", error);
}
});
});
</script>

Replace: Replace yourwebsite with your actual site code and YOUR-UUID-HERE with your SubscriptionFlow UUID.

3.2 Add the Page Code (Wix IDE)

Go to the Page Code Panel (via the </> icon or "Dev Mode"), then paste this in the page's backend:

Page Code (Wix Velo):

import wixUsers from 'wix-users';
$w.onReady(async function () {
if (wixUsers.currentUser.loggedIn) {
try {
const email = await wixUsers.currentUser.getEmail();
console.log("User email:", email);
// Send email to HTML widget
const $iframe = $w("#html1");
$iframe.postMessage({ email: email });
} catch (err) {
console.error("Failed to get email:", err);
}
} else {
await wixUsers.promptLogin();
}
});

3.3 Whitelist Domain in SubscriptionFlow

• Go to Portal Manager → In-App Portal → Whitelist URL.
• Add: https://yourwixsite.com
• Click Save.

---

Support

• Check Wix store and subscriptions documentation for platform-specific behavior.
• Contact SubscriptionFlow support from your app workspace for technical help.

---

WixSubscriptionsSubscriptionFlowMerchant Guide

End of document.

Back to top