Last active
March 23, 2020 08:04
-
-
Save Ninigi/bd20589ccc0abe8ccf84cca1560f7317 to your computer and use it in GitHub Desktop.
How to hide and show payment gateways in shopify checkout (COD)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// The Payment Gateway / Shippnig Method can be internationalized, | |
// if the shop does not use this internationalization, use ["Cash on Delivery (COD)"] | |
var CODGatewayNames = ["代金引換", "Cash on Delivery (COD)"], | |
CODShippingNames = ["代金引換", "Cash on Delivery"], | |
radioButtonSelector = ".radio__input .input-radio"; | |
function toggleCODPayment(shippingElement) { | |
var isCOD = function(el) { | |
var label = el.querySelectorAll(".radio__label__primary")[0]; | |
var labelText = label ? label.textContent.trim().toLowerCase() : ""; | |
return label && CODGatewayNames.some(function(CODGatewayName) { return labelText.indexOf(CODGatewayName.toLowerCase()) != -1 }); | |
} | |
var isCODShipping = function(shippingElement) { | |
var text = shippingElement && shippingElement.textContent.trim().toLowerCase(); | |
return text && CODShippingNames.some(function(CODShippingName) { return text.indexOf(CODShippingName.toLowerCase()) > -1 }); | |
} | |
var removeSubfields = function(gatewayID) { | |
var subfields = document.getElementById("payment-gateway-subfields-" + gatewayID); | |
if (subfields) { | |
subfields.remove(); | |
} | |
} | |
if (isCODShipping(shippingElement)) { | |
var els = document.querySelectorAll(".section--payment-method .radio-wrapper.content-box__row"); | |
for (var i = 0; i < els.length; i++) { | |
var el = els[i], | |
radioButton = el.querySelector(radioButtonSelector); | |
if (el.dataset.selectGateway && !isCOD(el)) { | |
// Use this if you don't want to remove the element: | |
// el.classList.add("visually-hidden"); | |
removeSubfields(el.dataset.selectGateway) | |
el.remove(); | |
if (radioButton.checked) { | |
radioButton.checked = false; | |
} | |
} else if (el.dataset.selectGateway && isCOD(el)) { | |
radioButton.checked = true; | |
} | |
} | |
} else if (shippingElement) { | |
var els = document.querySelectorAll(".section--payment-method .radio-wrapper.content-box__row"), | |
radioButtons = []; | |
for (var i = 0; i < els.length; i++) { | |
var el = els[i], | |
radioButton = el.querySelector(radioButtonSelector); | |
if (el.dataset.selectGateway && isCOD(el)) { | |
// Use this if you don't want to remove the element: | |
// el.classList.add("visually-hidden"); | |
removeSubfields(el.dataset.selectGateway) | |
el.remove(); | |
if (radioButton.checked) { | |
radioButton.checked = false; | |
} | |
} else if (radioButton && el.dataset.selectGateway) { | |
radioButtons.push(radioButton); | |
} | |
} | |
if (!radioButtons.some(function(el) { return el.checked })) { | |
radioButtons[0].checked = true; | |
} | |
} | |
} | |
function initObserver(shippingElement) { | |
var observer = new MutationObserver(function(mutations) { | |
mutations.forEach(function(mutation) { | |
if (mutation.target == document.querySelector(".main__content")) { toggleCODPayment(shippingElement) } | |
}); | |
}); | |
observer.observe(document.querySelector(".main"), {childList: true, subtree: true}); | |
} | |
(function(fn){var d=document;(d.readyState=='loading')?d.addEventListener('DOMContentLoaded',fn):fn();})(function(){ | |
var shippingElement = document.querySelector("div.review-block:nth-child(3) > div:nth-child(1) > div:nth-child(2)"); | |
if (shippingElement) { | |
initObserver(shippingElement); | |
toggleCODPayment(shippingElement); | |
} | |
}); |
it doesnt seem to work. as shopify uses the script as an iframe srcdoc. restricting the script from accessing the page content
Yes, you are right - the approach was very hacky from the beginning, and it was just a matter of time until Shopify shut it down due to the security risks.
It seems to still work on old shops we have set this up on - but not on newer shops.
it doesnt seem to work. as shopify uses the script as an iframe srcdoc. restricting the script from accessing the page content
Right.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
it doesnt seem to work. as shopify uses the script as an iframe srcdoc. restricting the script from accessing the page content