Tag: Braintree

Braintree 3D Secure 2.0 SCA(Strong Customer Authentication) Implementation demo example

Posted on 4 April, 2019 in Payment Gateway

Braintree PHP v3.40.0

Braintree Sandbox Javascript v3

Dropin UI integration

3D Secure 2.0 implementation (SCA complaint)

Demo link –

http://demo.ilovephp.net/braintree/client/?amt=15

Visa

4000000000000002
01/2020

Mastercard

5200000000000007
01/2020

Amex

340000000003961
01/2020

If you are interested in script, contact us 🙂

Ref. –
https://developers.braintreepayments.com/guides/3d-secure/client-side/javascript/v3
https://developers.braintreepayments.com/guides/3d-secure/migration/javascript/v3#if-you-are-based-in-europe-and-already-use-3ds

Tags: 3D Secure, Braintree, Braintree JS v3, drop-in UI, Payment Gateway, PayPal, PHP, SCA

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

Simple Braintree (PayPal) Payment gateway integration in PHP with DEMO Examples

Posted on 21 March, 2016 in JQuery, Payment Gateway, Payment Gateway, PHP

ilovephp.net

Are you looking for Payment gateway which suites for your website as well as mobile app platform?

Then braintree makes your work much easier. It’s very simple, easier and quick to integrate using Braintree SDK.

Few important point need to consider while proceed to start on Braintree integration-

PHP version of your server
Braintree offer 2 ways API integration
- Drop-in UI
- Custom Integration

1. Depending on you server PHP version you can choise Braintree SDK –

Currently availble latest braintree SDK is (braintree-php-3.9.0) which requires PHP version >= 5.4.0 (https://developers.braintreepayments.com/client_libraries/php/braintree-php-3.9.0.tgz)
If your server runs on PHP version which is < 5.4.0?, don’t worry we have work arround for this issue, you can use (braintree_php-2.40.0) Braintree SDK. (https://codeload.github.com/braintree/braintree_php/zip/2.40.0)

2.a Drop-in UI
– Braintree’s Drop-in UI offers a complete, ready-made payment UI for a quick and easy way to accept payments. It’s equally as easy to maintain PCI compliance with Drop-in; it is eligible for SAQ A since Braintree hosts the form that captures customer payment information.

The UI includes a card entry form and, if enabled, PayPal/Venmo buttons (Venmo only on mobile). When a user completes the UI, your client code obtains a payment method nonce for use on your server.

The Drop-in UI is the quickest way to start accepting payments. Considering security of customer credit card data handing at server end, the Drop-in UI is best choise. In drop in UI you will deal with only a single token (payment_method_nonce) which communicate from website client to website server and then website server to Brintree server.

2.b Custom Integration
In Custom integration, you can create your own payment form with custom colors and layout and collect the customer information before submit to payment gateway. If you need payment form with multilingual support then you can use custom Brintree API integration. In custom Braintree integration you need more developer efferts compare to Drop in UI.

Ref. Link : https://developers.braintreepayments.com/guides/drop-in/javascript/v2

Before proceed for Braintree API integration, we need to sign up for Braintree SDK. Which is free of cost for everyone.
Follow the below link to Sign up to Braintree SDK.
https://www.braintreepayments.com/get-started

After successfull signup we will get –

Merchant ID: xxxxxxx
Public Key: xxxxxxxx
Private Key: xxxxxxxxxxxxxxx

Below are the 3 demo script of Drop-in UI, Hosted field and custom integration of Braintree Gateway API’s –

Braintree – Payment Gateway integration (Drop-in UI) 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
							 )
			);
						
	$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 = {};

    BTFn.sendJSON = function($pay_btn) {

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

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

        braintree.setup(
            req,
            'dropin', {
                container: 'dropin',
                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

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

)

);

$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 = {};

BTFn.sendJSON = function($pay_btn) {

$.ajax({

dataType: "text",

type: "POST",

data: { action: "generateclienttoken"},

url: "braintree_dropin_demo.php",

success: function (req) {

BTFn.initBT(req, $pay_btn);

error: function() {

}

});

};

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

braintree.setup(

req,

'dropin', {

container: 'dropin',

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>

2. Braintree – Payment Gateway integration (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
							 )
			);
						
	$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 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 = {};
	
		BTFn.sendJSON = function($obj) {
	
			$.ajax({
				dataType: "text",
				type: "POST",
				data: { action: "generateclienttoken"},
				url: "braintree_hosted_fields_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'
					}
				},
				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');
				}
			}
		};
	
		$(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

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

)

);

$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 = "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 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 = {};

