Product Modal

HTML

<div id="container">
  <!-- example of a product modal opened by an ALA -->
  <p class="affirm-as-low-as" data-page-type="product" data-amount="50000"></p>
  <!-- example of a product modal opened by a button -->
  <button
    id="learn-more-button"
    class="affirm-product-modal"
    data-page-type="product"
    data-amount="30000"
  >
    Learn More
  </button>
</div>

CSS

html {
  font-family: arial;
}
#container {
  padding: 10px;
}
#learn-more-button {
  width: 240px;
  background: #4a4af4;
  border-radius: 3px;
  border: 2px solid #4a4af4;
  text-align: center;
  padding: 10px;
  color: #f2f4f5;
}
#learn-more-button:hover {
  cursor: pointer;
  color: #fff;
  background: #00c8e5;
  border: 2px solid #00c8e5;
}

JavaScript

var _affirm_config = {
    public_api_key: "MJQ0B6BEVJDPS0YG", /* Affirm Public API Key */
    script: "https://cdn1-sandbox.affirm.com/js/v2/affirm.js",
    session_id: "sID",
    locale: "en_US",
   	country_code: "USA"
  };
  (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");
// END AFFIRM.JS EMBED CODE