Readme

Getting Started

This code sample demonstrates two different payment experiences using Express Checkout via Braintree SDK. A Braintree account is not required because the server-side Braintree SDK is initialized with a PayPal Access Token. For more information on accepting Express Checkout via Braintree SDK, please refer to the Get Started Guide.

Sandbox Buyer Accounts

The following Sandbox Buyer Accounts are provided for convenience.

Code Sample Demonstration

Mouse-over the buttons in the Shopping Cart to review the Payment Flow diagrams.

Payment Flow 1: The Buyer selects Shipping Address and Wallet inside the PayPal mini-browser and completes the payment on the Seller's website.

1. In the "Shopping Cart" section click on the PayPal Check out button to open the PayPal mini-browser.
   • Login with a Sandbox Buyer Account.
   • Optionally change the Ship to information.
   • Optionally change the Pay with information.
   • Optionally click the Cancel and return... link to exit the PayPal mini-browser.
   • Click the Continue button.
   • The PayPal mini-browser closes.
2. In the "Shopping Cart" section use the Select shipping rate field to update shipping rate.
3. Click the Pay Now button to execute the payment.
4. You will land on the "Order Complete" page.

Payment Flow 2: The Buyer provides Shipping Address on the Seller's website then completes the payment inside the PayPal mini-browser.

1. In the "Shopping Cart" section click on the Proceed to Checkout button.
2. Update the fields under Ship to (optional).
3. Click on the PayPal Check out button to open the PayPal mini-browser.
   • Login with a Sandbox Buyer Account.
   • Optionally change the Pay with information.
   • Optionally click the Cancel and return... link to exit the PayPal mini-browser.
   • Click the Pay Now button to execute the payment.
   • The PayPal mini-browser closes.
4. You will land on the "Order Complete" page.

JavaScript client-side SDKs

Include the following JavaScript SDKs on your checkout page so you can accept payments from PayPal.

<script src="https://js.braintreegateway.com/web/3.11.0/js/client.min.js></script>
<script src="https://js.braintreegateway.com/web/3.11.0/js/paypal-checkout.min.js></script>
<script src="https://www.paypalobjects.com/api/checkout.js></script>

PHP server-side SDK

Braintree provides a PHP library. Refer to the Set Up Your Server page for the latest download.

Construct your gateway object

In your code, you must first construct a gateway object with the environment-specific (sandbox or production) access token provided in your PayPal dashboard:

BraintreeGateway gateway = new BraintreeGateway(useYourAccessToken);

Generate your own Access Token for testing.

1. Navigate to https://developer.paypal.com/
2. Click Login
3. Click Dashboard (top right)
4. Click on My Apps & Credentials
5. Go to Express Checkout via Braintree SDK
6. Click Generate Test Access Token
   • Select the Sandbox account from the Drop down
   • Click Generate Credential
7. Copy the text in the field labeled "AccessToken"

Express Checkout via Braintree SDK integration steps:

Review the following steps and sample JavaScript code below to better understand the integration.

1. Download the server-side SDK.
2. Load the Braintree JavaScript components.
3. Generate a PayPal Checkout button in the HTML: see paypal.Button.render and '#paypal-button' below.
4. Initialize the JavaScript client.
   • Your server needs to return an authorization token. See bt-get-client-token.php.
5. When the PayPal Checkout button is clicked, the PayPal mini-browser automatically opens. When the PayPal mini-browser closes, the following information is returned to the client-side Script. See onAuthorize below.
   • Payment Nonce
   • Shipping Address data (with the following client-side configuration)
     • commit: false
     • enableShippingAddress: true
6. Post the Payment Nonce and form data to server file bt-transaction.php.
7. Submit the transaction. See bt-transaction.php.

Basic client-side script with comments

/* 
    Braintree - Initialize the JavaScript client
*/		
braintree.client.create({
			
    // authorization from server
    authorization: "iwidmVu...bW8iOiJvZmYifQ==" 
				
}, function(clientErr, clientInstance) {

    // Handle error in client creation
    if (clientErr) { 
        console.log('Error creating client instance: ' + clientErr);
        return;
    }

    /* 
        Braintree - PayPal Checkout button component 
    */
    braintree.paypalCheckout.create({
        client: clientInstance
        }, function (createErr, paypalCheckoutInstance) {
            if (createErr) {
                if (createErr.code === 'PAYPAL_BROWSER_NOT_SUPPORTED') {
                    console.error('This browser is not supported.');
                } else {
                    console.error('Error!', createErr);
                }
                return;
            }

            paypal.Button.render({
                env: 'sandbox', // or 'production'

                locale: 'en_US',

                style: {
                    size: 'medium',   // tiny | small | medium
                    color: 'blue',    // gold | blue | silver
                    shape: 'rect',    // pill | rect
                    label: 'checkout' // checkout | credit
                },            

                payment: function () {
                    return paypalCheckoutInstance.createPayment({
                        flow: 'checkout', // 'checkout' is one-time payment flow
                        intent: 'sale',  // sale is immediately submitted for settlement 
                        amount: '300.00', // required for 'checkout' flow
                        currency: 'USD',
                        locale: 'en_US',
                        displayName: 'Test Store', // company name
                        enableShippingAddress: true, // Returns a shipping address object in tokenizePayment
                        shippingAddressEditable: true
                });
            },
        
            commit: false, // PayPal mini-browser button: true (Pay Now button) | false (Continue button)

            onAuthorize: function (data, actions) {
                return paypalCheckoutInstance.tokenizePayment(data).then(function (payload) {
                // Submit payload.nonce to your server
                });
            },

            onCancel: function (data) {
                console.log('onCancel: ', JSON.stringify(data, 0, 2));
            },

            onError: function (err) {
                console.error('onError: ', err);
            }
        }, '#paypal-button'); // the PayPal Checkout button is rendered in an html element with the id `paypal-button`
      
    });   
});