Table of Contents

Customer Portal

BETA Setup Instructions

Note that the customer portal is currently in public beta. Please complete this form to request access to have it enabled for your store before following the following steps.

Also note that our portal functionality requires modern browsers. This excludes IE11 and non-Chromium Edge.

Beta Instructions

You can see an example of our customer portal element on our website here.

A default install will look like this, noting that you need to update the YOUR_FOXY_STORE.foxycart.com to your correct Foxy store subdomain (or custom subdomain if configured):

	<foxy-customer-portal base="https://YOUR_FOXY_STORE.foxycart.com/s/customer/">
	</foxy-customer-portal>
 
	<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>

The CDN url's for the customer portal is set to the stable release and will update according to the @1 release tag. If you want to try the bleeding-edge beta releases, you can switch the URL's to use elements@beta instead of elements@1, but we don't recommend that for production situations.

If you are customising your instance of the customer portal such as adding custom elements or translations, we would recommend locking to a specific version of the portal instead of using the @1 release tag.

To do that, you would specify the specific release instead of @1, for example @1.28.0 in the two URL's from the code above. You can confirm the latest releases by viewing the releases on the Elements GitHub repository here, and also subscribe to that repository to get updates as they're released

If you really want to, it's also possible to use third-party CDN's, such as jsdeliver, though we recommend our own unless you have a compelling reason:

jsDeliver
https://cdn.jsdelivr.net/npm/@foxy.io/elements@1/dist/cdn/foxy-customer-portal.js
https://cdn.jsdelivr.net/npm/@foxy.io/elements@1/dist/cdn/translations

Styling

If you want to customise the styles of your portal to better match your branding, you can do that by including a style block after the script tag shown above. You can customize your styles at https://demo.vaadin.com/lumo-editor/.

The output from the lumo editor will look like this:

<custom-styles>
	<style>
	html {
	    --lumo-border-radius: 0.5em;
	    --lumo-shade-5pct: rgba(41, 41, 41, 0.05);
	    --lumo-shade-10pct: rgba(41, 41, 41, 0.1);
	    --lumo-shade-20pct: rgba(41, 41, 41, 0.2);
	    --lumo-shade-30pct: rgba(41, 41, 41, 0.3);
	    --lumo-shade-40pct: rgba(41, 41, 41, 0.4);
	    --lumo-shade-50pct: rgba(41, 41, 41, 0.5);
	    --lumo-shade-60pct: rgba(41, 41, 41, 0.6);
	    --lumo-shade-70pct: rgba(41, 41, 41, 0.7);
	    --lumo-shade-80pct: rgba(41, 41, 41, 0.8);
	    --lumo-shade-90pct: rgba(41, 41, 41, 0.9);
	    --lumo-shade: hsl(214, 0%, 16%);
	    --lumo-primary-text-color: rgb(83, 39, 94);
	    --lumo-primary-color-50pct: rgba(83, 39, 94, 0.5);
	    --lumo-primary-color-10pct: rgba(83, 39, 94, 0.1);
	    --lumo-primary-color: #53275E;
	    --lumo-body-text-color: hsl(214, 0%, 16%);
	    --lumo-secondary-text-color: hsl(214, 0%, 42%);
	    --lumo-tertiary-text-color: rgba(87, 87, 87, 0.5);
	    --lumo-disabled-text-color: rgba(173, 173, 173, 0.3);
	    --lumo-header-text-color: hsl(214, 0%, 16%);
	}
	</style>
</custom-styles>

Note that dark mode is not currently supported by the customer portal, and if you use the “advanced” options on the “typography” page, our elements don't utilise the “3X large” size.

If you want to include the styles in the head of your page, you can do that by changing the html style declaration to instead be targeting :root.

Languages

Languages are handled separately for the customer portal than for the cart/checkout/receipt, and so aren't managed via the Foxy administration. Instead, you can specify a lang attribute on the foxy-customer-portal HTML element. We currently support the following language codes: en, es, de, pl, zh-HK, se, nl, fr. As an example, to set your customer portal to French, it would look like this (with your store domain of course):

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

Customising language strings

