Category: JQuery

Stripe Payment gateway integration in PHP with DEMO Examples

Posted on 29 September, 2016 in JQuery, Payment Gateway, Payment Gateway, PHP, Utilities

Stripe payment gateway integration

Stripe payment gateway offers 2 ways of integration in PHP –

Stripe checkout integration
Stripe custom integration (Stripe.js)

Strip checkout integration:

The easiest way to integrate Stripe is via Checkout, an embedded tool that takes care of building an HTML form, validating user input, and securing your customers’ card data. Using Checkout, sensitive credit card information is sent directly to Stripe, and does not touch your server. Stripe returns to your site a token representation of the card, and this token can then be used in a charge request.

Embedding Checkout in your site

To get started, add the following code to your payment page:

<form action="/your-charge-code" method="POST">
  <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    data-amount="999"
    data-name="ILovePHP.net"
    data-description="Donation"
    data-image="http://www.ilovephp.net/wp-content/uploads/2016/03/small-3.jpg"
    data-locale="auto"
    data-zip-code="true">
  </script>
</form>

<script

src="https://checkout.stripe.com/checkout.js" class="stripe-button"

data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"

data-amount="999"

data-name="ILovePHP.net"

data-description="Donation"

data-image="http://www.ilovephp.net/wp-content/uploads/2016/03/small-3.jpg"

data-locale="auto"

data-zip-code="true">

</script>

</form>

Stripe Checkout Demo

Reference link : https://stripe.com/docs/checkout/tutorial

Stripe custom integration (Stripe.js):

For a more custom approach, you can instead use Stripe with your own payment form via Stripe.js.

Processing payments with Custom Stripe integration has two components:

Securely collecting the payment details
Using the collected payment method in a charge request

Below code example show you demonstrate you the custom stripe integration with stripe.js.

<?php
// Stripe library
require 'stripe/Stripe.php';

$params = array(
	"testmode"   => "on",
	"private_live_key" => "sk_live_xxxxxxxxxxxxxxxxxxxxx",
	"public_live_key"  => "pk_live_xxxxxxxxxxxxxxxxxxxxx",
	"private_test_key" => "sk_test_xxxxxxxxxxxxxxxxxxxxx",
	"public_test_key"  => "pk_test_xxxxxxxxxxxxxxxxxxxxx"
);

if ($params['testmode'] == "on") {
	Stripe::setApiKey($params['private_test_key']);
	$pubkey = $params['public_test_key'];
} else {
	Stripe::setApiKey($params['private_live_key']);
	$pubkey = $params['public_live_key'];
}

