Braintree Hosted Fields integration with Custom Stylesheet(css) and validation

Braintree hosted field integration offer great flexibility in customization of payment form design with custom style sheet (css) and validation error handling. You can change complete look and feel of your payment form as per site theme with hosted fields solution and it being so easy to do.

We will have example of custom design of payment form below in that we added auto payment method detection logic with braintree on the basis of card number as well as added error handing style on form fields.

With this script you can handle/ Manage full form validation with braintree internal card validation too.

Custom design mock-up :

Validation error handling :

You can edit the all style content in below script as per your requirement-

<?php
// Braintree library
require 'braintree/lib/Braintree.php';

$params = array(
	"testmode"   => "on",
	"merchantid" => "xxxxxxx",
	"publickey"  => "xxxxxxx",
	"privatekey" => "xxxxxxxxxxxxxxxxxxxxx",
);

if ($params['testmode'] == "on")
{
	Braintree_Configuration::environment('sandbox');
}
else
{
	Braintree_Configuration::environment('production');
}

Braintree_Configuration::merchantId($params["merchantid"]);
Braintree_Configuration::publicKey($params["publickey"]);
Braintree_Configuration::privateKey($params["privatekey"]);

if(isset($_POST['payment_method_nonce']))
{
	$sale = array(
				'amount'   => $_POST['amount'],
				'paymentMethodNonce' => $_POST['payment_method_nonce'],   // Autogenerated field from braintree
				'options' => array(
								'submitForSettlement'   => true,
								'storeInVaultOnSuccess' => true
							 )
			);
						
	$result = Braintree_Transaction::sale($sale);
	if ($result->success)
	{
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Braintree Hosted Fields Demo</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="hosted_field_style.css" type="text/css" rel="stylesheet" />
<style type="text/css">
td { text-align: center;}
</style>
</head>
<body>
<div align="center">
  <header>
    <h1 class="bt_title">Braintree Hosted Fields API Response</h1>
  </header>
  <h3>Braintree Customer Id</h3>
  <table cellpadding="0" cellspacing="0" border="1px solid #6c7151" width="50%">
    <tbody>
      <tr align="center">
        <td width="50%">id</td>
        <td width="50%"><?php echo($result->transaction->_attributes['customer']['id'])?></td>
      </tr>
    </tbody>
  </table>
  <h3>Transaction</h3>
  <table cellpadding="0" cellspacing="0" border="1px solid #6c7151" width="50%">
    <tbody>
      <tr align="center">
        <td width="50%">id</td>
        <td width="50%"><?php echo($result->transaction->id)?></td>
      </tr>
      <tr>
        <td>type</td>
        <td><?php echo($result->transaction->type)?></td>
      </tr>
      <tr>
        <td>amount</td>
        <td><?php echo($result->transaction->amount)?></td>
      </tr>
      <tr>
        <td>status</td>
        <td><?php echo($result->transaction->status)?></td>
      </tr>
      <tr>
        <td>created_at</td>
        <td><?php echo($result->transaction->createdAt->format('Y-m-d H:i:s'))?></td>
      </tr>
      <tr>
        <td>updated_at</td>
        <td><?php echo($result->transaction->updatedAt->format('Y-m-d H:i:s'))?></td>
      </tr>
    </tbody>
  </table>
  <h3>Payment</h3>
  <table cellpadding="0" cellspacing="0" border="1px solid #6c7151" width="50%">
    <tbody>
      <tr>
        <td width="50%">token</td>
        <td width="50%"><?php echo($result->transaction->creditCardDetails->token)?></td>
      </tr>
      <tr>
        <td>bin</td>
        <td><?php echo($result->transaction->creditCardDetails->bin)?></td>
      </tr>
      <tr>
        <td>last_4</td>
        <td><?php echo($result->transaction->creditCardDetails->last4)?></td>
      </tr>
      <tr>
        <td>card_type</td>
        <td><?php echo($result->transaction->creditCardDetails->cardType)?></td>
      </tr>
      <tr>
        <td>expiration_date</td>
        <td><?php echo($result->transaction->creditCardDetails->expirationDate)?></td>
      </tr>
      <tr>
        <td>cardholder_name</td>
        <td><?php echo($result->transaction->creditCardDetails->cardholderName)?></td>
      </tr>
      <tr>
        <td>customer_location</td>
        <td><?php echo($result->transaction->creditCardDetails->customerLocation)?></td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>
<?php
	}
	else
	{
		echo "Error : ".$result->_attributes['message'];
	}
	//print_r($result);
	exit;
}
else
if (isset($_POST['action']) && $_POST['action'] == 'generateclienttoken')
{
	// Generate the nonce
	$clientToken = Braintree_ClientToken::generate();
	echo $clientToken; exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Braintree Hosted Fields Demo</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="hosted_field_style.css" type="text/css" rel="stylesheet" />
</head>

<body>
<h1 class="bt_title">Braintree Hosted Fields with Custom Stylesheet</h1>
<form id="bt_custom_form" name="bt_custom_form" method="post" action="">
  <div class="loader_container">
    <div class="loader_img loader"></div>
  </div>
  <div class="bt_form_wrap hide invisible">
    <fieldset>
      <label for="bt_card_number">Card Number</label>
      <div id="bt_card_number" class="inputFields"></div>
      <span class="payment-method-icon"></span>
    </fieldset>
    <div style="height: 84px;">
      <fieldset>
        <div style="float:left; width:49%">
          <label for="bt_exp_date">Expiration (MM/YY)</label>
          <div id="bt_exp_date" class="inputFields"></div>
        </div>
        <div style="float:right; width:49%">
          <label for="bt_cvv">CVV Number</label>
          <div id="bt_cvv" class="inputFields"></div>
          <span id="cvv-icon" class="payment-method-icon"></span> </div>
      </fieldset>
    </div>
    <div>
      <fieldset>
        <div style="float:left; width:49%; margin-top:9px">
          <input type="checkbox" value="1" name="braintree_subscribe" style="visibility:visible; position:relative;">
          <label for="braintree_subscribe">Set as default payment method</label>
        </div>
        <div style="float:right; width:49%" class="btn_container">
          <input type="submit" name="" class="button-me green-btn button-small pay-btn" value="Add Card" style="width:100%; margin-top:0px;" />
          <input type="hidden" name="amount" value="10"  />
          <span class="loader_img"></span>
        </div>
      </fieldset>
    </div>
  </div>
  <br />
  <br />
  <center>
    <div id="bt_paypal_container"></div>
  </center>
</form>
<script type="text/javascript" src="https://js.braintreegateway.com/js/beta/braintree-hosted-fields-beta.18.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="hosted_field_style.js"></script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

<?php

// Braintree library

require 'braintree/lib/Braintree.php';

$params = array(

"testmode" => "on",

"merchantid" => "xxxxxxx",

"publickey" => "xxxxxxx",

"privatekey" => "xxxxxxxxxxxxxxxxxxxxx",

);

if ($params['testmode'] == "on")

{

Braintree_Configuration::environment('sandbox');

}

else

{

Braintree_Configuration::environment('production');

}

Braintree_Configuration::merchantId($params["merchantid"]);

Braintree_Configuration::publicKey($params["publickey"]);

Braintree_Configuration::privateKey($params["privatekey"]);

if(isset($_POST['payment_method_nonce']))

{

$sale = array(

'amount' => $_POST['amount'],

'paymentMethodNonce' => $_POST['payment_method_nonce'], // Autogenerated field from braintree

'options' => array(

'submitForSettlement' => true,

'storeInVaultOnSuccess' => true

)

);

$result = Braintree_Transaction::sale($sale);

if ($result->success)

{

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Braintree Hosted Fields Demo</title>

td { text-align: center;}

</style>

</head>

<body>

<h1 class="bt_title">Braintree Hosted Fields API Response</h1>

</header>

<h3>Braintree Customer Id</h3>

<tbody>

<td width="50%"><?php echo($result->transaction->_attributes['customer']['id'])?></td>

</tr>

</tbody>

</table>

<h3>Transaction</h3>

<tbody>

<td width="50%"><?php echo($result->transaction->id)?></td>

</tr>

<tr>

<td><?php echo($result->transaction->type)?></td>

</tr>

<tr>

<td>amount</td>

<td><?php echo($result->transaction->amount)?></td>

</tr>

<tr>

<td>status</td>

<td><?php echo($result->transaction->status)?></td>

</tr>

<tr>

<td>created_at</td>

<td><?php echo($result->transaction->createdAt->format('Y-m-d H:i:s'))?></td>

</tr>

<tr>

<td>updated_at</td>

<td><?php echo($result->transaction->updatedAt->format('Y-m-d H:i:s'))?></td>

</tr>

</tbody>

</table>

<h3>Payment</h3>

<tbody>

<tr>

<td width="50%">token</td>

<td width="50%"><?php echo($result->transaction->creditCardDetails->token)?></td>

</tr>

<tr>

<td><?php echo($result->transaction->creditCardDetails->bin)?></td>

</tr>

<tr>

<td><?php echo($result->transaction->creditCardDetails->last4)?></td>

</tr>

<tr>

<td><?php echo($result->transaction->creditCardDetails->cardType)?></td>

</tr>

<tr>

<td>expiration_date</td>

<td><?php echo($result->transaction->creditCardDetails->expirationDate)?></td>

</tr>

<tr>

<td>cardholder_name</td>

<td><?php echo($result->transaction->creditCardDetails->cardholderName)?></td>

</tr>

<tr>

<td>customer_location</td>

<td><?php echo($result->transaction->creditCardDetails->customerLocation)?></td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

<?php

}

else

{

echo "Error : ".$result->_attributes['message'];

}

//print_r($result);

exit;

}

else

if (isset($_POST['action']) && $_POST['action'] == 'generateclienttoken')

{

// Generate the nonce

$clientToken = Braintree_ClientToken::generate();

echo $clientToken; exit;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Braintree Hosted Fields Demo</title>

</head>

<body>

<h1 class="bt_title">Braintree Hosted Fields with Custom Stylesheet</h1>

</div>

<label for="bt_card_number">Card Number</label>

</fieldset>

<label for="bt_exp_date">Expiration (MM/YY)</label>

</div>

<label for="bt_cvv">CVV Number</label>

</fieldset>

</div>

<div>

<label for="braintree_subscribe">Set as default payment method</label>

</div>

</div>

</fieldset>

</div>

<br />

</center>

</form>

</body>

</html>

hosted_field_style.css

fieldset {
    margin-bottom: 0 !important;
}
					
.bt_form_wrap {
    width: 95% !important;
}

#bt_card_number, #bt_cvv, #bt_exp_date {
    background: #fff none repeat scroll 0 0;
    height: 34px;

	border: 1px solid #cccccc;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
	padding: 0 10px !important;
}

#bt_card_number {
    padding: 0 55px !important;
}

