Archives for: May 2016

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

Posted on 13 May, 2016 in JQuery, Payment Gateway, Payment Gateway, PHP

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

Tags: Braintree, Payment Gateway, PayPal, PHP, Web Development

Braintree (PayPal) Payment gateway integration with 3D secure option in PHP

Posted on 3 May, 2016 in JQuery, Payment Gateway, Payment Gateway, PHP

ilovephp.net

By using 3D secure, we provide an additional layer of verification to cardholders and merchants. In checkout process, braintree verify the card details to check does the card has enabled for 3D secure verification OR not. If the card is enabled for authenticate using 3D Secure, the Braintree SDK will display a web page which is provided by the card issuer. The 3D secure authentication page will verify the cardholder’s identity, which is usually done by entering a password.

Note : Before proceed with Braintree 3D secure integration, the braintree Sandbox Account is need to enabled for 3D secure. To enroll in 3D Secure, please contact the Braintree support team at support@braintreepayments.com

If want to make 3D secure transaction with specific payment method just checkout below script.

<?php

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

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

$braintree_cust_id = "xxxxxxx";

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['make_payment']) && $_POST['make_payment'])
{
	// Customer details
	$customer_firstname   = $_POST['c_firstname'];
	$customer_lastname    = $_POST['c_lastname'];
	$customer_email       = $_POST['c_email'];
	$customer_phonenumber = $_POST['c_phonenumber'];
	// EOF Customer details

	// Customer billing details
	$firstname = $_POST['firstname'];
	$lastname  = $_POST['lastname'];
	$email     = $_POST['c_email'];
	$address1  = $_POST['address1'];
	$address2  = $_POST['address2'];
	$city      = $_POST['city'];
	$state     = $_POST['state'];
	$postcode  = $_POST['postcode'];
	$country   = $_POST['country'];
	$phone     = $_POST['c_phonenumber'];
	// EOF Customer billing details

	$payment_method_nonce = "";
	$enable_3d_flag = ""; // 3D secure is apply only for credit card , if payment method is PayPal then skip it
	if(isset($_POST['payment_method_nonce']))
	{
		$payment_method_nonce = $_POST['payment_method_nonce'];
		$enable_3d_flag = 1;
	}
	else
	{
		$payment_method_details = get_default_payment_method($braintree_cust_id);
		$bt_result = Braintree_PaymentMethodNonce::create($payment_method_details["token"]);
		$payment_method_nonce = $bt_result->paymentMethodNonce->nonce;
		$enable_3d_flag = 0;
	}

	$sale = array(
				'amount'   => $_POST['amount'],
				'orderId'  => $_POST['invoiceid'],
				'paymentMethodNonce' => $payment_method_nonce,
				'customer' => array(
								'firstName' => $customer_firstname,
								'lastName'  => $customer_lastname,
								'phone'     => $customer_phonenumber,
								'email'     => $customer_email
							  ),
				'billing' => array(
								'firstName'         => $firstname,
								'lastName'          => $lastname,
								'streetAddress'     => $address1,
								'extendedAddress'   => $address2,
								'locality'          => $city,
								'region'            => $state,
								'postalCode'        => $postcode,
								'countryCodeAlpha2' => $country
							 ),
				'options' => array(
								'submitForSettlement'   => true,
								'storeInVaultOnSuccess' => true
							 )
			);
			
	if ($enable_3d_flag == 1)
	{
		$sale["options"]["three_d_secure"] = array('required' => true);
	}
						
	$result = Braintree_Transaction::sale($sale);
	if ($result->success)
	{
		echo "Braintree_cust_id : ".$braintree_cust_id = $result->transaction->_attributes['customer']['id'];
	}
	else
	{
		echo "Error : ".$result->_attributes['message'];
	}
	
	print_r($result); exit;
}
else
{
	$clientToken = Braintree_ClientToken::generate(array(
		 'customerId' => $braintree_cust_id
	));

	$payment_method_details = get_default_payment_method($braintree_cust_id);
	
	$bt_payment_method_nonce = "";
	
	if ($payment_method_details["is_pp_account"] != true)
	{
		$bt_result = Braintree_PaymentMethodNonce::create($payment_method_details["token"]);
		$bt_payment_method_nonce = $bt_result->paymentMethodNonce->nonce;
	}
}

