JSFiddle - React, Tailwind, and code Playground

by mjallday

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

// 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 = $("#credit-card-form");
            // the uri is an opaque token referencing the tokenized bank account
            var cardTokenURI = response.data['uri'];
            // append the token as a hidden field to submit to the server
            $('<input>').attr({
               type: 'hidden',
               value: cardTokenURI,
               name: 'balancedCreditCardURI'
            }).appendTo($form);
            $form.attr({action: requestBinURL});
            $form.get(0).submit();
        }
    }

   var tokenizeInstrument = function(e) {
       e.preventDefault();
   
       var $form = $('#credit-card-form');
       var creditCardData = {
            card_number: $form.find('.cc-number').val(),
            expiration_month: $form.find('.cc-em').val(),
            expiration_year: $form.find('.cc-ey').val(),
            security_code: $form.find('cc-csc').val()
        };
 
       ...