Starting At logo colour

HTML

<div class="container">

    <!-- Affirm logo with default color -->
	  <p class="affirm-as-low-as" data-page-type="payment" data-amount="5000"></p>
    
    <!-- Affirm logo in black -->
    <p class="affirm-as-low-as" data-page-type="payment" data-amount="5000" data-affirm-color="black"></p>
    
    <!-- Affirm logo in white (not visible on a white background) -->
    <p class="affirm-as-low-as" data-page-type="payment" data-amount="5000" data-affirm-color="white"></p>
    
  </div>

CSS

html{
  font-family: sans-serif;
}
  
  .container > :nth-child(3) {
  background-color: #1e1e1e;
  color: white;
  }

JavaScript

/**************************************************************\
            Include Affirm.js Snippet
\**************************************************************/
var _affirm_config = {
  public_api_key: "ZY5CSWJ2TJLAL74I", /* Affirm Public API Key */
  script:         "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
};
(function(l,g,m,e,a,f,b){var d,c=l[m]||{},h=document.createElement(f),n=document.getElementsByTagName(f)[0],k=function(a,b,c){return function(){a[b]._.push([c,arguments])}};c[e]=k(c,e,"set");d=c[e];c[a]={};c[a]._=[];d._=[];c[a][b]=k(c,a,b);a=0;for(b="set add save post open empty reset on off trigger ready setProduct".split(" ");a<b.length;a++)d[b[a]]=k(c,e,b[a]);a=0;for(b=["get","token","url","items"];a<b.length;a++)d[b[a]]=function(){};h.async=!0;h.src=g[f];n.parentNode.insertBefore(h,n);delete g[f];d(g);l[m]=c})(window,_affirm_config,"affirm","checkout","ui","script","ready");

  const userPriceInput = document.getElementById('user-price');
  const affirmElement = document.querySelector('.affirm-as-low-as');

  userPriceInput.addEventListener('input', function() {
    const inputValue = parseFloat(this.value) || 0;
    const amountInCents = Math.round(inputValue * 100);

    userPriceInput.value = inputValue.toFixed(2);
    affirmElement.setAttribute('data-amount', amountInCents);

    if (window.affirm && affirm.ui && typeof affirm.ui.refresh === 'function') {
      affirm.ui.refresh();
    }
  });