<div class="container">
  <form>
    <h5>
      Pay over time with<img
        id="payment_method-affirm"
        src="https://cdn-assets.affirm.com/images/black_logo-white_bg.svg"
        height="30px"
      />
    </h5>
    <h5>How does Affirm work?</h5>
    <span>
      Just enter your basic information and get a real-time credit decision. You
      will complete your payment on the Affirm website. If you're approved and
      confirm your loan, your purchase will be on its way as soon as it's ready.
    </span>
  </form>
  <input
    class="btn btn-primary"
    type="button"
    value="Pay with Affirm"
    id="submit-form"
  />
  <br>
  <br>
  <div class="card">
  <div class="card-body">
    <h5 class="card-title">Demo in sandbox mode</h5>
    <p class="card-text">You can use the following phone numbers and pins to trigger different scenarios:</p>
    <div>Any phone numbers</div>
    <div>Pin required: <b>1234</b></div>
  </div>
</div>
</div>
.container {
  padding-top: 30px;
}
form {
  margin: 20px 0;
}
#payment_method-affirm {
  margin: 0 0 18px 5px;
}

.btn-primary,
.btn-primary:active,
.btn-primary:visited {
  background-color: #0f72e5 !important;
}

.btn-primary:hover {
  background-color: #0055b9 !important;
}
/**************************************************************\
          Step 1: Set up Affirm.js
\**************************************************************/
var _affirm_config = {
  public_api_key: "D61DY07EIUOBE2I8" /* replace with your public api key */,
  script: "https://sandbox.affirm.com/js/v2/affirm.js"
};

/**************************************************************\
          Step 2: Initialize Affirm
\**************************************************************/
(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"
);

/**************************************************************\
          Step 3: Render Affirm Checkout
\**************************************************************/
affirm.checkout({
  merchant: {
    user_cancel_url: "https://www.affirm.com",
    user_confirmation_url: "https://www.affirm.com",
    user_confirmation_url_action: "GET",
    merchant: "Affirm Demo Inc."
  },

  shipping: {
    name: {
      first: "John",
      last: "Doe"
    },
    address: {
      line1: "225 Bush Street.'",
      line2: "Floor 16",
      city: "San Francisco",
      state: "CA",
      country: "US",
      zipcode: "94104"
    },
    email: "john.doe@affirm.com",
    phone_number: "4155555555"
  },
  billing: {
    name: {
      first: "John",
      last: "Doe"
    },
    address: {
      line1: "225 Bush Street.'",
      line2: "Floor 16",
      city: "Beckley",
      state: "CA",
      country: "US",
      zipcode: "24801"
    },
    email: "john.doe@affirm.com",
    phone_number: "4155555555"
  },
  metadata: {
    mode: "modal"
  },
  items: [
    {
      sku: "123456789",
      display_name: "Affirm Scarf",
      unit_price: 60000,
      qty: 1
    }
  ],
  total: 60000
});

/**************************************************************\
              Step 4: Handle callbacks
\**************************************************************/
$("#submit-form").click(function() {
  affirm.checkout.open({
    onFail: function(e) {
      console.log(e);
    },
    onSuccess: function(a) {
      alert(
        "Affirm checkout successful, checkout token is: " + a.checkout_token
      );
    }
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js