<style>

#checkout-secure-loader {
position: fixed;
height: 100vh;
width: 100%;
display: none;
background: #fff;
z-index: 9999;
top: 0;
left: 0;
}
div.checkout-secure-loader-inside {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
div.loader-wrapper {
position: relative;
height: 110px;
width: 110px;
}
div.loader-around {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 5px solid #eee;
border-top: 5px solid #00a650;
border-radius: 50%;
box-sizing: border-box;
animation: rotate 2s linear infinite;
}
.loader-icon-wrapper {
position: relative;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.loader-icon-wrapper svg {
position: relative;
width: 40px;
height: 40px;
}
.loader-info-text {
 position: relative;
padding-top: 30px;
color: rgb(54, 62, 68);
font-size: 16px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id="checkout-secure-loader">
<div class="checkout-secure-loader-inside">
<div class="loader-wrapper">
<div class="loader-around"></div>
<div class="loader-icon-wrapper">
<svg
fill="#eee"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M18 10v-4c0-3.313-2.687-6-6-6s-6 2.687-6 6v4h-3v14h18v-14h-3zm-5 7.723v2.277h-2v-
2.277c-.595-.347-1-.984-1-1.723 0-1.104.896-2 2-2s2 .896 2 2c0 .738-.404 1.376-1 1.723zm-5-
7.723v-4c0-2.206 1.794-4 4-4 2.205 0 4 1.794 4 4v4h-8z"
></path>
</svg>
</div>
</div>
<p class="loader-info-text">Connecting in a secure environment...</p>
</div>
</div>
<script>
if (typeof jQuery == 'undefined') {
document.write(
'<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></' +
'script>',
);
}
</script>
<script>
// Data that comes from umpi
var checkoutUrl = 'https://checkout.umpi.com.br/checkout/';
var checkoutSkipCart = false;
var checkoutApiUrl = 'https://checkout.umpi.com.br/api/integrations/shopify/cart';
// Data that comes from Shopify
var shopSecureUrl = '{{shop.secure_url}}';
var shopShopifyDomain = '{{shop.permanent_domain}}';
 var shopTemplateName = '{{template.name}}';
var shopDomain = '{{shop.domain}}';
// Adding umpi Redirect Script
var isLoadingSecureCheckout = false;
function showSecureLoader() {
isLoadingSecureCheckout = true;
document.getElementById("checkout-secure-loader").style.display = "block";
}
function hideSecureLoader() {
isLoadingSecureCheckout = false;
document.getElementById("checkout-secure-loader").style.display = "none";
}
function forcedredirect() {
if (isLoadingSecureCheckout) return;
showSecureLoader();
navigateToCheckout();
}
function ckGetAjax(url) {
return new Promise((resolve, reject) => {
var xhr = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
xhr.open("GET", url);
xhr.onreadystatechange = function () {
if (xhr.readyState > 3 && xhr.status == 200) resolve(xhr.responseText);
};
xhr.send();
});
}
function ckPostAjax(url, data) {
console.log("ckPostAjax()");
return new Promise((resolve, reject) => {
var xhr;
if (window.XMLHttpRequest) {
console.log("new XMLHttpRequest()");
xhr = new XMLHttpRequest();
} else {
console.log(`new ActiveXObject("Microsoft.XMLHTTP")`);
console.log("here we are...");
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState > 3 && xhr.status == 200) {
resolve(xhr.responseText);
} else if (xhr.status != 200) {
hideSecureLoader();
}
};
xhr.send(data);
return xhr;
});
}
async function navigateToCheckout() {
var cart = await getCart();
var checkout = await createCheckout(cart);
await clearCart();
var search = window.location.search;
var checkoutUrl = checkout.checkoutUrl;
if (checkoutUrl.includes("?") && !!search) {
search = search.replace("?", "&");
}
window.location.href = checkout.checkoutUrl + search;
}
async function addToCart(formSerialize) {
console.log("formSerialize: ", formSerialize);
var response = await ckPostAjax("/cart/add.js", formSerialize);
console.log("addCart response: ", response);
var payload;
try {
payload = JSON.parse(response);
} catch (e) {
hideSecureLoader();
}
return payload;
}
async function getCart() {
var response = await ckGetAjax("/cart.json");
var cartPayload = JSON.parse(response);
return cartPayload;
}
async function clearCart() {
await ckPostAjax("/cart/clear.js");
}
async function createCheckout(cart) {
const receive = cart;
const carrinho = {
...receive,
shopifyDomain: shopShopifyDomain,
domain: shopDomain,
};
return new Promise((resolve, reject) => {
fetch(checkoutApiUrl, {
body: JSON.stringify(carrinho),
method: "post",
headers: {
"Content-type": "application/json",
},
})
.then((response) => {
resolve(response.json());
})
.catch((error) => {
console.error("error: ", error);
reject();
 });
});
}
if (shopTemplateName === "cart") {
var submitBtns = document.querySelectorAll("[name=checkout]");
submitBtns.forEach((submitBtn) => {
submitBtn.type = "button";
submitBtn.style.userSelect = "none";
submitBtn.addEventListener("click", async function () {
if (isLoadingSecureCheckout) return;
showSecureLoader();
navigateToCheckout();
});
});
}
if (
(shopTemplateName === "product" || shopTemplateName === "index") &&
checkoutSkipCart
){
insertClickListenerToButtons();
}
function insertClickListenerToButtons() {
var sellButtons = [
`button.button--addToCart`,
`button.ProductForm__AddToCart`,
`button.product-form__add-button`,
`button#add-to-cart`,
`button.add-to-cart-btn`,
`button.add-to-cart`,
`button.button-buy`,
`button#buttonBuy`,
`button#AddToCartText`,
`button#AddToCart`,
`input[name="add"]`,
`button[name=\'add\']`,
`button.single_add_to_cart_button`,
`button.buttonBuyNow`,
`.product-form__add-button`,
`button[data-action=add-to-cart]`,
];
var buttonsString = sellButtons.join(", ");
var addCartBtns = document.querySelectorAll(buttonsString);
if (!addCartBtns || !addCartBtns.length) {
timeoutAndRetryInsertingClickListeners();
return;
} else {
console.log("addCartBtns length: ", addCartBtns);
}
if (addCartBtns && addCartBtns.length > 0) {
addCartBtns.forEach((btn) => {
btn.addEventListener("click", async function (event) {
event.preventDefault();
if (isLoadingSecureCheckout) return;
 showSecureLoader();
// var form_count = $('form[action="/cart/add"]').length;
// if (typeof form_count != "undefined" && form_count <= 1) {
var form = $('form[action="/cart/add"]');
// console.log("form 1...");
// } else {
// var form = $(this).parents('form[action="/cart/add"]');
// console.log("form 2...");
// }
await addToCart($(form).serialize());
await navigateToCheckout();
});
});
}
}
function timeoutAndRetryInsertingClickListeners() {
console.log("timeoutAndRetryInsertingClickListeners()");
setTimeout(() => {
insertClickListenerToButtons();
}, 500);
}
</script>