JSFiddle - React, Tailwind, and code Playground

by mahmoudimus

HTML

<script src="https://js.balancedpayments.com/v1/balanced.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="container">
<form action="#" method="POST" id="bank-account-form" class="form-horizontal">
    <fieldset>
        <legend>Bank Account Information</legend>
        <label>Account Holder's Name
            <input type="text"
                   autocomplete="off"
                   placeholder="Bank Account Holder's name"
                   class="ba-name"
                   value="John Q. TaxPayer">
        </label>
        <label>Routing Number
            <input type="text"
                   autocomplete="off"
                   placeholder="Routing Number"
                   class="ba-rn"
                   value="121000358">
        </label>
        <label>Account Number
            <input type="text"
                   autocomplete="off"
                   placeholder="Account Number"
                   class="ba-an"
                   value="9900000001">
        </label>                       
        <label>Account Type
            <select>
                <option value='' disabled selected style='display:none;'>
                    Select Account Type
                </option>
                <option value="checking" default>CHECKING</option>
                <option value="savings">SAVINGS</option>
            </select>
        </label>
        <button type="submit" class="btn">
            Tokenize
        </button>
    </fieldset>
</form>
</div>

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

// FOR DEMONSTRATION PURPOSES ONLY - if you already have a server you can POST to, replace
   //                                   the URL with the URL to post to.
   // go to http://requestb.in/
   // click create new request bin and COPY that URL without the ?inspect at the end
   var requestBinURL = 'http://requestb.in/onetigon';  // make sure it doesn't end in ?inspect

   var marketplaceUri = '/v1/marketplaces/TEST-MP2autgNHAZxRWZs76RriOze';
   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:
            // WOO HOO! MONEY!
            // response.data.uri == URI of the bank account resource you
            // should store this bank account URI to later credit it
            console.log(response.data);
            var $form = $("#bank-account-form");
            // the uri is an opaque token referencing the tokenized bank account
            var bank_account_uri = response.data['uri'];
            // append the token as a hidden field to submit to the server
            $('<input>').attr({
               type: 'hidden',
               value: bank_account_uri,
               name: 'balancedBankAccountURI'
            }).appendTo($form);
            $form.attr({action: requestBinURL});
            $form.get(0).submit();
        }
    }

   var tokenizeInstrument = function(e) {
        e.preventDefault();
   
        var $form = $('#bank-account-form');
        var bankAccountData = {
            name: $form.find('.ba-name').val(),
            account_number: $form.find('.ba-an').val(),
            bank_code: $form.find('.ba-rn').val(),
            type: $form.find('select').val()
        };
 
 
       ...