Braintree PHP v3.40.0
Braintree Sandbox Javascript v3
Dropin UI integration
3D Secure 2.0 implementation (SCA complaint)
Demo link –
http://demo.ilovephp.net/braintree/client/?amt=15
Visa
|
Mastercard
|
Amex
|
If you are interested in script, contact us 🙂
Ref. –
https://developers.braintreepayments.com/guides/3d-secure/client-side/javascript/v3
https://developers.braintreepayments.com/guides/3d-secure/migration/javascript/v3#if-you-are-based-in-europe-and-already-use-3ds
whmcs-stripe-php
Do you want to accept credit cards on your website and save users confusion and time? This credit card gateway extension for WHMCS lets you accept credit card payments directly on your website via Stripe payment gateway.
With this extension your customer can use their credit cards during the checkout process and Stripe.com handles the rest. This means a smoother experience for your users as they never have to leave your website for making payments.
This is a free and open source Stripe Payment Gateway for WHMCS that supports one time and recurring payments without ever having a credit card number hit your WHMCS server.
Stripe pay payment gateway allows the WHMCS billing system to use Stripe’s one time and reoccurring payment gateway capabilities. Stripe provides the unique ability to take a client’s credit card information without ever having the client leave your site, but it also allows for credit card data to never get stored in or even pass through your own server, eliminating costly concerns over PCI compliance. This gateway for WHMCS is being released free for anyone, although it should still be considered in beta as there are likely still bugs to work out of it.
You can sign up for a Stripe account at https://stripe.com.
stripe.php and place it into the /modules/gateways/ folder of your WHMCS installation.callback folder of the repository, copy the other stripe.php file and place it into the /modules/gateways/callback folder of your WHMCS installation.ccpay.php file from the repository into the root directory of your WHMCS installation.clientareacreditcard-stripe.tpl file into the root level of the theme folder you are currently using for WHMCS. For example, if you’re using the default theme, then copy this file to /templates/default/.https://yourwhmcsinstall.com/modules/gateways/callback/stripe.php.In the end, your folder structure should look roughly like the diagram below, with a ccpay.php file in the root of your install, a stripe.php in /modules/gateways/callback, a stripe.php in /modules/gateways/, a clientareacreditcard-stripe.tpl in the root of your WHMCS active template folder, and the lib folder of the Stripe API in the newly-created /modules/gateways/stripe/ folder.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
whmcs |-- ccpay.php |-- modules |-- gateways |-- callbacks |-- stripe.php |-- stripe (contains the lib folder of the Stripe PHP API) |-- Stripe |-- ... (files from Stripe API) |-- data |-- ... (files from Stripe API) |-- Stripe.php (Stripe API core file) |-- stripe.php |-- templates |-- yourtemplatename (i.e. default) |-- clientareacreditcard-stripe.tpl |
You may now activate this new payment gateway from within WHMCS through the Setup > Payments > Payment Gateways screen. This module should be listed as Stripe. You can then fill in the appropriate API key information as well as a required email address where the gateway can send you any serious errors that come up while billing clients or communicating with Stripe.
To download source code Click here !!!
Fork on Github
I’m always looking to improve this code, so if you see something that can be changed or if you have an idea for a new feature or any other feedback, send me an email to sagasdeshmukh91@gmail.com, or send me a message on Twitter (@starsagar91), and I’ll get right back to you. If you decide to use this module in your WHMCS install, send me a message to say hello (and let me know what you think too) and it’ll make my day. Thanks!
Stripe error handling
Stripe API libraries raise exceptions for many reasons, such as a failed charge, invalid parameters, authentication errors, and network unavailability. The Stripe recommends for writing code that gracefully handles all possible API exceptions.
Below Error Handling code is compatible with latest stripe API version
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?php ... try { // Use Stripe's library to make requests... } catch(\Stripe\Error\Card $e) { // Since it's a decline, \Stripe\Error\Card will be caught $body = $e->getJsonBody(); $err = $body['error']; print('Status is:' . $e->getHttpStatus() . "\n"); print('Type is:' . $err['type'] . "\n"); print('Code is:' . $err['code'] . "\n"); // param is '' in this case print('Param is:' . $err['param'] . "\n"); print('Message is:' . $err['message'] . "\n"); } catch (\Stripe\Error\RateLimit $e) { // Too many requests made to the API too quickly } catch (\Stripe\Error\InvalidRequest $e) { // Invalid parameters were supplied to Stripe's API } catch (\Stripe\Error\Authentication $e) { // Authentication with Stripe's API failed // (maybe you changed API keys recently) } catch (\Stripe\Error\ApiConnection $e) { // Network communication with Stripe failed } catch (\Stripe\Error\Base $e) { // Display a very generic error to the user, and maybe send // yourself an email } catch (Exception $e) { // Something else happened, completely unrelated to Stripe } ... ?> |
For old stripe versions i.e Stripe API v1.18.0 use below Error Handling code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php ... try { // Use Stripe's library to make requests... } catch(Stripe_CardError $e) { // Since it's a decline, \Stripe\Error\Card will be caught print('Message is:' . $e->getMessage() . "\n"); } catch (Stripe_InvalidRequestError $e) { // Invalid parameters were supplied to Stripe's API } catch (Stripe_AuthenticationError $e) { // Authentication with Stripe's API failed // (maybe you changed API keys recently) } catch (Stripe_ApiConnectionError $e) { // Network communication with Stripe failed } catch (Stripe_Error $e) { // Display a very generic error to the user, and maybe send // yourself an email } catch (Exception $e) { // Something else happened, completely unrelated to Stripe } ... ?> |
For more details please check .
Stripe payment gateway integration
Stripe payment gateway offers 2 ways of integration in PHP –
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
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:
Below code example show you demonstrate you the custom stripe integration with stripe.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |
You can download all above demos from below link :
Download Source Code
Or
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 🙂
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-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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"> <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> |
hosted_field_style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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-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; } |
hosted_field_style.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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); // 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'); }); }); })(); |
You can download full script from here.
For any queries regarding above script put comments below or reach me vie mail – sagarsdeshmukh91@gmail.com
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |
Braintree Payment Gateway integration with 3D secure in Drop in-UI Example (Demo) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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> <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> |
Braintree – Payment Gateway integration with 3D secure (Hosted Fields) example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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) { 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> |
You can download all above demos from below link :
Download Source Code
Or
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
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-
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 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 |
<?php // Braintree library require 'braintree/lib/Braintree.php'; $params = array( "testmode" => "on", "merchantid" => "xxxxxxx", "publickey" => "xxxxxxx", "privatekey" => "xxxxxxxxxxxxxxxxxxxxx", ); if ($params['testmode'] == "on") { Braintree_Configuration::environment('sandbox'); } else { Braintree_Configuration::environment('production'); } Braintree_Configuration::merchantId($params["merchantid"]); Braintree_Configuration::publicKey($params["publickey"]); Braintree_Configuration::privateKey($params["privatekey"]); if(isset($_POST['payment_method_nonce'])) { // Customer details $customer_firstname = $_POST['c_firstname']; $customer_lastname = $_POST['c_lastname']; $customer_email = $_POST['c_email']; $customer_phonenumber = $_POST['c_phonenumber']; // EOF Customer details // Customer billing details $firstname = $_POST['firstname']; $lastname = $_POST['lastname']; $email = $_POST['c_email']; $address1 = $_POST['address1']; $address2 = $_POST['address2']; $city = $_POST['city']; $state = $_POST['state']; $postcode = $_POST['postcode']; $country = $_POST['country']; $phone = $_POST['c_phonenumber']; // EOF Customer billing details $sale = array( 'amount' => $_POST['amount'], 'orderId' => $_POST['invoiceid'], 'paymentMethodNonce' => $_POST['payment_method_nonce'], // Autogenerated field from braintree 'customer' => array( 'firstName' => $customer_firstname, 'lastName' => $customer_lastname, 'phone' => $customer_phonenumber, 'email' => $customer_email ), 'billing' => array( 'firstName' => $firstname, 'lastName' => $lastname, 'streetAddress' => $address1, 'extendedAddress' => $address2, 'locality' => $city, 'region' => $state, 'postalCode' => $postcode, 'countryCodeAlpha2' => $country ), 'options' => array( 'submitForSettlement' => true, 'storeInVaultOnSuccess' => true ) ); $result = Braintree_Transaction::sale($sale); if ($result->success) { echo "Braintree_cust_id : ".$braintree_cust_id = $result->transaction->_attributes['customer']['id']; // After first successfull transaction, save this Braintree_cust_id in DB and use for future transactions } else { echo "Error : ".$result->_attributes['message']; } print_r($result); exit; } else if (isset($_POST['braintree_cust_id'])) { $sale = array( 'customerId' => $braintree_cust_id, 'amount' => $_POST['amount'], 'orderId' => $_POST['invoiceid'], // This field is get back in responce to track this transaction 'options' => array( 'submitForSettlement' => true ) ); } else if (isset($_POST['action']) && $_POST['action'] == 'generateclienttoken') { //$braintree_cust_id = "31904842"; // Generate the nonce and send it back try { $clientToken = Braintree_ClientToken::generate(array( // use customerId to get a previous customer from the vault // 'customerId' => $braintree_cust_id // $braintree_cust_id is Fetch from DB )); } catch(Exception $e) { // cannot get the customer from the vault!! $clientToken = Braintree_ClientToken::generate(); } echo $clientToken; exit; } ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset=" |