Issue
I received a ready-made script from a payment processing company, I want to increase the size of the button and the background color, I’ve tried it with html but it doesn’t work
<script data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf">
const s = document.createElement("script");
s.src = "https://static.dlocalgo.com/dlocalgo.min.js", s.async = !0, document.body.appendChild(s), s.addEventListener("load", () => {
const e = document.querySelector('script[data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf"]'),
t = e.parentNode,
n = "dp-btn-2f334db3-3df2-46c2-93cd-fd2c05079acf",
c = document.createElement("div");
c.id = n, t.insertBefore(c, e);
new DlocalGo("wPvxvAjzGSlDGrYLQDamRXkTDKvsEDyc").createCheckout(n, {
country: "UY",
currency: "UYU",
amount: "17000",
lang: "",
text: "quiero inscribirme"
})
});
</script>Solution
- Changing the background color and size is related with styling which we can do with CSS.
- ALl you need is add your custom class and apply style using that class selector.
c.classList.add("my-btn-container"); // we are adding our own class to apply CSS
:root {
--your-color: #44cc44;
}
.my-btn-container .DlocalGoButton {
background-color: var(--your-color);
padding: 15px;
}<script data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf">
const s = document.createElement("script");
s.src = "https://static.dlocalgo.com/dlocalgo.min.js", s.async = !0, document.body.appendChild(s), s.addEventListener("load", () => {
const e = document.querySelector('script[data-reference-id="2f334db3-3df2-46c2-93cd-fd2c05079acf"]'),
t = e.parentNode,
n = "dp-btn-2f334db3-3df2-46c2-93cd-fd2c05079acf",
c = document.createElement("div");
c.classList.add("my-btn-container"); // we are adding our own class to apply css
c.id = n, t.insertBefore(c, e);
new DlocalGo("wPvxvAjzGSlDGrYLQDamRXkTDKvsEDyc").createCheckout(n, {
country: "UY",
currency: "UYU",
amount: "17000",
lang: "",
text: "quiero inscribirme"
})
});
</script>Answered By – Nikkkshit
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0