Skip to content
Search Articles/

less than a minute read • Updated 4 days 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

SSO keeps a customer logged into the customer portal and Foxy checkout at the same time. When enabled, Foxy redirects customers to your SSO endpoint before they hit checkout, so you can log them in via your own auth provider.

  1. 1

    Go to Settings > General, find Store secrets, and copy the Universal store secret value (this is the same value used as your SSO secret)

  2. 2

    Go to CyberChef (the recipe is already set to SHA1)

  3. 3

    In the Input field, replace YOUR_SECRET_HERE in 0|1893456000|YOUR_SECRET_HERE with your Universal store secret. Leave the 0 and 1893456000 as they are.

  4. 4

    Copy the output value

  5. 5

    On your site, create a page with the snippet below before its closing </body> tag. The page's path is up to you — it becomes your SSO endpoint in step 3 below.

  6. 6

<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);
      let expires =
        Math.floor(new Date(sessionStore.date_created).getTime() / 1000) + sessionStore.expires_in;
      if (
        expires > Math.floor(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>

Then...

  1. 1

    Replace FOXY_SUBDOMAIN with your Foxy subdomain or custom domain (found under Settings > General)

  2. 2

    Replace SECRET_OUTPUT with the output value from step 4, then publish the page

  3. 3

    Go to Settings > Checkout, and under Advanced:

    • Turn on Enable SSO

    • Paste your page's URL into SSO endpoint

    • SSO secret is pulled from your Store secrets automatically — no need to re-enter it here

  4. 4

    Save changes

  5. 5

    Test by logging into the customer portal, adding a product to cart, and going to checkout. You should stay logged in.

Notes

  • The SSO endpoint can be any URL you control — it doesn't need a specific name or path, though /sso is a common convention


     

Need Help?

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