if(isset($_POST['stripeToken']))
{
	$amount_cents = str_replace(".","","10.52");  // Chargeble amount
	$invoiceid = "14526321";                      // Invoice ID
	$description = "Invoice #" . $invoiceid . " - " . $invoiceid;
	
	try {

		$charge = Stripe_Charge::create(array(		 
			  "amount" => $amount_cents,
			  "currency" => "usd",
			  "source" => $_POST['stripeToken'],
			  "description" => $description)			  
		);

		if ($charge->card->address_zip_check == "fail") {
			throw new Exception("zip_check_invalid");
		} else if ($charge->card->address_line1_check == "fail") {
			throw new Exception("address_check_invalid");
		} else if ($charge->card->cvc_check == "fail") {
			throw new Exception("cvc_check_invalid");
		}
		// Payment has succeeded, no exceptions were thrown or otherwise caught				

		$result = "success";

	} catch(Stripe_CardError $e) {			

	$error = $e->getMessage();
		$result = "declined";

	} catch (Stripe_InvalidRequestError $e) {
		$result = "declined";		  
	} catch (Stripe_AuthenticationError $e) {
		$result = "declined";
	} catch (Stripe_ApiConnectionError $e) {
		$result = "declined";
	} catch (Stripe_Error $e) {
		$result = "declined";
	} catch (Exception $e) {

		if ($e->getMessage() == "zip_check_invalid") {
			$result = "declined";
		} else if ($e->getMessage() == "address_check_invalid") {
			$result = "declined";
		} else if ($e->getMessage() == "cvc_check_invalid") {
			$result = "declined";
		} else {
			$result = "declined";
		}		  
	}
	
	echo "<BR>Stripe Payment Status : ".$result;
	
	echo "<BR>Stripe Response : ";
	
	print_r($charge); exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stripe Pay Custom Integration Demo</title>
</head>
<body>
<link href="style.css" type="text/css" rel="stylesheet" />
<h1 class="bt_title">Stripe Pay Demo</h1>
<div class="dropin-page">
  <form action="" method="POST" id="payment-form">
  <span class="payment-errors"></span>

  <div class="form-row">
    <label>
      <span>Card Number</span>
      <input type="text" size="20" data-stripe="number">
    </label>
  </div>

  <div class="form-row">
    <label>
      <span>Expiration (MM/YY)</span>
      <input type="text" size="2" data-stripe="exp_month">
    </label>
    <span> / </span>
    <input type="text" size="2" data-stripe="exp_year">
  </div>

  <div class="form-row">
    <label>
      <span>CVC</span>
      <input type="text" size="4" data-stripe="cvc">
    </label>
  </div>
  <input type="submit" class="submit" value="Submit Payment">
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<!-- TO DO : Place below JS code in js file and include that JS file -->
<script type="text/javascript">
	Stripe.setPublishableKey('<?php echo $params['public_test_key']; ?>');
  
	$(function() {
	  var $form = $('#payment-form');
	  $form.submit(function(event) {
		// Disable the submit button to prevent repeated clicks:
		$form.find('.submit').prop('disabled', true);
	
		// Request a token from Stripe:
		Stripe.card.createToken($form, stripeResponseHandler);
	
		// Prevent the form from being submitted:
		return false;
	  });
	});

	function stripeResponseHandler(status, response) {
	  // Grab the form:
	  var $form = $('#payment-form');
	
	  if (response.error) { // Problem!
	
		// Show the errors on the form:
		$form.find('.payment-errors').text(response.error.message);
		$form.find('.submit').prop('disabled', false); // Re-enable submission
	
	  } else { // Token was created!
	
		// Get the token ID:
		var token = response.id;

		// Insert the token ID into the form so it gets submitted to the server:
		$form.append($('<input type="hidden" name="stripeToken">').val(token));
	
		// Submit the form:
		$form.get(0).submit();
	  }
	};
</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

<?php

// Stripe library

require 'stripe/Stripe.php';

$params = array(

"testmode" => "on",

"private_live_key" => "sk_live_xxxxxxxxxxxxxxxxxxxxx",

"public_live_key" => "pk_live_xxxxxxxxxxxxxxxxxxxxx",

"private_test_key" => "sk_test_xxxxxxxxxxxxxxxxxxxxx",

"public_test_key" => "pk_test_xxxxxxxxxxxxxxxxxxxxx"

);

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

Stripe::setApiKey($params['private_test_key']);

$pubkey = $params['public_test_key'];

} else {

Stripe::setApiKey($params['private_live_key']);

$pubkey = $params['public_live_key'];

}

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

