Skip to content
Search Articles/

less than a minute read • Updated a day ago

Set Up a Customer Portal

Enable the Customer Portal

  1. 1

    From the Foxy admin, go to Settings > Customer Portal.

  2. 2

    In the Allowed Origins section, specify an allowlist of domains where the portal is able to be utilized. Note that all domains have to begin with https:// except localhost, and when adding a primary domain, we recommend adding both the domain with and without the www. subdomain (for example, https://mydomain.com and https://www.mydomain.com). If you're adding a subdomain already (like https://customer.mydomain.com), then that doesn't need a www. prefixed version.

  3. 3

    Configure additional options as needed:

    • SSO (single sign-on) - enable this option if you want to allow customers who are logged in to the portal to be automatically logged in to your website (requires some additional configuration, see that below).

    • Customer registration - enable this option to allow customers to create a new account directly on the login form, as opposed to completing a purchase through the checkout.

    • Frequency changes for subscriptions - enabling this option allows customer to changes the frequency of their subscriptions. You can define rules for what options a customer can change a subscription too, depending what subscription it is.

    • Next payment date changes for subscriptions - if enabled, customers will be able to modify the next date of their subscription. This can be limited based on rules to restrict how far or to what days a customer can change the next date to.

    • Session lifespan - allows you to define how long a customer can remain logged in to the portal for before being automatically logged out.

    • JWT shared secret - this secret is used to sign the tokens returned as part of authenticating with the portal. Changing this secret will invalidate any active authenticated sessions on the customer portal. Unless you have specific needs here, you can let this value be set automatically.

  4. 4

    Click the Enable button.

Install the Customer Portal Element

  1. 1

    Create a page for where you would like the customer portal displayed (ex: Dashboard).

  2. 2

    In this new page, wherever you want the customer portal to load, copy/paste the snippet below:

    <foxy-customer-portal base="https://YOUR_FOXY_STORE.foxycart.com/s/customer/">
</foxy-customer-portal>
  3. 3

    Replace YOUR_FOXY_STORE with your Foxy store subdomain (or custom subdomain if configured).

  4. 4

    Before the closing </body> tag on the page, paste in the following code:

    <script type="module">
    import 'https://cdn-js.foxy.io/elements@1/foxy-customer-portal.js';
    const I18nElement = customElements.get('foxy-i18n');
    const i18nBase = 'https://cdn-js.foxy.io/elements@1/translations';
    I18nElement.onResourceFetch((ns, lang) => fetch(`${i18nBase}/${ns}/${lang}.json`));
</script>
  5. 5

    Save and/or publish the changes and test.

Giving customers access

To give customers access you can add a link to the customer portal page anywhere on your website. Only customers who created an account at checkout will be able to login. By default, customer accounts are enabled.

Styling the portal

The Foxy customer portal uses the Lumo Theme for styling and elements. You can make styling changes by following the instructions below:

  1. 1

    Load up the Lumo Theme Editor at https://demo.vaadin.com/lumo-editor/

  2. 2

    Make desired style changes.

  3. 3

    Click the download button.

  4. 4

    Copy the displayed snippet.

  5. 5

    In your Customer Portal Page Settings, paste the copied HTML into the <head> section of the page.

  6. 6

    Publish changes.

Single Sign On

If you wish to keep logged in customers for the customer portal, logged in on the Foxy checkout as well, you can follow the instructions below:

  1. 1

    In the Foxy admin, go to the advanced settings at https://admin.foxycart.com/admin.php?ThisAction=EditAdvancedFeatures

  2. 2

    In the store secret field, click Show.
    - If there is a single value in store secret, copy it out to the computer's clipboard.
    - If you see multiple name/value pairs, select the value between the quotes listed for sso and copy it.

  3. 3

    Go to the CyberChef website here.

  4. 4

    Replace "YOUR_SECRET_HERE" with the store secret you copied in Step 2.

  5. 5

    Copy the output value.

  6. 6

    Create a blank page in your site (the name and url of the page can be anything).

  7. 7

    Copy/paste the snippet from below to before the closing </body> section.

    <script>
        function parseJWT(token) {
        let base64Url = token.split('.')[1];
        let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
        let jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join(''));

        return JSON.parse(jsonPayload);
    }
    function getSSOUrl() {
        // Look for a cookie
        var value = "; " + document.cookie;
        var parts = value.split("; " + "fx.customer.sso" + "=");
        if (parts.length == 2) return decodeURIComponent(parts.pop().split(";").shift());

        // Look for localstorage
        try {
            let sessionStore = JSON.parse(localStorage.getItem('session'));
            if (sessionStore && sessionStore.hasOwnProperty('jwt')) {
                let sessionData = parseJWT(sessionStore.jwt);

                if (sessionData.exp > (Date.now() / 1000) && sessionData.hasOwnProperty('customer_id') && sessionStore.hasOwnProperty('sso')) {
                    return sessionStore.sso;
                }
            }
        } catch (error) {
            console.log("Error trying to get SSO URL:", error);
        }

        return false;
    }

    function getUrlParameter(name) {
        return new URLSearchParams(location.search).get('fcsid');
    }

    if (getSSOUrl()) {
        window.location.replace(getSSOUrl() + "&fcsid=" + getUrlParameter("fcsid"));
    } else {
        window.location.replace("https://FOXY_SUBDOMAIN/checkout?fc_customer_id=0&timestamp=1893456000&fc_auth_token=SECRET_OUTPUT&fcsid=" + getUrlParameter("fcsid"));
    }
</script>
  8. 8

    Replace "FOXY_SUBDOMAIN" with your Foxy subdomain, like mystore.foxycart.com or secure.mystore.com (found in your Settings here: https://admin.foxycart.com/admin.php?ThisAction=EditStore).

  9. 9

    Replace "SECRET_OUTPUT" with the output value from Step 5.

  10. 10

    Save changes.

  11. 11

    In Foxy, go to advanced settings here: https://admin.foxycart.com/admin.php?ThisAction=EditAdvancedFeatures.

  12. 12

    Enable the single sign on option.

  13. 13

    Paste the url of the new page you created into the single sign on url field.

  14. 14

    Save changes.

Test by logging into the customer portal, add a product to cart, and proceed to checkout. You should be logged in on the checkout page.
 

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.