BTFn.sendJSON = function($obj) {

$.ajax({

dataType: "text",

type: "POST",

data: { action: "generateclienttoken"},

url: "braintree_hosted_fields_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'

}

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

}

};

$(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>

3. Braintree – Payment Gateway Custom integration 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['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

	// Credit Card Details
	$card_number = $_POST['card_number'];
	$cvv         = $_POST['cvv'];
	$exp_date    = explode("/",$_POST['exp_date']);
	// EOF Credit Card Details

	// Create customer in braintree Vault
	$result = Braintree_Customer::create(array(
		'firstName' => $customer_firstname,
		'lastName'  => $customer_lastname,
		'phone'     => $customer_phonenumber,
		'email'     => $customer_email,
		'creditCard' => array(
			'number'          => $card_number,
			'cardholderName'  => $firstname . " " . $lastname,
			'expirationMonth' => $exp_date[0],
			'expirationYear'  => $exp_date[1],
			'cvv'             => $cvv,
			'billingAddress' => array(
				'postalCode'        => $postcode,
				'streetAddress'     => $address1,
				'extendedAddress'   => $address2,
				'locality'          => $city,
				'region'            => $state,
				'countryCodeAlpha2' => $country
			)
		)
	));

	if ($result->success) {
		// Save this Braintree_cust_id in DB and use for future transactions too
		$braintree_cust_id = $result->customer->id; 
	} else {
		die("Error : ".$result->message);
	}
	// EOF Create customer in braintree Vault

	$sale = array(
				'customerId' => $braintree_cust_id,
				'amount'   => $_POST['amount'],
				'orderId'  => $_POST['invoiceid'],
				'options' => array('submitForSettlement'   => true)
			);
						
	$result = Braintree_Transaction::sale($sale);

	if ($result->success)
	{
		// Execute on payment success event at here
	}
	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)
			);
}
?>
<!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 Custom Integration</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>
    <fieldset class="one_off_country">
      <label class="input-label" for="country">
      <span class="field-name">Card number</span>
      <input id="card_number" name="card_number" class="input-field card-field" type="text" placeholder="Card number" 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">CVV</span>
      <input id="CVV" name="cvv" class="input-field card-field" type="text" placeholder="CVV" 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">Expiration date (MM/YY)</span>
      <input id="exp_date" name="exp_date" class="input-field card-field" type="text" placeholder="Expiration date (MM/YY)" autocomplete="off">
      <div class="invalid-bottom-bar"></div>
      </label>
    </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">
      <div class="invalid-bottom-bar"></div>
      </label>
    </fieldset>
    <div class="btn_container">
      <input type="submit" name="make_payment" value="Make Payment" class="pay-btn">
      <span class="loader_img"></span> </div>
  </form>
</div>
</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

<?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['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

// Credit Card Details

$card_number = $_POST['card_number'];

$cvv = $_POST['cvv'];

$exp_date = explode("/",$_POST['exp_date']);

// EOF Credit Card Details

// Create customer in braintree Vault

$result = Braintree_Customer::create(array(

'firstName' => $customer_firstname,

'lastName' => $customer_lastname,

'phone' => $customer_phonenumber,

'email' => $customer_email,

'creditCard' => array(

'number' => $card_number,

'cardholderName' => $firstname . " " . $lastname,

'expirationMonth' => $exp_date[0],

'expirationYear' => $exp_date[1],

'cvv' => $cvv,

'billingAddress' => array(

'postalCode' => $postcode,

'streetAddress' => $address1,

'extendedAddress' => $address2,

'locality' => $city,

'region' => $state,

'countryCodeAlpha2' => $country

)

));

if ($result->success) {

// Save this Braintree_cust_id in DB and use for future transactions too

$braintree_cust_id = $result->customer->id;

} else {

die("Error : ".$result->message);

}

// EOF Create customer in braintree Vault

$sale = array(

'customerId' => $braintree_cust_id,

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

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

'options' => array('submitForSettlement' => true)

);

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

if ($result->success)

{

// Execute on payment success event at here

}

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)

);

}

<!DOCTYPE html>

<head>

<title>Checkout</title>

</head>

<body>

<h1 class="bt_title">Braintree Custom Integration</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>

<span class="field-name">Card number</span>

</label>

</fieldset>

</label>

</fieldset>

<span class="field-name">Expiration date (MM/YY)</span>

</label>

</fieldset>

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

</label>

</fieldset>

</form>

</div>

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

{

}

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>

<fieldset class="one_off_lastname"

ILovePHP

Open knowledge sharing platform for php lovers

Tag: Braintree

Braintree 3D Secure 2.0 SCA(Strong Customer Authentication) Implementation demo example

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

Simple Braintree (PayPal) Payment gateway integration in PHP with DEMO Examples