ReCharge supports the usage of a special, expiring token as a way to strengthen a customer's account security.
When a user signs in to manage their account, a token will be generated, assigned to their account, and appened to the URL. This token will be used while they navigate through pages and make requests. If an attempt is made to access an account without either a token or using an unauthorized-token, the request will be denied and a redirect will occur to the login/token request page.
ReCharge will handle generating a token, emailing it, and verifying authorized tokens against the customer account. It will even perform redirects if an incorrect token is used.
However, in order to take advantage of this update, your customer portal theme must be updated to support it (as well as have it enabled).
By default, all theme engine users who had the Theme Engine enabled in 2020 and later will already have everything you need. You can confirm this by editing the base.html layout file and looking for the following line of code: window.location.href = '/tools/recurring/login'; -- if it exists, then your theme and store is ready to go and there's nothing else to do.
However, anyone who started in 2019 will need to perform 3 very easy, very quick updates to their portal theme.
In order to add support for the token, you need to edit 2 files: _scripts.js and base.html. Before you begin, we strongly advise that you first duplicate your theme and perform these updates there.
Important: ReCharge will need to enable token security on your account in order to take advantage of this update. When you've completed the updates, reach out to ReCharge so we can enable it for you.
Note: If you've dramatically customized _scripts.js or base.html, or not using either file, you'll want to use your best judgement when placing this code. Keep in mind, Javascript should load after your page has finished loading, and the update for base.html requires it be at the top of the page.
Start by editing the assets/_scripts.js file. We'll first search for code, then immediately replace it with the supplied block of code.
ReCharge.onLoad = function($) {ReCharge.onLoad = function($) {
// Set the token for AJAX calls
$.ajaxSetup({
beforeSend: function(jqXHR, settings) {
if (settings.url.indexOf("/tools/recurring") !== -1) {
settings.url += (settings.url.indexOf('?') === -1 ? '?' : '&') + 'token=' + window.customerToken;
}
}
});
// Update links with tokens
Array.prototype.slice.call(document.querySelectorAll('a'))
.forEach(function(el) {
var url = el.href;
if (url.indexOf("/tools/recurring") !== -1) {
el.href += (url.indexOf('?') === -1 ? '?' : '&') + 'token=' + window.customerToken;
}
});
// Update forms with tokens
Array.prototype.slice.call(document.querySelectorAll('form'))
.forEach(function(form) {
if (form.action && form.action.indexOf("/tools/recurring") !== -1) {
form.action += (form.action.indexOf('?') === -1 ? '?' : '&') + 'token=' + window.customerToken;
}
});
// Update inputs with tokens
Array.prototype.slice.call(document.querySelectorAll('input'))
.forEach(function(el) {
var url = el.value;
if (url.indexOf("/tools/recurring") !== -1) {
el.value += (url.indexOf('?') === -1 ? '?' : '&') + 'token=' + window.customerToken;
}
});
// Watch for DOM changes and apply tokens as necessary
if (MutationObserver && !!document.getElementById('#ReCharge')) {
var callback = function(mutationsList, observer) {
mutationsList
.filter(function(mutation) {
return mutation.type === 'childList';
}).forEach(function(mutation) {
Array.prototype.slice.call(mutation.addedNodes)
.filter(function(node) {
return node.tagName === 'A';
}).forEach(function(node) {
var url = node.href;
if (url.indexOf('/tools/recurring') !== -1) {
node.href += (url.indexOf('?') === -1 ? '?' : '&') + 'token=' + window.customerToken;
}
})
});
};
var observer = new MutationObserver(callback);
observer.observe(document.querySelector('#ReCharge'), {
attributes: false,
childList: true,
subtree: true
});
}First, locate the base.html layout file. Then, you'll want to copy and paste the following block of code at the top of the template.
<script>
function getToken() {
var value = new RegExp("[?&]token=([^&#]*)", "i").exec(window.location.href);
return value ? value[1] : '';
}
window.customerToken = getToken();
if (!window.customerToken) {
window.location.href = '/tools/recurring/login';
}
</script>Next, you'll need to add an ID tag to a content wrapper
<div class="page-width"><div id="ReCharge" class="page-width">Note: This is one of the most commonly altered lines of code, so it may be difficult to find. If that's the case, then you'll want to manually add id="ReCharge" to any HTML element that your theme uses to wrap the content block ({% block content %}{% endblock %}). If none exists, you'll need to add your own HTML wrapper around it.
As mentioned before, if you've had to perform the manual update, you'll need to reach out to ReCharge support to request that token security is enabled on your account. The code updates will need to be performed on your theme before we can enable it on your account.