PayPal Integration using Braintree API

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.

<!-- 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 div the element where the PayPal button will populate.

<div id="paypal-button"></div>

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

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

100

101

102

103

104

105

106

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

server_side.php

<?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>";
	}
?>

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

Happy Coding..!

Was this article helpful?

YesNo

PayPal Integration using Braintree API

Client-side SDK basic configuration

Creating PayPal Checkout Instance

Complete Source code of PayPal Integration using Braintree API

index.php

server_side.php

Related

Written by Bikash

5 Most Effective Ways To Optimize PHP Code

How to Install the latest version of Laravel?

3 popular ways to make HTTP requests in JavaScript

2 Replies to “PayPal Integration using Braintree API”

Leave a Reply Cancel reply