JSFiddle - React, Tailwind, and code Playground

by KarenLiAffirm

HTML

<!-- The following is an example of how a merchant can integrate Affirm's Inline Checkout onto their page -->
<html lang="en">

  <body>
    <div id="checkout">
      <div id="custom-inline-checkout-container"></div>
      <!-- Can create any container with any ID you want to pass to Checkout like above, or use the default below -->
      <div id="affirm-inline-checkout-container"></div>
    </div>
    <script>
      // Loads AFJS onto the page
      let _affirm_config = {
        public_api_key: "YIDGYXGOMQU1ECBH", // Replace this key with your Public Key
        script: "https://affirm-stage.com/js/v2/affirm.js"
      };
      (function(m, g, n, d, a, e, h, c) {
        var b = m[n] || {},
          k = document.createElement(e),
          p = document.getElementsByTagName(e)[0],
          l = function(a, b, c) {
            return function() {
              a[b]._.push([c, arguments]);
            };
          };
        b[d] = l(b, d, "set");
        var f = b[d];
        b[a] = {};
        b[a]._ = [];
        f._ = [];
        b._ = [];
        b[a][h] = l(b, a, h);
        b[c] = function() {
          b._.push([h, arguments]);
        };
        a = 0;
        for (
          c = "set add save post open empty reset on off trigger ready setProduct".split(
            " "
          ); a < c.length; a++
        )
          f[c[a]] = l(b, d, c[a]);
        a = 0;
        for (c = ["get", "token", "url", "items"]; a < c.length; a++)
          f[c[a]] = function() {};
        k.async = !0;
        k.src = g[e];
        p.parentNode.insertBefore(k, p);
        delete g[e];
        f(g);
        m[n] = b;
      })(
        window,
        _affirm_config,
        "affirm",
        "checkout",
        "ui",
        "script",
        "ready",
        "jsReady"
      );

      // Once AFJS has been loaded and is ready for interaction
      affirm.ui.ready(function() {
        // Kick off inline Checkout as a two step process, which allows you to set up checkout data
...