#cvv-icon.payment-method-icon {
    background-image: url("img/braintree_dropin_sprite.png");
    background-position: 0 -100px;
    display: block;
    text-indent: -999em;
    position: relative;
    top: -52px;
    width: 44px;
    float: right;
    height: 26px;
    left: -4px;
    border: 1px solid #ccc;
}

.payment-method-icon.master-card {
    background-image: url("img/braintree_dropin_sprite.png");
    background-position: 0 -268px;
    display: block;
    height: 28px;
    text-indent: -999em;
    width: 44px;

	position: absolute;
    top: 25px;
    left: 5px;
}

.payment-method-icon.visa {
    background-image: url("img/braintree_dropin_sprite.png");
    background-position: 0 -380px;
    display: block;
    height: 28px;
    text-indent: -999em;
    width: 44px;

	position: absolute;
    top: 25px;
    left: 5px;
}

.payment-method-icon.american-express {
    background-image: url("img/braintree_dropin_sprite.png");
    background-position: 0 -352px;
    display: block;
    height: 28px;
    text-indent: -999em;
    width: 44px;

	position: absolute;
    top: 25px;
    left: 5px;
}

.payment-method-icon.diners-club {
    background-image: url("img/braintree_dropin_sprite.png");
    background-position: 0 -128px;
    display: block;
    height: 28px;
    text-indent: -999em;
    width: 44px;

	position: absolute;
    top: 25px;
    left: 5px;
}