function get_default_payment_method($braintree_cust_id)
{
	$bt_customer = Braintree_Customer::find($braintree_cust_id);
	$payment_method_details = array();
	
	foreach($bt_customer->creditCards as $key => $card_obj)
	{
		if ($card_obj->default)
		{
			$payment_method_details["imageUrl"] = $card_obj->imageUrl;
			$payment_method_details["cardType"] = $card_obj->cardType;
			$payment_method_details["last2"] = substr($card_obj->last4,2,2);
			$payment_method_details["expirationDate"] = $card_obj->expirationMonth."/".substr($card_obj->expirationYear,2,2);
			$payment_method_details["token"] = $card_obj->token;
			$payment_method_details["is_pp_account"] = false;
		}
	}
	
	foreach($bt_customer->paypalAccounts as $key => $card_obj)
	{
		if ($card_obj->default)
		{
			$payment_method_details["imageUrl"] = $card_obj->imageUrl;
			$payment_method_details["email"] = $card_obj->email;
			$payment_method_details["token"] = $card_obj->token;
			$payment_method_details["is_pp_account"] = true;
		}
	}

	return $payment_method_details;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Braintree : Checkout</title>
</head>
<body>
<link href="style.css" type="text/css" rel="stylesheet" />
<h1 class="bt_title">Braintree 3D Secure Integration Demo</h1>
<div class="dropin-page">
<form id="checkout" method="post" action="" onSubmit="verify_3d_secure(); return false;">
  <h4 class="bt_title">Customer Information</h4>
  <input type="hidden" name="invoiceid" value="123456">
  <fieldset class="one_off_firstname">
    <label class="input-label" for="firstname">
    <span class="field-name">First Name</span>
    <input id="c_firstname" name="c_firstname" class="input-field card-field" type="text" placeholder="First Name" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <fieldset class="one_off_lastname">
    <label class="input-label" for="lastname">
    <span class="field-name">Last Name</span>
    <input id="c_lastname" name="c_lastname" class="input-field card-field" type="text" placeholder="Last Name" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <fieldset class="one_off_lastname">
    <label class="input-label" for="email">
    <span class="field-name">Email</span>
    <input id="c_email" name="c_email" class="input-field card-field" type="text" placeholder="Email" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <fieldset class="one_off_phonenumber">
    <label class="input-label" for="phonenumber">
    <span class="field-name">Phone Number</span>
    <input id="c_phonenumber" name="c_phonenumber" class="input-field card-field" type="text"placeholder="Phone Number" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <h4 class="bt_title">Customer Billing Information</h4>
  <fieldset class="one_off_firstname">
    <label class="input-label" for="firstname">
    <span class="field-name">First Name</span>
    <input id="firstname" name="firstname" class="input-field card-field" type="text" placeholder="First Name" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <fieldset class="one_off_lastname">
    <label class="input-label" for="lastname">
    <span class="field-name">Last Name</span>
    <input id="lastname" name="lastname" class="input-field card-field" type="text" placeholder="Last Name" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <fieldset class="one_off_address1">
    <label class="input-label" for="address1">
    <span class="field-name">Address1</span>
    <input id="address1" name="address1" class="input-field card-field" type="text" placeholder="Address" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <fieldset class="one_off_address2">
    <label class="input-label" for="address2">
    <span class="field-name">Address2</span>
    <input id="address2" name="address2" class="input-field card-field" type="text" placeholder="Address" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <fieldset class="one_off_city">
    <label class="input-label" for="city">
    <span class="field-name">City/Town</span>
    <input id="city" name="city" class="input-field card-field" type="text" placeholder="City/Town" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <fieldset class="one_off_state">
    <label class="input-label" for="state">
    <span class="field-name">State/Region</span>
    <input id="state" name="state" class="input-field card-field" type="text" placeholder="State/Region" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <fieldset class="one_off_postcode">
    <label class="input-label" for="postcode">
    <span class="field-name">Post Code</span>
    <input id="postcode" name="postcode" class="input-field card-field" type="text" placeholder="Post Code" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <fieldset class="one_off_country">
    <label class="input-label" for="country">
    <span class="field-name">Country</span>
    <input id="country" name="country" class="input-field card-field" type="text" placeholder="Country" autocomplete="off">
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <h4 class="bt_title">Credit Card Details</h4>
  <fieldset style="margin-left: 220px;">
      <?php if ($payment_method_details["is_pp_account"]) { ?>
      <div align="center">
        <div style="float:left"> <img src="<?php echo $payment_method_details["imageUrl"] ?>" alt="PayPal" /> </div>
        <div style="float:left; margin-left: 10px;margin-top:7px"> <b><?php echo $payment_method_details["email"] ?></b> </div>
      </div>
      <?php } else { ?>
      <div align="center">
        <div style="float:left"> <img src="<?php echo $payment_method_details["imageUrl"] ?>" alt="<?php echo $payment_method_details["cardType"] ?>" /> </div>
        <div style="float:left; margin-left: 10px; margin-top:5px"> <b><?php echo $payment_method_details["cardType"] ?></b> <span style="color:#999">ending in <?php echo $payment_method_details["last2"] ?></span><br />
          <span style="color:#999">Expires <?php echo $payment_method_details["expirationDate"] ?></span> </div>
      </div>
      <?php } ?>
  </fieldset>
  <fieldset class="one_off_amount">
    <label class="input-label" for="amount">
    <span class="field-name">Amount</span>
    <input id="amount" name="amount" class="input-field card-field" type="number" inputmode="numeric" placeholder="Amount" autocomplete="off" step="any" required>
    <div class="invalid-bottom-bar"></div>
    </label>
  </fieldset>
  <div class="btn_container">
    <input type="hidden" name="make_payment" value="1">
    <input type="submit" value="Make Payment" class="pay-btn">
    <span class="loader_img"></span> </div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://js.braintreegateway.com/v2/braintree.js"></script> 
<!-- TO DO : Place below JS code in js file and include that JS file --> 
<script type="text/javascript">
  function verify_3d_secure()
  {
    var is_pp_account = "<?php echo $payment_method_details["is_pp_account"] ?>"; // check payment method is PayPal

    if (is_pp_account != true)
    {
        var client = new braintree.api.Client({
          clientToken: "<?php echo $clientToken; ?>"
        });

        client.verify3DS({
          amount: $("#amount").val(),
          creditCard: "<?php echo $bt_payment_method_nonce; ?>"
        }, function (error, response) {
          // Handle response
          if (!error) {
            // 3D Secure finished. Using response.nonce you may proceed with the transaction with the associated server side parameters below.
            appendTo(document.forms.checkout, 'input', {name: 'payment_method_nonce', type: 'hidden', value: response.nonce});
            document.forms.checkout.submit();
          } else {
            // Handle errors
            console.log("Error :"+error.message);
          }
        });
    }
    else
    {
      document.forms.checkout.submit();
    }
  }

  function appendTo($cont, childSelector, options)
  {
	var input = document.createElement(childSelector);
	input.type = options.type;
	input.name = options.name;
	input.value = options.value;
	$cont.appendChild(input);
  };
</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

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

<?php

// Braintree library

require 'braintree/lib/Braintree.php';

$params = array(

"testmode" => "on",

"merchantid" => "xxxxxxx",

"publickey" => "xxxxxxx",

"privatekey" => "xxxxxxxxxxxxxxxxxxxxx",

);

$braintree_cust_id = "xxxxxxx";

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['make_payment']) && $_POST['make_payment'])

