Today we learn about PayPal Integration using Braintree API.
In my previous article we setup the Braintree Sandbox API for integrating 4 types of payment gateway.
Braintree Portal: https://sandbox.braintreegateway.com/login
So after setup the Braintree API we get the API and Client-side SDK from Braintree portal.
Here are the 3 steps, how to integrate PayPal payment Gateway using Braintree.
- Client-side SDK basic configuration.
- Checkout with PayPal checkout instance.
- Save the transaction details using a server-side script.
Client-side SDK basic configuration
Here are JavaScript V3 SDK which we include in Client-side SDK basic configuration for PayPal Integration.
|
1 2 3 4 5 6 7 8 |
<!-- Load PayPal's checkout.js Library. --> <script src="https://www.paypalobjects.com/api/checkout.js"></script> <!-- Load the client component. --> <script src="https://js.braintreegateway.com/web/3.60.0/js/client.min.js"></script> <!-- Load the PayPal Checkout component. --> <script src="https://js.braintreegateway.com/web/3.60.0/js/paypal-checkout.min.js"></script> |
For showing PayPal button we have to create a
divthe element where the PayPal button will populate.
|
1 |
<div id="paypal-button"></div> |
Creating PayPal Checkout Instance
To create PayPal checkout flow 2 things are important,
- currency
- amount
Complete Source code of PayPal Integration using Braintree API
index.php
|
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 |
<!-- Load PayPal's checkout.js Library. --> <script src="https://www.paypalobjects.com/api/checkout.js"></script> <!-- Load the client component. --> <script src="https://js.braintreegateway.com/web/3.60.0/js/client.min.js"></script> <!-- Load the PayPal Checkout component. --> <script src="https://js.braintreegateway.com/web/3.60.0/js/paypal-checkout.min.js"></script> <div id="paypal-button"></div> <script type="text/javascript"> // Create a client. braintree.client.create({ authorization: 'sandbox_key_braintree' }, function (clientErr, clientInstance) { // Stop if there was a problem creating the client. // This could happen if there is a network error or if the authorization // is invalid. if (clientErr) { console.error('Error creating client:', clientErr); return; } // Create a PayPal Checkout component. braintree.paypalCheckout.create({ client: clientInstance }, function (paypalCheckoutErr, paypalCheckoutInstance) { // Stop if there was a problem creating PayPal Checkout. // This could happen if there was a network error or if it's incorrectly // configured. if (paypalCheckoutErr) { console.error('Error creating PayPal Checkout:', paypalCheckoutErr); return; } // Set up PayPal with the checkout.js library paypal.Button.render({ env: 'sandbox', commit: true, // This will add the transaction amount to the PayPal button payment: function () { return paypalCheckoutInstance.createPayment({ flow: 'checkout', // Required amount: 0.10, // Required currency: 'USD', // Required enableShippingAddress: true, shippingAddressEditable: false, shippingAddressOverride: { recipientName: 'Scruff McGruff', line1: '1234 Main St.', line2: 'Unit 1', city: 'Chicago', countryCode: 'US', postalCode: '60652', state: 'IL', phone: '123.456.7890' } }); }, onAuthorize: function (data, actions) { return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) { // Submit `payload.nonce` to your server var intent = data.intent; var paymentID = data.paymentID; var payerID = data.payerID; var paymentToken = data.paymentToken; var paymentMethod = 'PayPal'; var orderID = data.orderID; console.log(data); document.getElementById('payload_nonce').value = payload.nonce; document.getElementById('orderID').value = orderID; if(orderID){ document.getElementById("myForm").submit(); } }); }, onCancel: function (data) { console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2)); }, onError: function (err) { console.error('checkout.js error', err); } }, '#paypal-button').then(function () { // The PayPal button will be rendered in an html element with the id // `paypal-button`. This function will be called when the PayPal button // is set up and ready to be used. }); }); }); </script> <form method="POST" action="http://localhost/paypalWithBraintree/server_side.php" id="myForm"> <input type="hidden" name="amount" value="0.10" id="amount"> <input type="hidden" name="payload_nonce" value="" id="payload_nonce"> <input type="hidden" name="orderID" value="" id="orderID"> </form> |
server_side.php
|
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 |
<?php require_once ('braintree-php-3.30.0/lib/Braintree.php'); $gateway = new Braintree_Gateway([ 'environment' => 'sandbox', 'merchantId' => 'merchantId_ptdfnbtb', 'publicKey' => 'publicKey_wj59gdqz', 'privateKey' => 'privateKey_9cbd4e0f15b13fe6d22399f2' ]); $amount = $_POST['amount']; $payload_nonce = $_POST['payload_nonce']; $orderId = $_POST['orderID']; $result = $gateway->transaction()->sale([ 'amount' => $amount, 'paymentMethodNonce' => $payload_nonce, 'orderId' => $orderId, 'options' => [ 'submitForSettlement' => True ], ]); if ($result->success) { print_r("Success ID: " . $result->transaction->id); echo "<a href='http://localhost/paypalWithBraintree/'>Go back</a>"; } else { print_r("Error Message: " . $result->message); echo "<a href='http://localhost/paypalWithBraintree/'>Go back</a>"; } ?> |
Here is the complete source code to integrate PayPal with Braintree.
Use it and let me know if you have any issue.
Also Check:
- Send Mail Attachments with PHP Mail()
- Selection in CSS | CSS ::selection
- How to Integrate Google Translate on website
Happy Coding..!
Was this article helpful?
YesNo
[…] PayPal Integration using Braintree API […]
[…] PayPal Integration using Braintree API […]