JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      <div class="container">
              <h3>Checkout Page</h3>
              <br/>
              <h5>Checkout Mode
              </h5>
              <form name="checkout_mode_select">
              <input type="radio" name="checkout_mode" value="modal" checked="checked"> Modal<br/>
              <input type="radio" name="checkout_mode" value="redirect" > Redirect
              
              </form>
              <h5>Payment Method
              </h5>
              <form>
              <input type="radio" value="Affirm" checked="checked"><img id="payment_method-affirm"...

CSS

.container{ padding-top:30px; }
form {margin:20px 0;}
#payment_method-affirm{ margin:0 0 10px 10px;}

JavaScript

/**************************************************************\
            Include Affirm.js Snippet
\**************************************************************/
var _affirm_config = {
  public_api_key: "ARQBLCL7NAMBTZ7F",  /* replace with 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");

var checkout_mode = "modal";

var rad = document.checkout_mode_select.checkout_mode;
    var prev = null;
    for(var i = 0; i < rad.length; i++) {
        rad[i].onclick = function() {
        	console.log(this.value);
        		checkout_mode = this.value;
        };
    }


/**************************************************************\
          Set Affirm Checkout Values
\**************************************************************/



    
/**************************************************************\
              Handle the form submission
\**************************************************************/
$("#submit-form").click(function(){
affirm.checkout({

  "config": {
    "financial_product_key" : "CN29VP56R79EMSEI", //replace with your Affirm financial product key
  },

  "merchant": {
    "user_cancel_url"              : "https://google.com",
    "user_confirmation_url"        : "https://google.com",
    "user_confirmation_url_action" : "POST"
  },
  
  "metadata": {
  	"mode":checkout_mode
  },

  //shipping contact
  "shipping": {
   ...