.payment-method-icon.maestro {
    background-image: url("img/braintree_dropin_sprite.png");
    background-position: 0 -240px;
    display: block;
    height: 28px;
    text-indent: -999em;
    width: 44px;

	position: absolute;
    top: 25px;
    left: 5px;
}

.payment-method-icon.discover {
    background-image: url("img/braintree_dropin_sprite.png");
    background-position: 0 -156px;
    display: block;
    height: 28px;
    text-indent: -999em;
    width: 44px;

	position: absolute;
    top: 25px;
    left: 5px;
}

.payment-method-icon.jcb {
    background-image: url("img/braintree_dropin_sprite.png");
    background-position: 0 -212px;
    display: block;
    height: 28px;
    text-indent: -999em;
    width: 44px;

	position: absolute;
    top: 25px;
    left: 5px;
}

.inputError {
    box-shadow: 0 0 5px #ff0101 !important;
}

.invalid {
    box-shadow: 0 0 5px #ff0101 !important;
}

label {
    text-transform:none !important;
     font-size: 13px !important;
}

.pay-btn {
	background: #69a219 none repeat scroll 0 0 !important;
    border-color: #558512 !important;
    border-style: solid !important;
    border-width: 1px 1px 3px !important;
	font-weight: bold;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

fieldset {

margin-bottom: 0 !important;

}

.bt_form_wrap {

width: 95% !important;

}

#bt_card_number, #bt_cvv, #bt_exp_date {

background: #fff none repeat scroll 0 0;

height: 34px;

border: 1px solid #cccccc;

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;

transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;

padding: 0 10px !important;

}

