You are able to set custom variables with the following function:
tp.setCustomVariable()
The variable name needs to be passed as the argument, so if you'd like to set a custom variable called host with the value demo.piano.io, the function's argument would look like this:
tp.setCustomVariable("host","demo.piano.io")
The custom variable has to be set on each page load, before running the Experience and cannot be used later in the user journey.
More information about setting custom variables is available here.
You can validate if any custom variables have been successfully set on a page by running the following command in the browser's console:
tp.customVariables
Note, there is a maximum limit of 75 custom variables that can be passed as one set on a page.
Custom variables and Local Storage
We use localStorage for custom variables only in case a user needs to be fully redirected to a 3D-Secure bank page (during their payment) and back.
Otherwise, Custom variables are not stored in Local Storage.
Usually, the whole 3DS confirmation process doesn't take more than 1-2 min so we store the variables only for 5 mins.
Before the redirection we save two key-value pairs: __tp-customVariables + the customVariables object and __tp-customVariables-expiration + current timestamp.
After the redirection back we retrieve data from localStorage and restore it into the customVariables object. We also remove the key-value pair from localStorage.
If the localStorage value lifetime is more than expiration (based on the pair __tp-customVariables-expiration + timestamp) it is removed and customVariables are not restored.