yoayoy

index.html

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <!-- CREDIT CARD FORM STARTS HERE -->
            <div class="panel panel-default credit-card-box">
                <div class="panel-heading display-table" >
                    <div class="row display-tr" >
                        <h3 class="panel-title display-td" >Payment Details</h3>
                        <div class="display-td" >                            
                            <img class="img-responsive pull-right" src="https://developer.paysafe.com/fileadmin/content/logos/accepted_cards_by_paysafejs.png">
                        </div>
                    </div>                    
                </div>
                <div class="panel-body">
                    <form role="form" id="payment-form" method="POST" action="javascript:void(0);">
                        <div class="row">
                            <div class="col-xs-12">
                                <div class="form-group">
                                    <label for="cardNumber">CARD NUMBER</label>
                                    <div class="input-group">
                                        <div 
                                            class="form-control"
                                            id="cardNumber"
                                        > </div>
                                        <span class="input-group-addon"><i class="fa fa-credit-card"></i></span>
                                    </div>
                                </div>                            
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-7 col-md-7">
                                <div class="form-group">
                                    <label for="cardExpiry"><span class="hidden-xs">EXPIRATION</span><span class="visible-xs-inline">EXP</span> DATE</label>
                                    <div 
                                        class="form-control" 
                                        id="cardExpiry"
                                    ></div>
                                </div>
                            </div>
                            <div class="col-xs-5 col-md-5 pull-right">
                                <div class="form-group">
                                    <label for="cardCVC">CV CODE</label>
                                    <div 
                                        class="form-control"
                                        id="cardCVC"
                                    ></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <button class="pay btn btn-success btn-lg btn-block" type="button">Pay</button>
                            </div>
                        </div>
                        <div class="row" style="display:none;">
                            <div class="col-xs-12">
                                <p class="payment-errors"></p>
                            </div>
                        </div>
                    </form>
                </div>
            </div>            
            <!-- CREDIT CARD FORM ENDS HERE -->
            
            
        </div>            
        
        <div class="col-xs-12 col-md-8" style="font-size: 12pt; line-height: 2em;">
            <p><h1>Features:</h1>
                <ul>
                    <li>As-you-type, input formatting</li>
                    <li>Form field validation</li>
                    <li>Graceful error feedback for declined card, etc</li>
                    <li>Card brand recognition</li>
                    <li>Simulates AJAX processing delay with visual feedback</li>
                    <li>Creates a Paysafe credit card token</li>
                </ul>
            </p>
            <p>Be sure to replace the dummy API key with a valid Paysafe API key.</p>
            
            <p>Built upon: Bootstrap, jQuery,
                and <a href="https://developer.paysafe.com/en/sdks/paysafejs/overview/">paysafe.js</a>
            </p>
        </div>
        
    </div>
</div>

