Tokenization

Example forms for tokenizing credit cards and bank accounts.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="alert alert-info">
                    <p>Do not provide real credit card or bank account details into these forms. Instead use <a href="https://docs.balancedpayments.com/current/overview.html#test-credit-card-numbers" class="alert-link" target="_blank">test cards</a> and <a href="https://docs.balancedpayments.com/current/overview.html#test-bank-account-numbers" class="alert-link" target="_blank">bank accounts</a>.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                <button type="button" id="populate" class="btn btn-default pull-right" style="margin-bottom: 20px;">Populate Test Data</button>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Tokenize Credit Card</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-lg-5 control-label">Name on Card</label>
                                <div class="col-lg-5">
                                    <input type="text" id="cc-name" class="form-control" autocomplete="off" placeholder="John Doe" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-5 control-label">Card Number</label>
                                <div class="col-lg-5">
                                    <input type="text" id="cc-number"...

JavaScript

$(document).ready(function () {
    ////
    // Initalize balanced.js
    //
    // server: The backend Balanced server to tokenize with
    // revision: The specific revision of the Balanced API to tokenize with
    ////
    
    // For example purposes, create a bin at http://requestb.in/
    // Make sure it doesn't end in ?inspect and set it as responseTarget.
    // e.g. var responseTarget = http://requestb.in/nyqkn8ny
    var responseTarget = 'http://localhost';  
    var marketplaceUri = '/v1/marketplaces/TEST-MP5JtbXVDZkSGruOJyNasPqy';
    
    balanced.init(marketplaceUri);
    
    ////
    // Click event for tokenize credit card
    ////
    $('#cc-submit').click(function (e) {
        e.preventDefault();

        $('#response').hide();

        var payload = {
            name: $('#cc-name').val(),
            card_number: $('#cc-number').val(),
            expiration_month: $('#cc-ex-month').val(),
            expiration_year: $('#cc-ex-year').val(),
            security_code: $('#ex-csc').val(),
            postal_code: $('#ex-postal-code').val()
        };
        
        // Tokenize credit card
        balanced.card.create(payload, function (response) {
            // Successful tokenization
            if(response.status === 201 && response.uri) {
                // Send to your backend
                jQuery.post(responseTarget, {
                    uri: response.uri
                }, function(r) {
                    // Check your backend response
                    if (r.status === 201) {
                        // Your successful logic here from backend
                    } else {
                        // Your failure logic here from backend
                    }
                });
            } else {
                // Failed to tokenize, your error logic here
            }
            
            // Debuging, just displays the tokenization result in a pretty div
            $('#response .panel-body...