If you need to adjust some individual language strings within your portal installation beyond our default strings, you can do that with some customisations to your portal page. There are two changes that need to be made, one to the HTML element, and then adding some additional javascript to define your customisations.

To the foxy-customer-portal HTML element, you will need to define a namespace ns element, with a value of my-portal customer-portal. (You can specify a different value than my-portal if you want, you'll just need to remember that in the next portion for the javascript.) That would make the HTML tag look like this:

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

Then in your javascript, you define lines for each language string you want to customise, specifically after this line in the existing javascript from the installation instructions above:

I18nElement.onResourceFetch((ns, lang) => fetch(`${i18nBase}/${ns}/${lang}.json`));

The javascript line to customise a language string takes the following format:

I18nElement.i18next.addResource('en', 'my-portal', 'STRING_IDENTIFIER', 'My New String');
  1. The first argument (en) is the language code that contains the string you're updating
  2. The second argument (my-portal) matches the custom namespace defined in the ns attribute
  3. The third argument (STRING_IDENTIFIER) matches the string that you're wanting to update from the language file (details on that below)
  4. The fourth argument (My New String) defines your own version of the language string that you want to use instead

To find the string identifier, you can reference the language strings for the customer portal element on the Github repository here. After opening the specific language you are replacing a string for, you will find all the strings in a JSON structure. By finding the language string there, you can then create the string identifier to match to it, which begins with customer-portal, followed by the nested object keys and the language string key, separated by periods.

For example, let's replace the “Get temporary password” language string to be “Forgot password?” instead. In the en language file, that string is located in this portion of the document:

  "sign-in-form": {
    "email": "Email",
    "invalid_credential_error": "Incorrect email or password. Please check your credentials and try again.",
    "password": "Password",
    "recover_access": "Get temporary password",
    "sign_in": "Sign in",
    "sign_in_hint": "Please enter your email and password",
    "sign_up": "Create account",
    "unknown_error": "An unknown error has occured. Please try again later.",
    "v8n_invalid_email": "Invalid email",
    "v8n_required": "Required",
    "spinner": {
      "loading_busy": "Loading",
      "loading_error": "Failed to load"
    }
  }

That would make the string identifier as customer-portal.sign-in-form.recover_access, and the line of javascript added into the customer portal page would look like this:

I18nElement.i18next.addResource('en', 'my-portal', 'customer-portal.sign-in-form.recover_access', 'Forgot Password?');

Note that some language strings are nested in multiple objects, so ensure you include each nested key to reach the desired language string in the identifier you use. As an example, the “Loading” string above would be customer-portal.sign-in-form.spinner.loading_busy.

You can include as many language customisations as you need, but each different string is a distinct line of javascript.

Advanced customisation

You can see additional demos and examples at elements.foxy.dev for configuration options and demo code.

Single Sign-On with the Customer Portal Session

Note: This functionality may become native in the future. For the time being, SSO between the portal and the checkout requires just a bit of extra setup.

If you're using SSO elsewhere in your site, be aware that enabling it in the portal bypasses your own endpoint. If you're only doing authentication, this is generally not a problem, but if you're doing other things with your SSO endpoint (like checking inventory, verifying cart contents, etc.), this will bypass that.

Standalone SSO with the Portal

This section is for if you're not using SSO elsewhere.

To ensure your customers don't need to login to the checkout after they've already logged into the portal, you can set up Foxy's SSO functionality following the steps below. If you're already using SSO, you'll want to approach this in a different way, depending on your other systems.

When you do a GET /s/customer?sso=true (which happens by default if you're using the normal portal functionality), it includes the ._links[“fx:checkout”].ref value, which is a URI that will load the checkout with your customer already logged in, and sets a cookie named fx.customer.sso. From there, you'll need to do the following:

  1. Login to the Foxy administration for your store, and go to the “advanced” setting page. Copy the “store secret” value - noting that if you're using the JSON approach to specify unique secrets for different features, that you get the value for the sso.
  2. Create a SSO URL for a guest (ie. customer_id=0). (You can use an online tool like CyberChef to generate a SHA1 hash of something like 0|1893456000|YOUR_SECRET_HERE, replacing YOUR_SECRET_HERE with the store secret you copied earlier.) Using that tool, you'll then copy the Output value to use as your fc_auth_token value.
  3. Create a new page on your website (at the same domain as the page that contains the <foxy-customer-portal /> element) with the following code. Replace YOUR_FOXY_DOMAIN with your store domain (like mystore.foxycart.com or secure.mystore.com), and the fc_auth_token=REPLACE_THIS bit with the SSO URL token from the above step. (NOTE: The below code includes the doctype, html, head, and body tags. If you're inserting this into an existing template, you just want to grab the <script /> block, and make sure the page is set to not be indexed by search engines. Also try to keep the page as small as possible - removing any extra CSS or javascript files you may be loading, to help the page load as quick as possible.)
    <!doctype html>
    <html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <title>SSO Redirect</title>
        <meta name="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
        <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://YOUR_FOXY_DOMAIN/checkout?fc_customer_id=0&timestamp=1893456000&fc_auth_token=REPLACE_THIS&fcsid=" + getUrlParameter("fcsid"));
            }
     
        </script>
    </head>
    <body></body>
    </html>
  4. Go to the “advanced settings” page in your Foxy admin, check the “enable single sign on”, then enter the URL of the page you created in the step above. (NOTE: This page must be publicly accessible.) Save the settings.
  5. Test this by logging into the portal, then proceeding to checkout. You should be logged into the checkout.

Incorporating the Customer Portal SSO with an Existing SSO Endpoint

If you've already got SSO enabled and configured on your Foxy store, you'll need to handle things separately. We can't give step-by-step instructions, as there are countless ways to handle SSO, but here are the general ideas:

Some Ideas and Best Practices

Loyalty Points

An often-requested feature (that we will likely add as a native feature, but it's not available yet) is the idea of “loyalty points” that can be redeemed or exchanged for discounts. Using the API and the customer portal functionality described on this page, you can whip something up. The idea is, roughly:

  1. Create custom code on your end that processes the Foxy webhook. According to your own logic, calculate the number of points that a transaction should generate. For instance, the product total less coupons. (So points would only be generated for the amount paid, excluding shipping and tax.)
  2. Check the attributes for the transaction and look for an attribute named Loyalty_Points_Applied_On. If it exists, you've already applied the points for this transaction, so exit.
  3. Retrieve the attributes for the customer record via the API. If a Loyalty_Points attribute exists, update the value accordingly. On success, add the Loyalty_Points_Applied_On attribute to the transaction, so you don't re-apply points if the webhook fires again. (If the Loyalty_Points attribute doesn't exist, create it and make sure the visibility is public, so it will be returned in the customer portal front-end.)

That gets you keeping track of points, and the public visibility ensures that your customers can see their points value when they login.

To allow customers to redeem their points, you'd need to add some logic to your portal and your backend custom code. It'd look like this, roughly:

  1. Customer clicks the button to redeem their points. Fires an AJAX request to your endpoint. (Use the JWT returned in the authenticate action to validate the request.)
  2. Your backend retrieves the customer's attributes via the Foxy API.
  3. If everything looks good, your backend creates a coupon code for a pre-existing coupon, and returns the code to the client. (You may also want to add this code as an attribute to the customer, for later retrieval.)
  4. Your portal javascript receives the coupon code, and applies it to the customer's session.

This is obviously a bit of work, and requires some more advanced programming knowledge. But hopefully it helps with some ideas of how you can use the Foxy backend API, paired with the front-end javascript portal API, to create more advanced functionality.

Building your own Customer Portal (Advanced)

Note that using the new /s/customer endpoint is a more advanced approach. If you're not sure if you actually need to use this, please contact us to discuss your needs, as you may want to just use our “ready to go” portal front-end detailed above instead of building your own.

Working with the New ''/s/customer'' endpoint

The new /s/customer endpoint is a bit different than the other public-facing endpoints in Foxy. Some notes:

Authenticating

POST /s/customer/authenticate

Retrieving a Customer

GET /s/customer

Modifying a Customer

PATCH /s/customer

Retrieving Transactions

GET /s/customer/transactions

Retrieving & Modifying Subscriptions

GET /s/customer/subscriptions

PATCH /s/customer/subscriptions/SUBSCRIPTION_ID