{

$amount_cents = str_replace(".","","10.52"); // Chargeble amount

$invoiceid = "14526321"; // Invoice ID

$description = "Invoice #" . $invoiceid . " - " . $invoiceid;

try {

$charge = Stripe_Charge::create(array(

"amount" => $amount_cents,

"currency" => "usd",

"source" => $_POST['stripeToken'],

"description" => $description)

);

if ($charge->card->address_zip_check == "fail") {

throw new Exception("zip_check_invalid");

} else if ($charge->card->address_line1_check == "fail") {

throw new Exception("address_check_invalid");

} else if ($charge->card->cvc_check == "fail") {

throw new Exception("cvc_check_invalid");

}

// Payment has succeeded, no exceptions were thrown or otherwise caught

$result = "success";

} catch(Stripe_CardError $e) {

$error = $e->getMessage();

$result = "declined";

} catch (Stripe_InvalidRequestError $e) {

$result = "declined";

} catch (Stripe_AuthenticationError $e) {

$result = "declined";

} catch (Stripe_ApiConnectionError $e) {

$result = "declined";

} catch (Stripe_Error $e) {

$result = "declined";

} catch (Exception $e) {

if ($e->getMessage() == "zip_check_invalid") {

$result = "declined";

} else if ($e->getMessage() == "address_check_invalid") {

$result = "declined";

} else if ($e->getMessage() == "cvc_check_invalid") {

$result = "declined";

} else {

$result = "declined";

}

echo "<BR>Stripe Payment Status : ".$result;

echo "<BR>Stripe Response : ";

print_r($charge); exit;

}

<!DOCTYPE html>

<head>

<title>Stripe Pay Custom Integration Demo</title>

</head>

<body>

<h1 class="bt_title">Stripe Pay Demo</h1>

<label>

<span>Card Number</span>

</label>

</div>

<label>

<span>Expiration (MM/YY)</span>

</label>

</div>

<label>

</label>

</div>

</form>

</div>

Stripe.setPublishableKey('<?php echo $params['public_test_key']; ?>');

$(function() {

var $form = $('#payment-form');

$form.submit(function(event) {

// Disable the submit button to prevent repeated clicks:

$form.find('.submit').prop('disabled', true);

// Request a token from Stripe:

Stripe.card.createToken($form, stripeResponseHandler);

// Prevent the form from being submitted:

return false;

});

function stripeResponseHandler(status, response) {

// Grab the form:

var $form = $('#payment-form');

if (response.error) { // Problem!

// Show the errors on the form:

$form.find('.payment-errors').text(response.error.message);

$form.find('.submit').prop('disabled', false); // Re-enable submission

} else { // Token was created!

// Get the token ID:

var token = response.id;

// Insert the token ID into the form so it gets submitted to the server:

$form.append($('<input type="hidden" name="stripeToken">').val(token));

// Submit the form:

$form.get(0).submit();

}

};

</script>

</body>

</html>

Demo Link

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

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

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

Hope you enjoy my post 🙂

Tags: Payment Gateway, PHP, Stripe, Stripe.js, Web Development

Bootstrap – Accordion Inside Accordion Example

Posted on 14 July, 2016 in Bootstrap, JQuery, Utilities

Bootstrap-Accordion-Inside-Accordion_nested-Accordion_demo

 <div class="panel-group" id="accordion1">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
      Collapsible Group #1
      </a></h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        This is a simple accordion inner content...
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
        Collapsible Group #2 (With nested accordion inside)
      </a></h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">

        <!-- Here we insert another nested accordion -->

        <div class="panel-group" id="accordion2">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
                Collapsible Inner Group Item #1
              </a></h4>
            </div>
            <div id="collapseInnerOne" class="panel-collapse collapse in">
              <div class="panel-body">
                Anim pariatur cliche...
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
                Collapsible Inner Group Item #2
              </a></h4>
            </div>
            <div id="collapseInnerTwo" class="panel-collapse collapse">
              <div class="panel-body">
                Anim pariatur cliche...
              </div>
            </div>
          </div>
        </div>

        <!-- Inner accordion ends here -->

      </div>
    </div>
  </div>
</div>

Collapsible Group #1

</a></h4>

</div>

This is a simple accordion inner content...

</div>

Collapsible Group #2 (With nested accordion inside)

</a></h4>

</div>

Collapsible Inner Group Item #1

</a></h4>

</div>

Anim pariatur cliche...

</div>

Collapsible Inner Group Item #2

</a></h4>

</div>

Anim pariatur cliche...

</div>

</div>

Demo

Tags: Bootstrap, Bootstrap Accordion, CSS, Design tricks

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

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

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

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

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

Custom design mock-up :

Validation error handling :

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

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

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

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

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

<?php

// Braintree library

require 'braintree/lib/Braintree.php';

$params = array(

"testmode" => "on",

"merchantid" => "xxxxxxx",

"publickey" => "xxxxxxx",

"privatekey" => "xxxxxxxxxxxxxxxxxxxxx",

);

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

{

Braintree_Configuration::environment('sandbox');

}

else

{

Braintree_Configuration::environment('production');

}

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

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

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

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

{

$sale = array(

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

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

'options' => array(

'submitForSettlement' => true,

'storeInVaultOnSuccess' => true

)

);

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

if ($result->success)

{

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

<head>

<title>Braintree Hosted Fields Demo</title>

td { text-align: center;}

</style>

</head>

<body>

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

</header>

<h3>Braintree Customer Id</h3>

<tbody>

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

</tr>

</tbody>

</table>

<h3>Transaction</h3>

<tbody>

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

</tr>

<tr>

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

</tr>

<tr>

<td>amount</td>

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

</tr>

<tr>

<td>status</td>

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

</tr>

<tr>

<td>created_at</td>

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

</tr>

<tr>

<td>updated_at</td>

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

</tr>

</tbody>

</table>

<h3>Payment</h3>

<tbody>

<tr>

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

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

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

</tr>

<tr>

<td>expiration_date</td>

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

</tr>

<tr>

<td>cardholder_name</td>

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

</tr>

<tr>

<td>customer_location</td>

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

</tr>

</tbody>

</table>

</div>

</body>

</html>

<?php

}

else

{

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

}

//print_r($result);

exit;

}

else

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

{

// Generate the nonce

$clientToken = Braintree_ClientToken::generate();

echo $clientToken; exit;

}

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

<head>

<title>Braintree Hosted Fields Demo</title>

</head>

<body>

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

</div>

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

</fieldset>

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

</div>

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

</fieldset>

</div>

<div>

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

</div>

</div>

</fieldset>

</div>

<br />

</center>

</form>

</body>

</html>

hosted_field_style.css

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

fieldset {

margin-bottom: 0 !important;

}

.bt_form_wrap {

width: 95% !important;

}

#bt_card_number, #bt_cvv, #bt_exp_date {

background: #fff none repeat scroll 0 0;

height: 34px;

border: 1px solid #cccccc;

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

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

padding: 0 10px !important;

}

#bt_card_number {

padding: 0 55px !important;

}

#cvv-icon.payment-method-icon {

background-position: 0 -100px;

display: block;

text-indent: -999em;

position: relative;

top: -52px;

width: 44px;

float: right;

height: 26px;

left: -4px;

border: 1px solid #ccc;

}