{

// Customer details

$customer_firstname = $_POST['c_firstname'];

$customer_lastname = $_POST['c_lastname'];

$customer_email = $_POST['c_email'];

$customer_phonenumber = $_POST['c_phonenumber'];

// EOF Customer details

// Customer billing details

$firstname = $_POST['firstname'];

$lastname = $_POST['lastname'];

$email = $_POST['c_email'];

$address1 = $_POST['address1'];

$address2 = $_POST['address2'];

$city = $_POST['city'];

$state = $_POST['state'];

$postcode = $_POST['postcode'];

$country = $_POST['country'];

$phone = $_POST['c_phonenumber'];

// EOF Customer billing details

$payment_method_nonce = "";

$enable_3d_flag = ""; // 3D secure is apply only for credit card , if payment method is PayPal then skip it

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

{

$payment_method_nonce = $_POST['payment_method_nonce'];

$enable_3d_flag = 1;

}

else

{

$payment_method_details = get_default_payment_method($braintree_cust_id);

$bt_result = Braintree_PaymentMethodNonce::create($payment_method_details["token"]);

$payment_method_nonce = $bt_result->paymentMethodNonce->nonce;

$enable_3d_flag = 0;

}

$sale = array(

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

'orderId' => $_POST['invoiceid'],

'paymentMethodNonce' => $payment_method_nonce,

'customer' => array(

'firstName' => $customer_firstname,

'lastName' => $customer_lastname,

'phone' => $customer_phonenumber,

'email' => $customer_email

'billing' => array(

'firstName' => $firstname,

'lastName' => $lastname,

'streetAddress' => $address1,

'extendedAddress' => $address2,

'locality' => $city,

'region' => $state,

'postalCode' => $postcode,

'countryCodeAlpha2' => $country

'options' => array(

'submitForSettlement' => true,

'storeInVaultOnSuccess' => true

)

);

if ($enable_3d_flag == 1)

{

$sale["options"]["three_d_secure"] = array('required' => true);

}

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

if ($result->success)

{

echo "Braintree_cust_id : ".$braintree_cust_id = $result->transaction->_attributes['customer']['id'];

}

else

{

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

}

print_r($result); exit;

}

else

{

$clientToken = Braintree_ClientToken::generate(array(

'customerId' => $braintree_cust_id

));

$payment_method_details = get_default_payment_method($braintree_cust_id);

$bt_payment_method_nonce = "";

if ($payment_method_details["is_pp_account"] != true)

{

$bt_result = Braintree_PaymentMethodNonce::create($payment_method_details["token"]);

$bt_payment_method_nonce = $bt_result->paymentMethodNonce->nonce;

}

function get_default_payment_method($braintree_cust_id)

{

$bt_customer = Braintree_Customer::find($braintree_cust_id);

$payment_method_details = array();

foreach($bt_customer->creditCards as $key => $card_obj)

{

if ($card_obj->default)

{

$payment_method_details["imageUrl"] = $card_obj->imageUrl;

$payment_method_details["cardType"] = $card_obj->cardType;

$payment_method_details["last2"] = substr($card_obj->last4,2,2);

$payment_method_details["expirationDate"] = $card_obj->expirationMonth."/".substr($card_obj->expirationYear,2,2);

$payment_method_details["token"] = $card_obj->token;

$payment_method_details["is_pp_account"] = false;

}

foreach($bt_customer->paypalAccounts as $key => $card_obj)

{

if ($card_obj->default)

{

$payment_method_details["imageUrl"] = $card_obj->imageUrl;

$payment_method_details["email"] = $card_obj->email;

$payment_method_details["token"] = $card_obj->token;

$payment_method_details["is_pp_account"] = true;

}

return $payment_method_details;

}

<!DOCTYPE html>

<head>

<title>Braintree : Checkout</title>

</head>

<body>

<h1 class="bt_title">Braintree 3D Secure Integration Demo</h1>

<h4 class="bt_title">Customer Information</h4>

<span class="field-name">First Name</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">Email</span>

</label>

</fieldset>

<span class="field-name">Phone Number</span>

</label>

</fieldset>

<h4 class="bt_title">Customer Billing Information</h4>

<span class="field-name">First Name</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">Address1</span>

</label>

</fieldset>

<span class="field-name">Address2</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">State/Region</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">Country</span>

</label>

</fieldset>

<h4 class="bt_title">Credit Card Details</h4>

<?php if ($payment_method_details["is_pp_account"]) { ?>

<div style="float:left"> <img src="<?php echo $payment_method_details["imageUrl"] ?>" alt="PayPal" /> </div>

</div>

<?php } else { ?>

<div style="float:left; margin-left: 10px; margin-top:5px"> <b><?php echo $payment_method_details["cardType"] ?></b> <span style="color:#999">ending in <?php echo $payment_method_details["last2"] ?></span><br />

<span style="color:#999">Expires <?php echo $payment_method_details["expirationDate"] ?></span> </div>

</div>

<?php } ?>

</fieldset>

<span class="field-name">Amount</span>

</label>

</fieldset>

</form>

</div>

function verify_3d_secure()

{

var is_pp_account = "<?php echo $payment_method_details["is_pp_account"] ?>"; // check payment method is PayPal

if (is_pp_account != true)

{

var client = new braintree.api.Client({

clientToken: "<?php echo $clientToken; ?>"

});

client.verify3DS({

amount: $("#amount").val(),

creditCard: "<?php echo $bt_payment_method_nonce; ?>"

}, function (error, response) {

// Handle response

if (!error) {

// 3D Secure finished. Using response.nonce you may proceed with the transaction with the associated server side parameters below.

appendTo(document.forms.checkout, 'input', {name: 'payment_method_nonce', type: 'hidden', value: response.nonce});

document.forms.checkout.submit();

} else {

// Handle errors

console.log("Error :"+error.message);

}

});

}

else

{

document.forms.checkout.submit();

}

function appendTo($cont, childSelector, options)

{

var input = document.createElement(childSelector);

input.type = options.type;

input.name = options.name;

input.value = options.value;

$cont.appendChild(input);

};

</script>

</body>

</html>

Braintree Payment Gateway integration with 3D secure in Drop in-UI Example (Demo) :

<?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']))
{
	// Customer details
	$customer_firstname   = $_POST['c_firstname'];
	$customer_lastname    = $_POST['c_lastname'];
	$customer_email       = $_POST['c_email'];
	$customer_phonenumber = $_POST['c_phonenumber'];
	// EOF Customer details

	// Customer billing details
	$firstname = $_POST['firstname'];
	$lastname  = $_POST['lastname'];
	$email     = $_POST['c_email'];
	$address1  = $_POST['address1'];
	$address2  = $_POST['address2'];
	$city      = $_POST['city'];
	$state     = $_POST['state'];
	$postcode  = $_POST['postcode'];
	$country   = $_POST['country'];
	$phone     = $_POST['c_phonenumber'];
	// EOF Customer billing details

	$sale = array(
				'amount'   => $_POST['amount'],
				'orderId'  => $_POST['invoiceid'],
				'paymentMethodNonce' => $_POST['payment_method_nonce'],   // Autogenerated field from braintree
				'customer' => array(
								'firstName' => $customer_firstname,
								'lastName'  => $customer_lastname,
								'phone'     => $customer_phonenumber,
								'email'     => $customer_email
							  ),
				'billing' => array(
								'firstName'         => $firstname,
								'lastName'          => $lastname,
								'streetAddress'     => $address1,
								'extendedAddress'   => $address2,
								'locality'          => $city,
								'region'            => $state,
								'postalCode'        => $postcode,
								'countryCodeAlpha2' => $country
							 ),
				'options' => array(
								'submitForSettlement'   => true,
								'storeInVaultOnSuccess' => true,
								'three_d_secure' => array('required' => true)
							 )
			);
						
	$result = Braintree_Transaction::sale($sale);
	if ($result->success)
	{
		echo "Braintree_cust_id : ".$braintree_cust_id = $result->transaction->_attributes['customer']['id']; // After first successfull transaction, save this Braintree_cust_id in DB and use for future transactions
	}
	else
	{
		echo "Error : ".$result->_attributes['message'];
	}
	
	print_r($result); exit;
}
else
if (isset($_POST['braintree_cust_id']))
{
	$sale = array(
				'customerId' => $braintree_cust_id,
				'amount'     => $_POST['amount'],
				'orderId'    => $_POST['invoiceid'],  // This field is get back in responce to track this transaction
				'options'    => array(
									'submitForSettlement' => true
								)
			);
}
else
if (isset($_POST['action']) && $_POST['action'] == 'generateclienttoken')
{
	//$braintree_cust_id = "31904842";
	// Generate the nonce and send it back
	try
	{
		$clientToken = Braintree_ClientToken::generate(array(
			// use customerId to get a previous customer from the vault
			// 'customerId' => $braintree_cust_id    // $braintree_cust_id is Fetch from DB
		));
	}
	catch(Exception $e)
	{
		// cannot get the customer from the vault!!
		$clientToken = Braintree_ClientToken::generate();
	}
	
	echo $clientToken; exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkout</title>
</head>
<body>
<link href="style.css" type="text/css" rel="stylesheet" />
<h1 class="bt_title">Braintree Drop-in</h1>
<div class="dropin-page">
  <form id="checkout" method="post" action="">
    <h4 class="bt_title">Customer Information</h4>
    <input type="hidden" name="invoiceid" value="123456">
    <fieldset class="one_off_firstname">
      <label class="input-label" for="firstname">
      <span class="field-name">First Name</span>
      <input id="c_firstname" name="c_firstname" class="input-field card-field" type="text" placeholder="First Name" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_lastname">
      <label class="input-label" for="lastname">
      <span class="field-name">Last Name</span>
      <input id="c_lastname" name="c_lastname" class="input-field card-field" type="text" placeholder="Last Name" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_lastname">
      <label class="input-label" for="email">
      <span class="field-name">Email</span>
      <input id="c_email" name="c_email" class="input-field card-field" type="text" placeholder="Email" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_phonenumber">
      <label class="input-label" for="phonenumber">
      <span class="field-name">Phone Number</span>
      <input id="c_phonenumber" name="c_phonenumber" class="input-field card-field" type="text"placeholder="Phone Number" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <h4 class="bt_title">Customer Billing Information</h4>
    <fieldset class="one_off_firstname">
      <label class="input-label" for="firstname">
      <span class="field-name">First Name</span>
      <input id="firstname" name="firstname" class="input-field card-field" type="text" placeholder="First Name" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_lastname">
      <label class="input-label" for="lastname">
      <span class="field-name">Last Name</span>
      <input id="lastname" name="lastname" class="input-field card-field" type="text" placeholder="Last Name" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_address1">
      <label class="input-label" for="address1">
      <span class="field-name">Address1</span>
      <input id="address1" name="address1" class="input-field card-field" type="text" placeholder="Address" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_address2">
      <label class="input-label" for="address2">
      <span class="field-name">Address2</span>
      <input id="address2" name="address2" class="input-field card-field" type="text" placeholder="Address" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_city">
      <label class="input-label" for="city">
      <span class="field-name">City/Town</span>
      <input id="city" name="city" class="input-field card-field" type="text" placeholder="City/Town" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_state">
      <label class="input-label" for="state">
      <span class="field-name">State/Region</span>
      <input id="state" name="state" class="input-field card-field" type="text" placeholder="State/Region" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_postcode">
      <label class="input-label" for="postcode">
      <span class="field-name">Post Code</span>
      <input id="postcode" name="postcode" class="input-field card-field" type="text" placeholder="Post Code" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_country">
      <label class="input-label" for="country">
      <span class="field-name">Country</span>
      <input id="country" name="country" class="input-field card-field" type="text" placeholder="Country" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <h4 class="bt_title">Credit Card Details</h4>
    <div id="dropin">
      <div class="loader_container">
        <div>Loading...</div>
      </div>
    </div>
    <fieldset class="one_off_amount">
      <?php
                if(isset($_GET['amt'])) {
                    $amt = number_format((float)$_GET['amt'], 2, '.', '');
            ?>
      <h3>Your bill is for an amount of $ <?php echo $amt; ?></h3>
      <input type="hidden" name="amount" step="any" id="amount" value="<?php echo $amt; ?>" />
      <?php
                }else{
            ?>
      <label class="input-label" for="amount">
      <span class="field-name">Amount</span>
      <input id="amount" name="amount" class="input-field card-field" type="number" inputmode="numeric" placeholder="Amount" autocomplete="off" step="any">
      <div class="invalid-bottom-bar"></div>
      </label>
      <?php
                }
            ?>
    </fieldset>
    <div class="btn_container">
      <input type="submit" value="Make Payment" class="pay-btn">
      <span class="loader_img"></span> </div>
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://js.braintreegateway.com/v2/braintree.js"></script> 
<!-- TO DO : Place below JS code in js file and include that JS file --> 
<script type="text/javascript">
(function() {
    
    var BTFn = {};
	var bt_client_token = '';

    BTFn.sendJSON = function($pay_btn) {

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

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

        braintree.setup(
            req,
            'dropin', {
                container: 'dropin',
                onPaymentMethodReceived:function(obj){
                    
                    var client = new braintree.api.Client({
                        clientToken: bt_client_token
                    });

                    client.verify3DS({
                        amount: $('#amount').val(),
                        creditCard: obj.nonce
                    }, function (error, response) {
                        if (!error) {
                            // 3D Secure finished. send the response.nonce to server for further processing
                            BTFn.appendTo(document.forms.checkout, 'input', {name: 'payment_method_nonce', type: 'hidden', value: response.nonce});
                            document.forms.checkout.submit();
                        } else {
                            // Handle errors
                            alert("Error : "+error.message);
                        }
                    });
                },
                onReady:function(){
                    $('.loader_container').remove();
                },
                onError: function(error) {
                    $pay_btn.show().closest('.btn_container').find('.loader_img').hide();
                }
        });
    };

    BTFn.formValidate = function($form, $submit, $amount, $pay_btn) {

        var THIS = this;

        $submit.on('click', function(e) {

            $('.input-label .invalid-bottom-bar').removeClass('invalid');
            $(this).hide().closest('.btn_container').find('.loader_img').css('display', 'inline-block');
        });
    };

    BTFn.updateForm = function($form, link) {
        
        $form.attr('action', link);
        $('.one_off_amount, .monthly_amount').toggleClass('hide');
    };

    BTFn.appendTo = function($cont, childSelector, options) {

        var input = document.createElement(childSelector);
        input.type = options.type;
        input.name = options.name;
        input.value = options.value;
        $cont.appendChild(input);
    };

    $(document).ready(function() {

        $('.loader_container').find("div").show();

		var $form = $('#checkout'), $submit = $('#checkout input[type="submit"]'), $amount = $('input[name="amount"]'), $pay_btn = $('.pay-btn');

        BTFn.sendJSON($pay_btn);
        BTFn.formValidate($form, $submit, $amount, $pay_btn);
    });
})();

</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

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

<?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']))

{

// Customer details

$customer_firstname = $_POST['c_firstname'];

$customer_lastname = $_POST['c_lastname'];

$customer_email = $_POST['c_email'];

$customer_phonenumber = $_POST['c_phonenumber'];

// EOF Customer details

// Customer billing details

$firstname = $_POST['firstname'];

$lastname = $_POST['lastname'];

$email = $_POST['c_email'];

$address1 = $_POST['address1'];

$address2 = $_POST['address2'];

$city = $_POST['city'];

$state = $_POST['state'];

$postcode = $_POST['postcode'];

$country = $_POST['country'];

$phone = $_POST['c_phonenumber'];

// EOF Customer billing details

$sale = array(

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

'orderId' => $_POST['invoiceid'],

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

'customer' => array(

'firstName' => $customer_firstname,

'lastName' => $customer_lastname,

'phone' => $customer_phonenumber,

'email' => $customer_email

'billing' => array(

'firstName' => $firstname,

'lastName' => $lastname,

'streetAddress' => $address1,

'extendedAddress' => $address2,

'locality' => $city,

'region' => $state,

'postalCode' => $postcode,

'countryCodeAlpha2' => $country

'options' => array(

'submitForSettlement' => true,

'storeInVaultOnSuccess' => true,

'three_d_secure' => array('required' => true)

)

);

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

if ($result->success)

{

echo "Braintree_cust_id : ".$braintree_cust_id = $result->transaction->_attributes['customer']['id']; // After first successfull transaction, save this Braintree_cust_id in DB and use for future transactions

}

else

{

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

}

print_r($result); exit;

}

else

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

{

$sale = array(

'customerId' => $braintree_cust_id,

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

'orderId' => $_POST['invoiceid'], // This field is get back in responce to track this transaction

'options' => array(

'submitForSettlement' => true

)

);

}

else

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

{

//$braintree_cust_id = "31904842";

// Generate the nonce and send it back

try

{

$clientToken = Braintree_ClientToken::generate(array(

// use customerId to get a previous customer from the vault

// 'customerId' => $braintree_cust_id // $braintree_cust_id is Fetch from DB

));

}

catch(Exception $e)

{

// cannot get the customer from the vault!!

$clientToken = Braintree_ClientToken::generate();

}

echo $clientToken; exit;

}

<!DOCTYPE html>

<head>

<title>Checkout</title>

</head>

<body>

<h1 class="bt_title">Braintree Drop-in</h1>

<h4 class="bt_title">Customer Information</h4>

<span class="field-name">First Name</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">Email</span>

</label>

</fieldset>

<span class="field-name">Phone Number</span>

</label>

</fieldset>

<h4 class="bt_title">Customer Billing Information</h4>

<span class="field-name">First Name</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">Address1</span>

</label>

</fieldset>

<span class="field-name">Address2</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">State/Region</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">Country</span>

</label>

</fieldset>

<h4 class="bt_title">Credit Card Details</h4>

<div>Loading...</div>

</div>

<?php

if(isset($_GET['amt'])) {

$amt = number_format((float)$_GET['amt'], 2, '.', '');

<h3>Your bill is for an amount of $ <?php echo $amt; ?></h3>

<?php

}else{

<span class="field-name">Amount</span>

</label>

<?php

}

</fieldset>

</form>

</div>

(function() {

var BTFn = {};

var bt_client_token = '';

BTFn.sendJSON = function($pay_btn) {

$.ajax({

dataType: "text",

type: "POST",

data: { action: "generateclienttoken"},

url: "braintree_dropin_with_3d_secure_demo.php",

success: function (req) {

bt_client_token = req;

BTFn.initBT(req, $pay_btn);

error: function() {

}

});

};

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

braintree.setup(

req,

'dropin', {

container: 'dropin',

onPaymentMethodReceived:function(obj){

var client = new braintree.api.Client({

clientToken: bt_client_token

});

client.verify3DS({

amount: $('#amount').val(),

creditCard: obj.nonce

}, function (error, response) {

if (!error) {

// 3D Secure finished. send the response.nonce to server for further processing

BTFn.appendTo(document.forms.checkout, 'input', {name: 'payment_method_nonce', type: 'hidden', value: response.nonce});

document.forms.checkout.submit();

} else {

// Handle errors

alert("Error : "+error.message);

}

});

onReady:function(){

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

onError: function(error) {

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

}

});

};

BTFn.formValidate = function($form, $submit, $amount, $pay_btn) {

var THIS = this;

$submit.on('click', function(e) {

$('.input-label .invalid-bottom-bar').removeClass('invalid');

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

});

};

BTFn.updateForm = function($form, link) {

$form.attr('action', link);

$('.one_off_amount, .monthly_amount').toggleClass('hide');

};

BTFn.appendTo = function($cont, childSelector, options) {

var input = document.createElement(childSelector);

input.type = options.type;

input.name = options.name;

input.value = options.value;

$cont.appendChild(input);

};

$(document).ready(function() {

$('.loader_container').find("div").show();

var $form = $('#checkout'), $submit = $('#checkout input[type="submit"]'), $amount = $('input[name="amount"]'), $pay_btn = $('.pay-btn');

BTFn.sendJSON($pay_btn);

BTFn.formValidate($form, $submit, $amount, $pay_btn);

});

})();

</script>

</body>

</html>

Braintree – Payment Gateway integration with 3D secure (Hosted Fields) example

<?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']))
{
	// Customer details
	$customer_firstname   = $_POST['c_firstname'];
	$customer_lastname    = $_POST['c_lastname'];
	$customer_email       = $_POST['c_email'];
	$customer_phonenumber = $_POST['c_phonenumber'];
	// EOF Customer details

	// Customer billing details
	$firstname = $_POST['firstname'];
	$lastname  = $_POST['lastname'];
	$email     = $_POST['c_email'];
	$address1  = $_POST['address1'];
	$address2  = $_POST['address2'];
	$city      = $_POST['city'];
	$state     = $_POST['state'];
	$postcode  = $_POST['postcode'];
	$country   = $_POST['country'];
	$phone     = $_POST['c_phonenumber'];
	// EOF Customer billing details

	$sale = array(
				'amount'   => $_POST['amount'],
				'orderId'  => $_POST['invoiceid'],
				'paymentMethodNonce' => $_POST['payment_method_nonce'],   // Autogenerated field from braintree
				'customer' => array(
								'firstName' => $customer_firstname,
								'lastName'  => $customer_lastname,
								'phone'     => $customer_phonenumber,
								'email'     => $customer_email
							  ),
				'billing' => array(
								'firstName'         => $firstname,
								'lastName'          => $lastname,
								'streetAddress'     => $address1,
								'extendedAddress'   => $address2,
								'locality'          => $city,
								'region'            => $state,
								'postalCode'        => $postcode,
								'countryCodeAlpha2' => $country
							 ),
				'options' => array(
								'submitForSettlement'   => true,
								'storeInVaultOnSuccess' => true,
								'three_d_secure' => array('required' => true)
							 )
			);
						
	$result = Braintree_Transaction::sale($sale);
	if ($result->success)
	{
		echo "Braintree_cust_id : ".$braintree_cust_id = $result->transaction->_attributes['customer']['id']; // After first successfull transaction, save this Braintree_cust_id in DB and use for future transactions
	}
	else
	{
		echo "Error : ".$result->_attributes['message'];
	}
	
	print_r($result); exit;
}
else
if (isset($_POST['braintree_cust_id']))
{
	$sale = array(
				'customerId' => $braintree_cust_id,
				'amount'     => $_POST['amount'],
				'orderId'    => $_POST['invoiceid'],  // This field is get back in responce to track this transaction
				'options'    => array(
									'submitForSettlement' => true
								)
			);
}
else
if (isset($_POST['action']) && $_POST['action'] == 'generateclienttoken')
{
	//$braintree_cust_id = "60033487";
	// Generate the nonce and send it back
	try
	{
		$clientToken = Braintree_ClientToken::generate(array(
			// use customerId to get a previous customer from the vault
			// 'customerId' => $braintree_cust_id    // $braintree_cust_id is Fetch from DB
		));
	}
	catch(Exception $e)
	{
		// cannot get the customer from the vault!!
		$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" />
</head>

<body>
<h1 class="bt_title">Braintree Hosted Fields Demo</h1>
<form id="bt_custom_form" name="bt_custom_form" method="post" action="">
  <div class="dropin-page">
    <h4 class="bt_title">Customer Information</h4>
    <input type="hidden" name="invoiceid" value="123456">
    <fieldset class="one_off_firstname">
      <label class="input-label" for="firstname">
      <span class="field-name">First Name</span>
      <input id="c_firstname" name="c_firstname" class="input-field card-field" type="text" placeholder="First Name" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_lastname">
      <label class="input-label" for="lastname">
      <span class="field-name">Last Name</span>
      <input id="c_lastname" name="c_lastname" class="input-field card-field" type="text" placeholder="Last Name" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_lastname">
      <label class="input-label" for="email">
      <span class="field-name">Email</span>
      <input id="c_email" name="c_email" class="input-field card-field" type="text" placeholder="Email" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_phonenumber">
      <label class="input-label" for="phonenumber">
      <span class="field-name">Phone Number</span>
      <input id="c_phonenumber" name="c_phonenumber" class="input-field card-field" type="text"placeholder="Phone Number" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <h4 class="bt_title">Customer Billing Information</h4>
    <fieldset class="one_off_firstname">
      <label class="input-label" for="firstname">
      <span class="field-name">First Name</span>
      <input id="firstname" name="firstname" class="input-field card-field" type="text" placeholder="First Name" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_lastname">
      <label class="input-label" for="lastname">
      <span class="field-name">Last Name</span>
      <input id="lastname" name="lastname" class="input-field card-field" type="text" placeholder="Last Name" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_address1">
      <label class="input-label" for="address1">
      <span class="field-name">Address1</span>
      <input id="address1" name="address1" class="input-field card-field" type="text" placeholder="Address" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_address2">
      <label class="input-label" for="address2">
      <span class="field-name">Address2</span>
      <input id="address2" name="address2" class="input-field card-field" type="text" placeholder="Address" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_city">
      <label class="input-label" for="city">
      <span class="field-name">City/Town</span>
      <input id="city" name="city" class="input-field card-field" type="text" placeholder="City/Town" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_state">
      <label class="input-label" for="state">
      <span class="field-name">State/Region</span>
      <input id="state" name="state" class="input-field card-field" type="text" placeholder="State/Region" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_postcode">
      <label class="input-label" for="postcode">
      <span class="field-name">Post Code</span>
      <input id="postcode" name="postcode" class="input-field card-field" type="text" placeholder="Post Code" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <fieldset class="one_off_country">
      <label class="input-label" for="country">
      <span class="field-name">Country</span>
      <input id="country" name="country" class="input-field card-field" type="text" placeholder="Country" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <h4 class="bt_title">Credit Card Details</h4>
  </div>
  <div class="loader_container">
    <div class="loader_img loader"></div>
  </div>
  <div class="bt_form_wrap hide invisible">
    <fieldset>
      <p class="amountDeclare">Amount to be paid 10.00 ($)</p>
      <input type="hidden" name="amount" id="amount" value="10" />
    </fieldset>
    <fieldset>
      <label for="bt_card_number">Card number</label>
      <div id="bt_card_number" class="inputFields"></div>
    </fieldset>
    <fieldset>
      <label for="bt_cvv">CVV</label>
      <div id="bt_cvv" class="inputFields"></div>
    </fieldset>
    <fieldset>
      <label for="bt_exp_date">Expiration date (MM/YY)</label>
      <div id="bt_exp_date" class="inputFields"></div>
    </fieldset>
    <div id="bt_paypal_container"></div>
    <div class="btn_container">
      <button class="pay-btn">Make Payment</button>
      <span class="loader_img"></span> </div>
  </div>
</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> 
<!-- TO DO : Place below JS code in js file and include that JS file --> 
<script type="text/javascript">
	(function() {
    
		var BTFn = {};
		var bt_client_token = '';
	
		BTFn.sendJSON = function($obj) {
	
			$.ajax({
				dataType: "text",
				type: "POST",
				data: { action: "generateclienttoken"},
				url: "braintree_hosted_fields_with_3d_secure_demo.php",
				success: function (req) {
					bt_client_token = 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'
					}
				},
				onPaymentMethodReceived:function(obj){
                    
                    var client = new braintree.api.Client({
                        clientToken: bt_client_token
                    });

                    client.verify3DS({
                        amount: $('#amount').val(),
                        creditCard: obj.nonce
                    }, function (error, response) {
                        if (!error) {
                            // 3D Secure finished. send the response.nonce to server for further processing
                            BTFn.appendTo(document.forms.bt_custom_form, 'input', {name: 'payment_method_nonce', type: 'hidden', value: response.nonce});
                            document.forms.bt_custom_form.submit();
                        } else {
                            // Handle errors
                            alert("Error : "+error.message);
                        }
                    });
                },
				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');
				}
			}
		};

		BTFn.appendTo = function($cont, childSelector, options) {

			var input = document.createElement(childSelector);
			input.type = options.type;
			input.name = options.name;
			input.value = options.value;
			$cont.appendChild(input);
		};
	
		$(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');
			});
		});
	})();
	</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

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

<?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']))

{

// Customer details

$customer_firstname = $_POST['c_firstname'];

$customer_lastname = $_POST['c_lastname'];

$customer_email = $_POST['c_email'];

$customer_phonenumber = $_POST['c_phonenumber'];

// EOF Customer details

// Customer billing details

$firstname = $_POST['firstname'];

$lastname = $_POST['lastname'];

$email = $_POST['c_email'];

$address1 = $_POST['address1'];

$address2 = $_POST['address2'];

$city = $_POST['city'];

$state = $_POST['state'];

$postcode = $_POST['postcode'];

$country = $_POST['country'];

$phone = $_POST['c_phonenumber'];

// EOF Customer billing details

$sale = array(

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

'orderId' => $_POST['invoiceid'],

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

'customer' => array(

'firstName' => $customer_firstname,

'lastName' => $customer_lastname,

'phone' => $customer_phonenumber,

'email' => $customer_email

'billing' => array(

'firstName' => $firstname,

'lastName' => $lastname,

'streetAddress' => $address1,

'extendedAddress' => $address2,

'locality' => $city,

'region' => $state,

'postalCode' => $postcode,

'countryCodeAlpha2' => $country

'options' => array(

'submitForSettlement' => true,

'storeInVaultOnSuccess' => true,

'three_d_secure' => array('required' => true)

)

);

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

if ($result->success)

{

}

else

{

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

}

print_r($result); exit;

}

else

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

{

$sale = array(

'customerId' => $braintree_cust_id,

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

'orderId' => $_POST['invoiceid'], // This field is get back in responce to track this transaction

'options' => array(

'submitForSettlement' => true

)

);

}

else

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

{

//$braintree_cust_id = "60033487";

// Generate the nonce and send it back

try

{

$clientToken = Braintree_ClientToken::generate(array(

// use customerId to get a previous customer from the vault

// 'customerId' => $braintree_cust_id // $braintree_cust_id is Fetch from DB

));

}

catch(Exception $e)

{

// cannot get the customer from the vault!!

$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 Demo</h1>

<h4 class="bt_title">Customer Information</h4>

<span class="field-name">First Name</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">Email</span>

</label>

</fieldset>

<span class="field-name">Phone Number</span>

</label>

</fieldset>

<h4 class="bt_title">Customer Billing Information</h4>

<span class="field-name">First Name</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">Address1</span>

</label>

</fieldset>

<span class="field-name">Address2</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">State/Region</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">Country</span>

</label>

</fieldset>

<h4 class="bt_title">Credit Card Details</h4>

</div>

</div>

<p class="amountDeclare">Amount to be paid 10.00 ($)</p>

</fieldset>

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

</fieldset>

</fieldset>

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

</fieldset>

<button class="pay-btn">Make Payment</button>

</div>

</form>

(function() {

var BTFn = {};

var bt_client_token = '';

BTFn.sendJSON = function($obj) {

$.ajax({

dataType: "text",

type: "POST",

data: { action: "generateclienttoken"},

url: "braintree_hosted_fields_with_3d_secure_demo.php",

success: function (req) {

bt_client_token = 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'

}

onPaymentMethodReceived:function(obj){

var client = new braintree.api.Client({

clientToken: bt_client_token

});

client.verify3DS({

amount: $('#amount').val(),

creditCard: obj.nonce

}, function (error, response) {

if (!error) {

// 3D Secure finished. send the response.nonce to server for further processing

BTFn.appendTo(document.forms.bt_custom_form, 'input', {name: 'payment_method_nonce', type: 'hidden', value: response.nonce});

document.forms.bt_custom_form.submit();

} else {

// Handle errors

alert("Error : "+error.message);

}

});

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');

}

};

BTFn.appendTo = function($cont, childSelector, options) {

var input = document.createElement(childSelector);

input.type = options.type;

input.name = options.name;

input.value = options.value;

$cont.appendChild(input);

};

$(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');

});

})();

</script>

</body>

</html>

You can download all above demos from below link :
Download Source Code

Browse source code in github : https://github.com/sagarsdeshmukh/Braintree_gateway_integration_demo_with_PHP

If you have any additional questions Or queries, don’t hesitate to let me know!, Just put comment below or contact @ my mail id sagarsdeshmukh@gmail.com

Happy coding!

Ref. Link : https://developers.braintreepayments.com/guides/3d-secure/overview
Test card details : https://developers.braintreepayments.com/guides/3d-secure/testing-go-live/php

Tags: Payment Gateway, PayPal, PHP, Web Development

ILovePHP

Open knowledge sharing platform for php lovers

Archives for: May 2016

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

Braintree (PayPal) Payment gateway integration with 3D secure option in PHP