ReChargeSMS checkout scripts
If you use custom code in your checkout, ReChargeSMS might not be able to add an opt-in to your checkout. This article provides the steps and scripts necessary to set up the checkbox manually.
Before you begin
Add ReChargeSMS opt-in to your store’s checkout
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.
ReCharge Checkout
The following instructions are only for merchants using the ReCharge Checkout. See Shopify Checkout if you use that platform instead.
The opt-in checkbox automatically is automatically added to the first page of checkout by following the Recharge SMS onboarding flow, culminating in clicking the SMS Activation button in the top right of the app, seen here:
From there, toggle on "Add RechargeSMS opt-in to your store's checkout". This option will both add the check box, and enable the messaging service for any opted in customers at the same time.
Shopify Checkout
- 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>
Didn’t find what you’re looking for?
Contact us