javascript - Cant fetch Class id in braintree -
i not able fetch class id's expiration month , expiration year
$('#expiration-month').val() + "/" + $('#expiration-year').val(), in briantree html file,although these id defined in html file.as result expiration date getting undefined. kindly help.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <style> body { background-color: #fff; } .panel { width: 80%; margin: 2em auto; } .bootstrap-basic { background: white; } .panel-body { width: 90%; margin: 2em auto; } .helper-text { color: #8a6d3b; font-size: 12px; margin-top: 5px; height: 12px; display: block; } /* braintree hosted fields styling classes*/ .braintree-hosted-fields-focused { border: 1px solid #0275d8; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); } .braintree-hosted-fields-focused.focused-invalid { border: 1px solid #ebcccc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(100, 100, 0, .6); } @media (max-width: 670px) { .form-group { width: 100%; } .btn { white-space: normal; } } </style> <body> <!-- bootstrap inspired braintree hosted fields example --> <div class="panel panel-default bootstrap-basic"> <div class="panel-heading"> <h3 class="panel-title">enter card details</h3> </div> <form class="panel-body"> <div class="row"> <div class="form-group col-xs-8"> <label class="control-label">card number</label> <!-- hosted fields div container --> <div class="form-control" id="card-number"></div> <span class="helper-text"></span> </div> <div class="form-group col-xs-4"> <div class="row"> <label class="control-label col-xs-12">expiration date</label> <div class="col-xs-6"> <!-- hosted fields div container --> <div class="form-control" id="expiration-month"></div> </div> <div class="col-xs-6"> <!-- hosted fields div container --> <div class="form-control" id="expiration-year"></div> </div> </div> </div> </div> <div class="row"> <div class="form-group col-xs-6"> <label class="control-label">security code</label> <!-- hosted fields div container --> <div class="form-control" id="cvv"></div> </div> <div class="form-group col-xs-6"> <label class="control-label">zipcode</label> <!-- hosted fields div container --> <div class="form-control" id="postal-code"></div> </div> </div> <button value="submit" id="submit" class="btn btn-success btn-lg center-block">pay <span id="card-type">card</span> </button> </form> </div> <!-- load required client component. --> <script src="https://js.braintreegateway.com/web/3.9.0/js/client.min.js"></script> <!-- load hosted fields component. --> <script src="https://js.braintreegateway.com/web/3.9.0/js/hosted-fields.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script> function getparameterbyname(name, url) { if (!url) { url = window.location.href; } name = name.replace(/[\[\]]/g, "\\$&"); var regex = new regexp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeuricomponent(results[2].replace(/\+/g, " ")); } braintree.client.create({ authorization: '<%= key %>' }, function (err, clientinstance) { if (err) { console.error(err); return; } braintree.hostedfields.create({ client: clientinstance, styles: { 'input': { 'font-size': '14px', 'font-family': 'helvetica, tahoma, calibri, sans-serif', 'color': '#3a3a3a' }, ':focus': { 'color': 'black' } }, fields: { number: { selector: '#card-number', placeholder: '4111 1111 1111 1111' }, cvv: { selector: '#cvv', placeholder: '123' }, expirationmonth: { selector: '#expiration-month', placeholder: 'mm' }, expirationyear: { selector: '#expiration-year', placeholder: 'yy' }, postalcode: { selector: '#postal-code', placeholder: '90210' } } }, function (err, hostedfieldsinstance) { if (err) { return; } hostedfieldsinstance.on('validitychange', function (event) { var field = event.fields[event.emittedby]; if (field.isvalid) { if (event.emittedby === 'expirationmonth' || event.emittedby === 'expirationyear') { if (!event.fields.expirationmonth.isvalid || !event.fields.expirationyear.isvalid) { return; } } else if (event.emittedby === 'number') { $('#card-number').next('span').text(''); } // apply styling valid field $(field.container).parents('.form-group').addclass('has-success'); } else if (field.ispotentiallyvalid) { // remove styling potentially valid fields $(field.container).parents('.form-group').removeclass('has-warning'); $(field.container).parents('.form-group').removeclass('has-success'); if (event.emittedby === 'number') { $('#card-number').next('span').text(''); } } else { // add styling invalid fields $(field.container).parents('.form-group').addclass('has-warning'); // add helper text invalid card number if (event.emittedby === 'number') { $('#card-number').next('span').text('looks card number has error.'); } } }); hostedfieldsinstance.on('cardtypechange', function (event) { // handle field's change, such change in validity or credit card type if (event.cards.length === 1) { $('#card-type').text(event.cards[0].nicetype); } else { $('#card-type').text('card'); } }); $('.panel-body').submit(function (event) { event.preventdefault(); hostedfieldsinstance.tokenize(function (err, payload) { if (err) { return err; } $.ajax({ url : window.location.origin + "/add_merchant_card", type : "post", headers : { "content-type" : "application/json" }, data : json.stringify({ access_token : getparameterbyname('access_token'), app_device_type : getparameterbyname('app_device_type'), card_details : { nonce : payload.nonce, brand : payload.details.cardtype, expiry_date : $('#expiration-month').val() + "/" + $('#expiration-year').val(), last2_digits : payload.details.lasttwo, funding : payload.type }, payment_method : 4 }), datatype:"json" }).success(function (response) { var body = response; console.log(body); if (!body.code) { window.location.replace(window.location.origin + "/success.html"); } else { window.location.replace(window.location.origin + "/error.html"); } }).error(function(err) { alert('kindly enter valid card details'); window.location.replace(window.location.origin + "/error.html"); }); // submit payload.nonce server // alert('submit nonce server here!'); }); }); }); }); </script> </body>
wiki
Comments
Post a Comment