#bt_card_number {

padding: 0 55px !important;

}

#cvv-icon.payment-method-icon {

background-position: 0 -100px;

display: block;

text-indent: -999em;

position: relative;

top: -52px;

width: 44px;

float: right;

height: 26px;

left: -4px;

border: 1px solid #ccc;

}

.payment-method-icon.master-card {

background-position: 0 -268px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.visa {

background-position: 0 -380px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.american-express {

background-position: 0 -352px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.diners-club {

background-position: 0 -128px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.maestro {

background-position: 0 -240px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.discover {

background-position: 0 -156px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.jcb {

background-position: 0 -212px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.inputError {

box-shadow: 0 0 5px #ff0101 !important;

}

.invalid {

box-shadow: 0 0 5px #ff0101 !important;

}

label {

text-transform:none !important;

font-size: 13px !important;

}

.pay-btn {

background: #69a219 none repeat scroll 0 0 !important;

border-color: #558512 !important;

border-style: solid !important;

border-width: 1px 1px 3px !important;

font-weight: bold;

}

hosted_field_style.js

(function() {

	var BTFn = {};

	BTFn.sendJSON = function($obj) {

		$.ajax({
			dataType: "text",
			type: "POST",
			data: { action: "generateclienttoken"},
			url: "braintree_hosted_fields_with_style_demo.php",
			success: function (req) {
				BTFn.initBT(req, $obj);
			},
			error: function() {
			}
		});
	};

	BTFn.initBT = function(req, $obj) {

		// we're on the custom fields tab
		braintree.setup(req, 'custom', {
			id: 'bt_custom_form',
			hostedFields: {
				number: {
					selector: '#bt_card_number'
				},
				cvv: {
					selector: '#bt_cvv'
				},
				expirationDate: {
					selector: '#bt_exp_date'
				},
				onFieldEvent: handleFieldEvent,
				styles: {
				  '.invalid': {
					'color': '#D0041D'
				  }
				}
			},
			onReady: function() {
				BTFn.showBtForm();
			},
			onError: function(error) {
				BTFn.showFormErrors(error);
				$obj.show().closest('.btn_container').find('.loader_img').hide();
			},
			paypal:{
				container:'bt_paypal_container',
			}
		});
	};

	BTFn.showBtForm = function() {

		var eAnimation = this.detectAnimationEvent();
		$('.loader_container').addClass('fadeOut');

		$('.loader_container').one(eAnimation, function(event) {
			$('.loader_container').remove();
			$('.bt_form_wrap').removeClass('hide');
			$('.bt_form_wrap').addClass('fadeIn').removeClass('invisible');
		});
	};

	BTFn.detectAnimationEvent = function() {

		var t, el = document.createElement("fakeelement");

		var animations = {
			"animation"      : "animationend",
			"OAnimation"     : "oAnimationEnd",
			"MozAnimation"   : "animationend",
			"WebkitAnimation": "webkitAnimationEnd"
		}

		for (t in animations){
			if (el.style[t] !== undefined){
				return animations[t];
			}
		}
	};

	BTFn.showFormErrors = function(error) {

		var inputMap = {
			'number' : '#bt_card_number',
			'cvv' : '#bt_cvv',
			'expirationDate' : '#bt_exp_date'
		};
		if(!error.details) {
			$('.inputFields').addClass('inputError');
		}else{
			var i, errorLength = error.details.invalidFieldKeys.length;
			$('.inputFields').removeClass('inputError');
			for(var i=0; i < errorLength; i++) {
				$(inputMap[error.details.invalidFieldKeys[i]]).addClass('inputError');
			}
		}
	};

	handleFieldEvent = function(event) {  
	  //console.log((event.card));
	  
	  /* Other events
		if (event.type === "focus") {
		  // Handle focus
		} else if (event.type === "blur") {
		  // Handle blur
		} else if (event.type === "fieldStateChange") {
		  // Handle a change in validation or card type
		  console.log(event.isValid); // true|false
		  if (event.card) {
			console.log(event.card.type);
			// visa|master-card|american-express|diners-club|discover|jcb|unionpay|maestro
		  }
		}
	  */
	  
	  if (event.type === "focus") {
		  // Handle focus
		  $('.inputFields').removeClass('inputError');
	  }

	  iconType = document.getElementsByClassName("payment-method-icon")[0];
	  iconType.className = "payment-method-icon";
	  if (event.card) iconType.className += " " + event.card.type;
	}

	$(document).ready(function() {

		var $pay_btn = $('.pay-btn');
		BTFn.sendJSON($pay_btn);
		$pay_btn.on('click', function() {
			$(this).hide().closest('.btn_container').find('.loader_img').css('display', 'inline-block');
		});
	});
})();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

(function() {

var BTFn = {};

BTFn.sendJSON = function($obj) {

$.ajax({

dataType: "text",

type: "POST",

data: { action: "generateclienttoken"},

url: "braintree_hosted_fields_with_style_demo.php",

success: function (req) {

BTFn.initBT(req, $obj);

error: function() {

}

});

};

BTFn.initBT = function(req, $obj) {

// we're on the custom fields tab

braintree.setup(req, 'custom', {

id: 'bt_custom_form',

hostedFields: {

number: {

selector: '#bt_card_number'

cvv: {

selector: '#bt_cvv'

expirationDate: {

selector: '#bt_exp_date'

onFieldEvent: handleFieldEvent,

styles: {

'.invalid': {

'color': '#D0041D'

}

onReady: function() {

BTFn.showBtForm();

onError: function(error) {

BTFn.showFormErrors(error);

$obj.show().closest('.btn_container').find('.loader_img').hide();

paypal:{

container:'bt_paypal_container',

}

});

};

BTFn.showBtForm = function() {

var eAnimation = this.detectAnimationEvent();

$('.loader_container').addClass('fadeOut');

$('.loader_container').one(eAnimation, function(event) {

$('.loader_container').remove();

$('.bt_form_wrap').removeClass('hide');

$('.bt_form_wrap').addClass('fadeIn').removeClass('invisible');

});

};

BTFn.detectAnimationEvent = function() {

var t, el = document.createElement("fakeelement");

var animations = {

"animation" : "animationend",

"OAnimation" : "oAnimationEnd",

"MozAnimation" : "animationend",

"WebkitAnimation": "webkitAnimationEnd"

}

for (t in animations){

if (el.style[t] !== undefined){

return animations[t];

}

};

BTFn.showFormErrors = function(error) {

var inputMap = {

'number' : '#bt_card_number',

'cvv' : '#bt_cvv',

'expirationDate' : '#bt_exp_date'

};

if(!error.details) {

$('.inputFields').addClass('inputError');

}else{

var i, errorLength = error.details.invalidFieldKeys.length;

$('.inputFields').removeClass('inputError');

for(var i=0; i < errorLength; i++) {

$(inputMap[error.details.invalidFieldKeys[i]]).addClass('inputError');

}

};

handleFieldEvent = function(event) {

//console.log((event.card));

/* Other events

if (event.type === "focus") {

// Handle focus

} else if (event.type === "blur") {

// Handle blur

} else if (event.type === "fieldStateChange") {

// Handle a change in validation or card type

console.log(event.isValid); // true|false

if (event.card) {

console.log(event.card.type);

}

if (event.type === "focus") {

// Handle focus

$('.inputFields').removeClass('inputError');

}

iconType = document.getElementsByClassName("payment-method-icon")[0];

iconType.className = "payment-method-icon";

if (event.card) iconType.className += " " + event.card.type;

}

$(document).ready(function() {

var $pay_btn = $('.pay-btn');

BTFn.sendJSON($pay_btn);

$pay_btn.on('click', function() {

$(this).hide().closest('.btn_container').find('.loader_img').css('display', 'inline-block');

});

})();

You can download full script from here.

For any queries regarding above script put comments below or reach me vie mail – sagarsdeshmukh91@gmail.com

Jeff
August 4, 2016 at 1:09 am

This example is pretty helpful, and a needed resource!

However, although I was able to get several of the scripts working, YEA!,( I’ve just tried 2 so far), both would not work unless I removed a few fields, I got the same error with the drop-in and the hosted fields scripts…

Notice: Undefined index: email in C:\Users\Jeff\Dropbox\_websites\braintree_02\public_html\braintree_dropin_demo.php on line 51

Notice: Undefined index: phonenumber in C:\Users\Jeff\Dropbox\_websites\braintree_02\public_html\braintree_dropin_demo.php on line 58

I thought it might be that email was a custom field, but that was not the case. Any idea what might be going on?

Thanks, Jeff

1. Sagar Deshmukh *
  August 4, 2016 at 9:28 am
  
  Hello Jeff,
  
  Thanks you for your updates.
  I fix those Notice level error in my scripts.
  Here is updated file link,
  https://github.com/sagarsdeshmukh/Braintree_gateway_integration_demo_with_PHP/blob/master/braintree_dropin_demo.php
  
  SagarD

ILovePHP

Open knowledge sharing platform for php lovers

Braintree Hosted Fields integration with Custom Stylesheet(css) and validation

2 comments:

Leave a Reply Cancel reply