Integrate Braintree shopper insights with the JavaScript SDK

DOCS

Last updated: Sept 23rd, 9:37pm

Improve conversion rates, increase sales, and increase user retention by prioritizing the customer’s preferred payment methods. Determine if a customer has a PayPal account and what is their recommended payment button.

Know before you code

If you are a new merchant, sign up for a PayPal business account.

Complete Get started to set up your PayPal account, client ID, and sandbox emails for testing.

Get consent from your customer to share this information with PayPal services.

1. Generate client SDK token

Before initializing the SDK, you must generate a token that can be passed in to the SDK's data-sdk-client-token attribute.

To fetch this token, use the following OAuth 2.0 API and pass your base64-encoded CLIENT_ID:CLIENT_SECRET. This token must be generated on your server to better protect your client secret.

To base64 encode your client ID and secret using node.js:

1const BASE64_ENCODED_CLIENT_ID_AND_SECRET = Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString('base64')

Option 1: Request the token to initialize the SDK (direct merchant integration)

1curl -s -X POST "https://api-m.sandbox.paypal.com/v1/oauth2/token" \
2  -u BASE64_ENCODED_CLIENT_ID_AND_SECRET \
3 -H "Content-Type: application/x-www-form-urlencoded" \
4 -d "grant_type=client_credentials" \
5 -d "response_type=id_token" \
6 -d "intent=sdk_init"

Option 2: Request the token to initialize the SDK (partner integration)

If you’re a partner that has integrated with PayPal, make sure to fetch your token using the following information. Generate an AUTH-ASSERTION-TOKEN to initialize the SDK.

Generate the Auth-Assertion token

1const header = Buffer.from(JSON.stringify({ alg: "none" })).toString("base64");
2 const payload = Buffer.from(JSON.stringify({
3   payer_id: MERCHANT_ID,
4   ss: PARTNER_CLIENT_ID,
5 })).toString("base64");
6
7 const AUTH_ASSERTION_HEADER = `${header}.${payload}.`;

Generate the SDK token using the Auth-Assertion token

1curl -s -X POST "https://api-m.sandbox.paypal.com/v1/oauth2/token" \
2   -u CLIENT_ID:CLIENT_SECRET \
3  -H "Content-Type: application/x-www-form-urlencoded" \
4  -H 'PayPal-Auth-Assertion: AUTH-ASSERTION-TOKEN' \
5  -d "grant_type=client_credentials" \
6  -d "response_type=id_token" \
7  -d "intent=sdk_init"

Sample response

1{
2 "access_token" : "A21AAJ--LVQmY...",
3 "app_id" : "APP-80W284485P519543T",
4 "expires_in" : 32400,
5 "id_token" : "eyJraWQiOiJj...",
6 "nonce" : "2022-09-27T00:22:30Zxs...",
7 "scope" : "...",
8 "token_type" : "Bearer"
9}

2. Call the Shopper Insights API

1// Expected payload response to the Merchant
2{   
3  isPayPalRecommended: boolean,
4  isVenmoRecommended: boolean
5}
6
7// Example of what the preceding response can now be used for:
8const isPayPalRecommended = result.paypal.isEligibileInNetwork && result.paypal.recommend;
9const isVenmoRecommended = result.venmo.isEligibileInNetwork && result.venmo.recommend;

Calling the API returns a boolean of the corresponding payment method.

Note: Presentment of PayPal Checkout. You agree to confirm your customer's PayPal network payment eligibility before any other payment method. When PayPal network eligibility is confirmed, give preferential placement to the recommended payment methods on any page offering payment options. Also, the recommended payment methods should be preselected if available. If PayPal network payment eligibility cannot be confirmed, PayPal should be positioned at least at par with other payment methods.

Use case 1: Display a single button for upstream presentment

1// Merchant Interface:
2
3// Request Client Token for SDK Intialization
4braintree.client.create({
5    authorization: auth
6}).then(function(clientErr, client) {
7    if (clientErr) {
8        console.log('Error initializing client', clientErr);
9        return;
10    }
11
12const result = await
13    braintree.shopperInsights.create({
14    client: client
15    }).then(function(shopperInsights) {
16        shopperInsights.getRecommendedPaymentMethods({
17            email: '[email protected]',
18            phone: {
19            countryCode: '1',
20            number:'5105551234'},
21      currency: 'USD',
22        if (null) {
23          default: 'USD'
24        }
25        }
26
27const {isPayPalRecommended, isVenmoRecommended} = result;
28  if (isPayPalRecommended){
29    // display PayPal Button
30  else if (isVenmoRecommended){
31    // display Venmo Button
32  }
33  else {
34    // Merchant renders another payment Method
35  }      
36});

Use case 2: Display multiple buttons for upstream presentment

1const {isPayPalRecommended, isVenmoRecommended} = result;
2
3  if (isPayPalRecommended){
4    const button = paypal.Buttons({
5        fundingSource: paypal.FUNDING.PAYPAL,
6        })
7        button.render('#paypal-button-selector');
8    }
9
10    if (isVenmoRecommended){
11    const button = paypal.Buttons({
12        fundingSource: paypal.FUNDING.VENMO,
13        })
14        //Render the venmo button
15  }

Next steps

Test your integration in the PayPal sandbox.