How to change background color and button size of a finished script?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

One way is to target the outer container using it's data attribute, which is unlikely to change (I think). You can further refine the CSS to targe the first button (if you like).

[data-new-gr-c-s-check-loaded] button:first-child {
    ... css stuff

[data-new-gr-c-s-check-loaded] button:first-child {
  padding: 50px;
  background: rgb(131, 58, 180);
  background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
  color: #fff;
  font-size: 4em;
}

<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>