script.js

      // Base 64 encoded version of the Single-Use-Token API key.
      // Create the key below by concatenating the API username and password
      // separated by a colon and Base 64 encoding the result
      var apiKey = "T1QtMTE3MDQwOkItcWEyLTAtNTk1NjRlNWMtMC0zMDJjMDIxNDdmMDU4M2I2OGY4ZWQyNjkxNDIxMDczMzZiYWIyMTZmOWMzZGJiNTEwMjE0MTgwYzY1NGQ3OTgzZmI2NTliYzEzZWY4YWMyZmQ1MTliMjVhOTQxZQ==";
			var $form = $('#payment-form');
      $form.find('.pay').prop('disabled', true);
      var options = {

        // select the Paysafe test / sandbox environment
        environment: "TEST",

        // set the CSS selectors to identify the payment field divs above
        // set the placeholder text to display in these fields
        fields: {
          cardNumber: {
            selector: "#cardNumber",
            placeholder: "Card Number"
          },
          expiryDate: {
            selector: "#cardExpiry",
            placeholder: "MM / YY"
          },
          cvv: {
            selector: "#cardCVC",
            placeholder: "CVV"
          }
        }
      };

      // initalize the hosted iframes using the SDK setup function
      paysafe.fields.setup(apiKey, options, function(instance, error) {
	  
				if (error) {
					console.log(error);
				} else {
          
					var payButton = $form.find('.pay');
          
          console.log(payButton);
          
          instance.fields("cvv cardNumber expiryDate").valid(function (eventInstance, event) {
            $(event.target.containerElement).closest('.form-control').removeClass('error').addClass('success');
                     
           if (paymentFormReady()) {
            $form.find('.pay').prop('disabled', false);
           }
          });
          
          instance.fields("cvv cardNumber expiryDate").invalid(function (eventInstance, event) {
            $(event.target.containerElement).closest('.form-control').removeClass('success').addClass('error');
           if (!paymentFormReady()) {
            $form.find('.pay').prop('disabled', true);
           }
          });
          
          instance.fields.cardNumber.on("FieldValueChange", function(instance, event) {
            console.log(instance.fields.cardNumber);
            
            if (!instance.fields.cardNumber.isEmpty()) {
              var cardBrand = instance.getCardBrand().replace(/\s+/g, '');
              console.log(cardBrand);
              
              switch (cardBrand) {
                case "AmericanExpress":
                  $form.find($(".fa")).removeClass('fa-credit-card').addClass('fa-cc-amex');
                  break;
                case "MasterCard":
                  $form.find($(".fa")).removeClass('fa-credit-card').addClass('fa-cc-mastercard');
                  break;
                case "Visa":
                  $form.find($(".fa")).removeClass('fa-credit-card').addClass('fa-cc-visa');
                  break;
                case "Diners":
                  $form.find($(".fa")).removeClass('fa-credit-card').addClass('fa-cc-diners-club');
                  break;
                case "JCB":
                  $form.find($(".fa")).removeClass('fa-credit-card').addClass('fa-cc-jcb');
                  break;
                case "Maestro":
                  $form.find($(".fa")).removeClass('fa-credit-card').addClass('fa-cc-discover');
                  break;
              }
              }
            else {
               $form.find($(".fa")).removeClass().addClass('fa fa-credit-card');
            }
					});
		
					payButton.bind("click", function (event) {
						instance.tokenize({
              vault: {
                holderName: "John Smith",
                  billingAddress: {
                    country: "CA",
                    zip: "M5H 2N2",
                    state: "ON",
                    city: "Toronto",
                    street: "100 Queen Street",
                    street2: "201"
                  }
                }
              },function(instance, error, result) {
							if (error) {
								console.log(error);
                $form.find('.pay').html('Try again').prop('disabled', false);
                /* Show Paysafe errors on the form */
                $form.find('.payment-errors').text(error.displayMessage);
                $form.find('.payment-errors').closest('.row').show();
							} else {
                /* Visual feedback */
                $form.find('.pay').html('Processing <i class="fa fa-spinner fa-pulse"></i>');
                /* Hide Paysafe errors on the form */
                $form.find('.payment-errors').closest('.row').hide();
                $form.find('.payment-errors').text("");
                
                // response contains token          
								console.log(result.token);
                
                // you would send the 'token' to your server here using AJAX. The delay function simulates this process.
                delay(function(){                $form.find('.pay').html('Payment successful <i class="fa fa-check"></i>');
                                 $form.find('.pay').prop('disabled', true);
    // do stuff
}, 2000);// end delay
							}
						});
					});
				}
			});

paymentFormReady = function() {
    if ($form.find('#cardNumber').hasClass("success") &&
        $form.find('#cardExpiry').hasClass("success") &&
        $form.find('#cardCVC').hasClass("success")) {
        return true;
    } else {
        return false;
    }
}

var delay = ( function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://hosted.paysafe.com/js/v1/latest/paysafe.min.js"></script>

style.css

body { margin-top:20px; }

.credit-card-box .panel-title {
    display: inline;
    font-weight: bold;
}
.credit-card-box .form-control.error {
    border-color: red;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(255,0,0,0.6);
}
.credit-card-box label.error {
  font-weight: bold;
  color: red;
  padding: 2px 8px;
  margin-top: 2px;
}
.credit-card-box .payment-errors {
  font-weight: bold;
  color: red;
  padding: 2px 8px;
  margin-top: 12px;
}
.credit-card-box label {
    display: block;
}

.credit-card-box .display-tr {
    display: table-row;
}
.credit-card-box .display-td {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}

.credit-card-box .panel-heading img {
    min-width: 180px;
    border-style: solid;
    border-width: 3px;
    border-color: white;
    box-shadow: 3px 3px 5px #D3D3D3;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

yoayoy.markdown

yoayoy

A Pen by Paysafe on CodePen.

License.