JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://js.balancedpayments.com/v1/balanced.js"></script>
<form action="#" method="POST" id="credit-card-form">
    <fieldset>
        <legend>Credit Card Details</legend>
        <label>Card Number
            <input type="text"
                   autocomplete="off"
                   placeholder="Card Number"
                   class="cc-number" value="4111111111111111">
        </label>
        <label>Expiration
            <input type="text"
                   autocomplete="off"
                   placeholder="Expiration Month"
                   class="cc-em" value="01">
            <span>/</span>
            <input type="text"
                   autocomplete="off"
                   placeholder="Expiration Year"
                   class="cc-ey" value="2020">
        </label>
        <label>Security Code (CSC)
            <input type="text"
                   autocomplete="off"
                   placeholder="CSC"
                   class="cc-csc" value="123">
        </label>
        <button type="submit" class="btn">
            Tokenize
        </button>
    </fieldset>
</form>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

JavaScript

var requestBinURL = 'http://requestb.in/12tdawq1';  // make sure it doesn't end in ?inspect

   var marketplaceUri = '/v1/marketplaces/TEST-MP2autgNHAZxRWZs76RriOze'; //test marketplace uri, don't change
   balanced.init(marketplaceUri);

   function responseCallbackHandler(response) {
      switch (response.status) {
        case 400:
            // missing or invalid field - check response.error for details
            console.log(response.error);
            break;
        case 404:
            // your marketplace URI is incorrect
            console.log(response.error);
            break;
        case 201:
            console.log(response.data);
            var cardTokenURI = response.data['uri'];
            
            // append the token as a hidden field to submit to the server
              var form = $("#credit-card-form");
            $('<input>').attr({
               type: 'hidden',
               value: cardTokenURI,
               name: 'balancedCreditCardURI'
            }).appendTo(form);
            form.attr({action: requestBinURL});
            form.submit();
        }
    }
   
       var creditCardData = {
            card_number: '4111111111111111',
            expiration_month: '01',
            expiration_year: '2020',
            security_code: '123'
        };
 
        balanced.card.create(creditCardData, responseCallbackHandler);