.payment-method-icon.master-card {

background-position: 0 -268px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.visa {

background-position: 0 -380px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.american-express {

background-position: 0 -352px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.diners-club {

background-position: 0 -128px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.maestro {

background-position: 0 -240px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.discover {

background-position: 0 -156px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.payment-method-icon.jcb {

background-position: 0 -212px;

display: block;

height: 28px;

text-indent: -999em;

width: 44px;

position: absolute;

top: 25px;

left: 5px;

}

.inputError {

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

}

.invalid {

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

}

label {

text-transform:none !important;

font-size: 13px !important;

}

.pay-btn {

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

border-color: #558512 !important;

border-style: solid !important;

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

font-weight: bold;

}

hosted_field_style.js

(function() {

	var BTFn = {};

	BTFn.sendJSON = function($obj) {

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

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

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

	BTFn.showBtForm = function() {

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

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

	BTFn.detectAnimationEvent = function() {

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

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

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

	BTFn.showFormErrors = function(error) {

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

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

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

	$(document).ready(function() {

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

(function() {

var BTFn = {};

BTFn.sendJSON = function($obj) {

$.ajax({

dataType: "text",

type: "POST",

data: { action: "generateclienttoken"},

url: "braintree_hosted_fields_with_style_demo.php",

success: function (req) {

BTFn.initBT(req, $obj);

error: function() {

}

});

};

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

// we're on the custom fields tab

braintree.setup(req, 'custom', {

id: 'bt_custom_form',

hostedFields: {

number: {

selector: '#bt_card_number'

cvv: {

selector: '#bt_cvv'

expirationDate: {

selector: '#bt_exp_date'

onFieldEvent: handleFieldEvent,

styles: {

'.invalid': {

'color': '#D0041D'

}

onReady: function() {

BTFn.showBtForm();

onError: function(error) {

BTFn.showFormErrors(error);

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

paypal:{

container:'bt_paypal_container',

}

});

};

BTFn.showBtForm = function() {

var eAnimation = this.detectAnimationEvent();

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

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

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

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

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

});

};

BTFn.detectAnimationEvent = function() {

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

var animations = {

"animation" : "animationend",

"OAnimation" : "oAnimationEnd",

"MozAnimation" : "animationend",

"WebkitAnimation": "webkitAnimationEnd"

}

for (t in animations){

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

return animations[t];

}

};

BTFn.showFormErrors = function(error) {

var inputMap = {

'number' : '#bt_card_number',

'cvv' : '#bt_cvv',

'expirationDate' : '#bt_exp_date'

};

if(!error.details) {

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

}else{

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

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

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

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

}

};

handleFieldEvent = function(event) {

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

/* Other events

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

// Handle focus

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

// Handle blur

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

// Handle a change in validation or card type

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

if (event.card) {

console.log(event.card.type);

}

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

// Handle focus

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

}

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

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

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

}

$(document).ready(function() {

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

BTFn.sendJSON($pay_btn);

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

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

});

})();

You can download full script from here.

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

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

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

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

ilovephp.net

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

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

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

<?php

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

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

$braintree_cust_id = "xxxxxxx";

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

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

if(isset($_POST['make_payment']) && $_POST['make_payment'])
{
	// Customer details
	$customer_firstname   = $_POST['c_firstname'];
	$customer_lastname    = $_POST['c_lastname'];
	$customer_email       = $_POST['c_email'];
	$customer_phonenumber = $_POST['c_phonenumber'];
	// EOF Customer details

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

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

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

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

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

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

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

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

  function appendTo($cont, childSelector, options)
  {
	var input = document.createElement(childSelector);
	input.type = options.type;
	input.name = options.name;
	input.value = options.value;
	$cont.appendChild(input);
  };
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

<?php

// Braintree library

require 'braintree/lib/Braintree.php';

$params = array(

"testmode" => "on",

"merchantid" => "xxxxxxx",

"publickey" => "xxxxxxx",

"privatekey" => "xxxxxxxxxxxxxxxxxxxxx",

);

$braintree_cust_id = "xxxxxxx";

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

{

Braintree_Configuration::environment('sandbox');

}

else

{

Braintree_Configuration::environment('production');

}

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

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

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

if(isset($_POST['make_payment']) && $_POST['make_payment'])

{

// Customer details

$customer_firstname = $_POST['c_firstname'];

$customer_lastname = $_POST['c_lastname'];

$customer_email = $_POST['c_email'];

$customer_phonenumber = $_POST['c_phonenumber'];

// EOF Customer details

// Customer billing details

$firstname = $_POST['firstname'];

$lastname = $_POST['lastname'];

$email = $_POST['c_email'];

$address1 = $_POST['address1'];

$address2 = $_POST['address2'];

$city = $_POST['city'];

$state = $_POST['state'];

$postcode = $_POST['postcode'];

$country = $_POST['country'];

$phone = $_POST['c_phonenumber'];

// EOF Customer billing details

$payment_method_nonce = "";

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

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

{

$payment_method_nonce = $_POST['payment_method_nonce'];

$enable_3d_flag = 1;

}

else

{

$payment_method_details = get_default_payment_method($braintree_cust_id);

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

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

$enable_3d_flag = 0;

}

$sale = array(

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

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

'paymentMethodNonce' => $payment_method_nonce,

'customer' => array(

'firstName' => $customer_firstname,

'lastName' => $customer_lastname,

'phone' => $customer_phonenumber,

'email' => $customer_email

'billing' => array(

'firstName' => $firstname,

'lastName' => $lastname,

'streetAddress' => $address1,

'extendedAddress' => $address2,

'locality' => $city,

'region' => $state,

'postalCode' => $postcode,

'countryCodeAlpha2' => $country

'options' => array(

'submitForSettlement' => true,

'storeInVaultOnSuccess' => true

)

);

if ($enable_3d_flag == 1)

{

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

}

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

if ($result->success)

{

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

}

else

{

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

}

print_r($result); exit;

}

else

{

$clientToken = Braintree_ClientToken::generate(array(

'customerId' => $braintree_cust_id

));

$payment_method_details = get_default_payment_method($braintree_cust_id);

$bt_payment_method_nonce = "";

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

{

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

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

}

function get_default_payment_method($braintree_cust_id)

{

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

$payment_method_details = array();

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

{

if ($card_obj->default)

{

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

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

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

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

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

$payment_method_details["is_pp_account"] = false;

}

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

{

if ($card_obj->default)

{

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

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

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

$payment_method_details["is_pp_account"] = true;

}

return $payment_method_details;

}

<!DOCTYPE html>

<head>

<title>Braintree : Checkout</title>

</head>

<body>

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

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

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

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

</label>

</fieldset>

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

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

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

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

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

</div>

<?php } else { ?>

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

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

</div>

<?php } ?>

</fieldset>

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

</label>

</fieldset>

</form>

</div>

function verify_3d_secure()

{

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

if (is_pp_account != true)

{

var client = new braintree.api.Client({

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

});

client.verify3DS({

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

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

}, function (error, response) {

// Handle response

if (!error) {

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

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

document.forms.checkout.submit();

} else {

// Handle errors

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

}

});

}

else

{

document.forms.checkout.submit();

}

function appendTo($cont, childSelector, options)

{

var input = document.createElement(childSelector);

input.type = options.type;

input.name = options.name;

input.value = options.value;

$cont.appendChild(input);

};

</script>

</body>

</html>

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

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

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

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

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

if(isset($_POST['payment_method_nonce']))
{
	// Customer details
	$customer_firstname   = $_POST['c_firstname'];
	$customer_lastname    = $_POST['c_lastname'];
	$customer_email       = $_POST['c_email'];
	$customer_phonenumber = $_POST['c_phonenumber'];
	// EOF Customer details

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

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

    BTFn.sendJSON = function($pay_btn) {

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

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

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

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

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

        var THIS = this;

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

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

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

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

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

    $(document).ready(function() {

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

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

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

</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

<?php

// Braintree library

require 'braintree/lib/Braintree.php';

$params = array(

"testmode" => "on",

"merchantid" => "xxxxxxx",

"publickey" => "xxxxxxx",

"privatekey" => "xxxxxxxxxxxxxxxxxxxxx",

);

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

{

Braintree_Configuration::environment('sandbox');

}

else

{

Braintree_Configuration::environment('production');

}

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

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

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

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

{

// Customer details

$customer_firstname = $_POST['c_firstname'];

$customer_lastname = $_POST['c_lastname'];

$customer_email = $_POST['c_email'];

$customer_phonenumber = $_POST['c_phonenumber'];

// EOF Customer details

// Customer billing details

$firstname = $_POST['firstname'];

$lastname = $_POST['lastname'];

$email = $_POST['c_email'];

$address1 = $_POST['address1'];

$address2 = $_POST['address2'];

$city = $_POST['city'];

$state = $_POST['state'];

$postcode = $_POST['postcode'];

$country = $_POST['country'];

$phone = $_POST['c_phonenumber'];

// EOF Customer billing details

$sale = array(

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

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

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

'customer' => array(

'firstName' => $customer_firstname,

'lastName' => $customer_lastname,

'phone' => $customer_phonenumber,

'email' => $customer_email

'billing' => array(

'firstName' => $firstname,

'lastName' => $lastname,

'streetAddress' => $address1,

'extendedAddress' => $address2,

'locality' => $city,

'region' => $state,

'postalCode' => $postcode,

'countryCodeAlpha2' => $country

'options' => array(

'submitForSettlement' => true,

'storeInVaultOnSuccess' => true,

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

)

);

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

if ($result->success)

{

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

}

else

{

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

}

print_r($result); exit;

}

else

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

{

$sale = array(

'customerId' => $braintree_cust_id,

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

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

'options' => array(

'submitForSettlement' => true

)

);

}

else

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

{

//$braintree_cust_id = "31904842";

// Generate the nonce and send it back

try

{

$clientToken = Braintree_ClientToken::generate(array(

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

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

));

}

catch(Exception $e)

{

// cannot get the customer from the vault!!

$clientToken = Braintree_ClientToken::generate();

}

echo $clientToken; exit;

}

<!DOCTYPE html>

<head>

<title>Checkout</title>

</head>

<body>

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

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

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

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

</label>

</fieldset>

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

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

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

<div>Loading...</div>

</div>

<?php

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

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

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

<?php

}else{

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

</label>

<?php

}

</fieldset>

</form>

</div>

(function() {

var BTFn = {};

var bt_client_token = '';

BTFn.sendJSON = function($pay_btn) {

$.ajax({

dataType: "text",

type: "POST",

data: { action: "generateclienttoken"},

url: "braintree_dropin_with_3d_secure_demo.php",

success: function (req) {

bt_client_token = req;

BTFn.initBT(req, $pay_btn);

error: function() {

}

});

};

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

braintree.setup(

req,

'dropin', {

container: 'dropin',

onPaymentMethodReceived:function(obj){

var client = new braintree.api.Client({

clientToken: bt_client_token

});

client.verify3DS({

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

creditCard: obj.nonce

}, function (error, response) {

if (!error) {

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

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

document.forms.checkout.submit();

} else {

// Handle errors

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

}

});

onReady:function(){

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

onError: function(error) {

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

}

});

};

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

var THIS = this;

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

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

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

});

};

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

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

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

};

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

var input = document.createElement(childSelector);

input.type = options.type;

input.name = options.name;

input.value = options.value;

$cont.appendChild(input);

};

$(document).ready(function() {

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

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

BTFn.sendJSON($pay_btn);

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

});

})();

</script>

</body>

</html>

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

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

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

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

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

if(isset($_POST['payment_method_nonce']))
{
	// Customer details
	$customer_firstname   = $_POST['c_firstname'];
	$customer_lastname    = $_POST['c_lastname'];
	$customer_email       = $_POST['c_email'];
	$customer_phonenumber = $_POST['c_phonenumber'];
	// EOF Customer details

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

	$sale = array(
				'amount'   => $_POST['amount'],
				'orderId'  => $_POST['invoiceid'],
				'paymentMethodNonce' => $_POST['payment_method_nonce'],   // Autogenerated field from braintree
				'customer' => array(
								'firstName' => $customer_firstname,
								'lastName'  => $customer_lastname,
								'phone'     => $customer_phonenumber,
								'email'     => $customer_email
							  ),
				'billing' => array(
								'firstName'         => $firstname,
								'lastName'          => $lastname,
								'streetAddress'     => $address1,
								'extendedAddress'   => $address2,
								'locality'          => $city,
								'region'            => $state,
								'postalCode'        => $postcode,
								'countryCodeAlpha2' => $country
							 ),
				'options' => array(
								'submitForSettlement'   => true,
								'storeInVaultOnSuccess' => true,
								'three_d_secure' => array('required' => true)
							 )
			);
						
	$result = Braintree_Transaction::sale($sale);
	if ($result->success)
	{
		echo "Braintree_cust_id : ".$braintree_cust_id = $result->transaction->_attributes['customer']['id']; // After first successfull transaction, save this Braintree_cust_id in DB and use for future transactions
	}
	else
	{
		echo "Error : ".$result->_attributes['message'];
	}
	
	print_r($result); exit;
}
else
if (isset($_POST['braintree_cust_id']))
{
	$sale = array(
				'customerId' => $braintree_cust_id,
				'amount'     => $_POST['amount'],
				'orderId'    => $_POST['invoiceid'],  // This field is get back in responce to track this transaction
				'options'    => array(
									'submitForSettlement' => true
								)
			);
}
else
if (isset($_POST['action']) && $_POST['action'] == 'generateclienttoken')
{
	//$braintree_cust_id = "60033487";
	// Generate the nonce and send it back
	try
	{
		$clientToken = Braintree_ClientToken::generate(array(
			// use customerId to get a previous customer from the vault
			// 'customerId' => $braintree_cust_id    // $braintree_cust_id is Fetch from DB
		));
	}
	catch(Exception $e)
	{
		// cannot get the customer from the vault!!
		$clientToken = Braintree_ClientToken::generate();
	}
	
	echo $clientToken; exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Braintree Hosted Fields Demo</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>

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

                    client.verify3DS({
                        amount: $('#amount').val(),
                        creditCard: obj.nonce
                    }, function (error, response) {
                        if (!error) {
                            // 3D Secure finished. send the response.nonce to server for further processing
                            BTFn.appendTo(document.forms.bt_custom_form, 'input', {name: 'payment_method_nonce', type: 'hidden', value: response.nonce});
                            document.forms.bt_custom_form.submit();
                        } else {
                            // Handle errors
                            alert("Error : "+error.message);
                        }
                    });
                },
				onReady: function() {
					BTFn.showBtForm();
				},
				onError: function(error) {
					BTFn.showFormErrors(error);
					$obj.show().closest('.btn_container').find('.loader_img').hide();
				},
				paypal:{
					container:'bt_paypal_container',
				}
			});
		};
	
		BTFn.showBtForm = function() {
	
			var eAnimation = this.detectAnimationEvent();
			$('.loader_container').addClass('fadeOut');
	
			$('.loader_container').one(eAnimation, function(event) {
				$('.loader_container').remove();
				$('.bt_form_wrap').removeClass('hide');
				$('.bt_form_wrap').addClass('fadeIn').removeClass('invisible');
			});
		};
	
		BTFn.detectAnimationEvent = function() {
	
			var t, el = document.createElement("fakeelement");
	
			var animations = {
				"animation"      : "animationend",
				"OAnimation"     : "oAnimationEnd",
				"MozAnimation"   : "animationend",
				"WebkitAnimation": "webkitAnimationEnd"
			}
	
			for (t in animations){
				if (el.style[t] !== undefined){
					return animations[t];
				}
			}
		};
	
		BTFn.showFormErrors = function(error) {
	
			var inputMap = {
				'number' : '#bt_card_number',
				'cvv' : '#bt_cvv',
				'expirationDate' : '#bt_exp_date'
			};
			if(!error.details) {
				$('.inputFields').addClass('inputError');
			}else{
				var i, errorLength = error.details.invalidFieldKeys.length;
				$('.inputFields').removeClass('inputError');
				for(var i=0; i < errorLength; i++) {
					$(inputMap[error.details.invalidFieldKeys[i]]).addClass('inputError');
				}
			}
		};

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

			var input = document.createElement(childSelector);
			input.type = options.type;
			input.name = options.name;
			input.value = options.value;
			$cont.appendChild(input);
		};
	
		$(document).ready(function() {
	
			var $pay_btn = $('.pay-btn');
			BTFn.sendJSON($pay_btn);
			$pay_btn.on('click', function() {
				$(this).hide().closest('.btn_container').find('.loader_img').css('display', 'inline-block');
			});
		});
	})();
	</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

<?php

// Braintree library

require 'braintree/lib/Braintree.php';

$params = array(

"testmode" => "on",

"merchantid" => "xxxxxxx",

"publickey" => "xxxxxxx",

"privatekey" => "xxxxxxxxxxxxxxxxxxxxx",

);

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

{

Braintree_Configuration::environment('sandbox');

}

else

{

Braintree_Configuration::environment('production');

}

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

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

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

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

{

// Customer details

$customer_firstname = $_POST['c_firstname'];

$customer_lastname = $_POST['c_lastname'];

$customer_email = $_POST['c_email'];

$customer_phonenumber = $_POST['c_phonenumber'];

// EOF Customer details

// Customer billing details

$firstname = $_POST['firstname'];

$lastname = $_POST['lastname'];

$email = $_POST['c_email'];

$address1 = $_POST['address1'];

$address2 = $_POST['address2'];

$city = $_POST['city'];

$state = $_POST['state'];

$postcode = $_POST['postcode'];

$country = $_POST['country'];

$phone = $_POST['c_phonenumber'];

// EOF Customer billing details

$sale = array(

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

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

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

'customer' => array(

'firstName' => $customer_firstname,

'lastName' => $customer_lastname,

'phone' => $customer_phonenumber,

'email' => $customer_email

'billing' => array(

'firstName' => $firstname,

'lastName' => $lastname,

'streetAddress' => $address1,

'extendedAddress' => $address2,

'locality' => $city,

'region' => $state,

'postalCode' => $postcode,

'countryCodeAlpha2' => $country

'options' => array(

'submitForSettlement' => true,

'storeInVaultOnSuccess' => true,

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

)

);

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

if ($result->success)

{

}

else

{

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

}

print_r($result); exit;

}

else

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

{

$sale = array(

'customerId' => $braintree_cust_id,

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

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

'options' => array(

'submitForSettlement' => true

)

);

}

else

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

{

//$braintree_cust_id = "60033487";

// Generate the nonce and send it back

try

{

$clientToken = Braintree_ClientToken::generate(array(

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

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

));

}

catch(Exception $e)

{

// cannot get the customer from the vault!!

$clientToken = Braintree_ClientToken::generate();

}

echo $clientToken; exit;

}

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

<head>

<title>Braintree Hosted Fields Demo</title>

</head>

<body>

<h1 class="bt_title">Braintree Hosted Fields Demo</h1>

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

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

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

</label>

</fieldset>

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

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

</label>

</fieldset>

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

</label>

</fieldset>

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

</div>

</div>

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

</fieldset>

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

</fieldset>

</fieldset>

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

</fieldset>

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

</div>

</form>

(function() {

var BTFn = {};

var bt_client_token = '';

BTFn.sendJSON = function($obj) {

$.ajax({

dataType: "text",

type: "POST",

data: { action: "generateclienttoken"},

url: "braintree_hosted_fields_with_3d_secure_demo.php",

success: function (req) {

bt_client_token = req;

BTFn.initBT(req, $obj);

error: function() {

}

});

};

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

// we're on the custom fields tab

braintree.setup(req, 'custom', {

id: 'bt_custom_form',

hostedFields: {

number: {

selector: '#bt_card_number'

cvv: {

selector: '#bt_cvv'

expirationDate: {

selector: '#bt_exp_date'

}

onPaymentMethodReceived:function(obj){

var client = new braintree.api.Client({

clientToken: bt_client_token

});

client.verify3DS({

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

creditCard: obj.nonce

}, function (error, response) {

if (!error) {

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

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

document.forms.bt_custom_form.submit();

} else {

// Handle errors

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

}

});

onReady: function() {

BTFn.showBtForm();

onError: function(error) {

BTFn.showFormErrors(error);

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

paypal:{

container:'bt_paypal_container',

}

});

};

BTFn.showBtForm = function() {

var eAnimation = this.detectAnimationEvent();

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

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

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

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

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

});

};

BTFn.detectAnimationEvent = function() {

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

var animations = {

"animation" : "animationend",

"OAnimation" : "oAnimationEnd",

"MozAnimation" : "animationend",

"WebkitAnimation": "webkitAnimationEnd"

}

for (t in animations){

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

return animations[t];

}

};

BTFn.showFormErrors = function(error) {

var inputMap = {

'number' : '#bt_card_number',

'cvv' : '#bt_cvv',

'expirationDate' : '#bt_exp_date'

};

if(!error.details) {

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

}else{

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

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

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

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

}

};

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

var input = document.createElement(childSelector);

input.type = options.type;

input.name = options.name;

input.value = options.value;

$cont.appendChild(input);

};

$(document).ready(function() {

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

BTFn.sendJSON($pay_btn);

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

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

});

})();

</script>

</body>

</html>

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

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

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

Happy coding!

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

Tags: Payment Gateway, PayPal, PHP, Web Development

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)

{

}

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>

<input id="firstname" name="firstname" class="input-field card-field" type