Before you can give your customers the option to modify their subscriptions through text SMS, you need to add an opt-in checkbox to your checkout. This article provides the steps and scripts necessary to set up the checkbox.
Before you begin
This is one step in the process of installing ReChargeSMS for your store. Before you add the checkbox opt-in from this guide ensure you installed the ReChargeSMS integration, configure your products, and make sure you add the Terms of Service to your checkout first.
Adding the ReChargeSMS opt-in checkbox requires you to add javascript to page 1 of your store checkout. This feature is not enabled by default, please reach out to ReCharge Support if you don't see Enable Javascript on page 1 of checkout in Settings > Checkout.
ReCharge Checkout
The following instructions are only for merchants using the ReCharge Checkout. See Shopify Checkout if you use that platform instead.
Note: Adding scripts to checkout requires Shopify Plus. You may also need to confirm with Shopify that your store can enable Javascript in checkout, this feature is not enabled by default.
- Open up ReCharge and go to Settings > Checkout.
- Locate Enable Javascript on page 1 of checkout and paste the following script into it.
ReCharge Checkout Script
document.addEventListener("DOMContentLoaded", function() {
function upsertCheckout(checked) {
var requestBody = {
"buyer_accepts_sms": checked,
"token": window.cart_json.token,
"external_checkout_id": window.cart_json.external_checkout_id,
"external_checkout_source": window.cart_json.external_checkout_source
}
var xmlhttp = new XMLHttpRequest();
var theUrl = "https://app.electricsms.com/api/recharge/checkouts";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify(requestBody));
}
function onCheckboxChange() {
var checked = this.checked;
upsertCheckout(checked);
}
var shippingAddress = document.querySelector("#shipping-address");
var fieldWrapper = document.createElement("div");
fieldWrapper.className = "field";
var fieldId = "checkout_buyer_accepts_sms";
var fieldLabel = document.createElement("label");
fieldLabel.htmlFor = fieldId;
fieldLabel.innerHTML = "Allow me to modify my subscription via Text";
fieldLabel.style = "width: auto;"
var fieldInput = document.createElement("input");
fieldInput.className = "optional";
fieldInput.type = "checkbox";
fieldInput.id = fieldId;
fieldInput.checked = true;
fieldInput.style = "float: right;";
fieldInput.onchange = onCheckboxChange;
var fieldInputWrapper = document.createElement('div');
fieldInputWrapper.className = "field__inner--horizontal-padding";
fieldInputWrapper.appendChild(fieldInput);
fieldWrapper.appendChild(fieldLabel);
fieldWrapper.appendChild(fieldInputWrapper);
shippingAddress.appendChild(fieldWrapper);
// Init with checked
upsertCheckout(true);
});
document.addEventListener("DOMContentLoaded", function() {
function loadScript(url, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onreadystatechange = callback;
script.onload = callback;
head.appendChild(script);
}
function phoneMask(elementId) {
return function() {
var element = document.getElementById(elementId);
var maskOptions = { mask: '+{1} (000) 000-0000' };
var mask = IMask(element, maskOptions);
}
}
loadScript("https://unpkg.com/imask", phoneMask("checkout_shipping_address_phone"));
});
Shopify Checkout
Note: Adding scripts to checkout requires Shopify Plus. You may also need to confirm with Shopify that your store can enable Javascript in checkout, this feature is not enabled by default.
- Open Shopify and go to Online Store > Themes.
- Click on Actions > Edit code.
- Under Layout, click Add a new layout.
- Create a new layout from Checkout, called gift_card.
- Locate {{tracking code}}, paste the following code afterwards, and save the layout.
Shopify Plus Script
<script>
// Start of the ReChargeSMS script
var Shopify = window.Shopify || {};
function upsertCheckout(checked) {
var requestBody = {
buyer_accepts_sms: checked,
token: Shopify.Checkout.token,
external_checkout_id: Shopify.Checkout.token,
external_checkout_source: "shopify",
};
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "https://app.electricsms.com/api/recharge/checkouts");
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify(requestBody));
}
function onCheckboxChange() {
var checked = this.checked;
upsertCheckout(checked);
}
function loadScript(url, callback) {
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
script.onreadystatechange = callback;
script.onload = callback;
head.appendChild(script);
}
function phoneMask(elementId) {
return function () {
var element = document.getElementById(elementId);
var maskOptions = {
mask: "+{1} (000) 000-0000",
};
IMask(element, maskOptions);
};
}
function init() {
var addressFields = document.querySelector(".address-fields");
var eSmsCheckbox = document.createElement("div");
eSmsCheckbox.className = "field checkbox-wrapper";
var fieldWrapper = document.createElement("div");
fieldWrapper.className = "checkbox__input";
var fieldInput = document.createElement("input");
var fieldId = "buyer_accepts_sms";
fieldInput.type = "checkbox";
fieldInput.id = fieldId;
fieldInput.checked = true;
fieldInput.className = "input-checkbox";
fieldInput.onchange = onCheckboxChange;
var fieldLabel = document.createElement("label");
fieldLabel.htmlFor = fieldId;
fieldLabel.className = "checkbox__label";
fieldLabel.innerText = "Allow me to modify my subscription via Text";
fieldWrapper.appendChild(fieldInput);
eSmsCheckbox.appendChild(fieldWrapper);
eSmsCheckbox.appendChild(fieldLabel);
// Append checkbox inside checkout fields container
setTimeout(function () {
addressFields.appendChild(eSmsCheckbox);
}, 0);
// Init with checked
upsertCheckout(true);
// Load the mask input
loadScript(
"//unpkg.com/imask",
phoneMask("checkout_shipping_address_phone")
);
}
init();
// End ReChargeSMS
</script>
Carthook
Add the following Custom Scripts to your Carthook checkout.
Carthook HTML
<div class="cart__shipping rte">
<label for="buyer_accepts_sms">
<input type="checkbox" id="buyer_accepts_sms" checked />
Allow me to modify my subscription via Text
</label>
</div>
Carthook Script
Script
<script>
(function init() {
function getCartToken() {
try {
return (document.cookie.match("(^|; )cart=([^;]*)") || 0)[2];
} catch (e) {
return null;
}
}
function upsertCheckout(checked) {
var token = getCartToken();
var requestBody = {
buyer_accepts_sms: checked,
token: token,
external_checkout_id: token,
external_checkout_source: "shopify",
};
var xmlhttp = new XMLHttpRequest();
xmlhttp.open(
"POST",
"https://app.electricsms.com/api/recharge/checkouts"
);
xmlhttp.setRequestHeader(
"Content-Type",
"application/json;charset=UTF-8"
);
xmlhttp.send(JSON.stringify(requestBody));
}
document
.querySelector("#buyer_accepts_sms")
.addEventListener("change", function onChange(e) {
upsertCheckout(e.target.checked);
});
upsertCheckout(true);
})();
</script>