Vaulting a PayPal account will allow you to charge the account in the future without requiring your customer to re-authenticate with PayPal.

The vaulted payment flow supports the following features:

  • PayPal One Touch™
  • Select or add shipping addresses in the PayPal account
  • Select or add funding instruments in the PayPal account
  • Two factor authentication support (currently only for US, UK, CA, DE, AT, and AU)

Typical use cases for the vaulted payment flow:

  • Faster payments for repeat customers
  • Subscriptions
  • Recurring billing (e.g. automatic top-up or usage based charges)

Invoking the Vault flow

Enable the Vault flow by leaving out the singleUse client option or setting it to false, as seen below.

An integration with our Vault would typically be used in conjunction with your standard checkout flow. An example checkout page for the Vault flow might look like this:

HTML
Copy
Copied
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <form id="merchant-form" action="/create-transaction" method="post">
      <div id="paypal-container"></div>
      <input type="submit" value="Submit" />
    </form>
    <script src="https://js.braintreegateway.com/js/braintree-2.32.1.min.js"></script>
    <script type="text/javascript">
    braintree.setup("CLIENT-TOKEN-FROM-SERVER", "custom", {
      paypal: {
        container: "paypal-container",
        singleUse: false,
        billingAgreementDescription: 'Your agreement description',
        locale: 'en_US',
        enableShippingAddress: true,
        shippingAddressOverride: {
          recipientName: 'Scruff McGruff',
          streetAddress: '1234 Main St.',
          extendedAddress: 'Unit 1',
          locality: 'Chicago',
          countryCodeAlpha2: 'US',
          postalCode: '60652',
          region: 'IL',
          phone: '123.456.7890',
          editable: false
        }
      },
      dataCollector: {
        paypal: true
      },
      onPaymentMethodReceived: function (obj) {
        doSomethingWithTheNonce(obj.nonce);
      }
    });
    </script>
  </body>
</html>

Once the customer completes the consent flow and the PayPal pop-up closes, the onPaymentMethodReceived callback is returned with the tokenization result. This includes a nonce which can then be used in your Transaction.Sale call to Braintree.

Collecting device data

availability

This feature requires version 2.16.0 or higher of the JavaScript SDK. We recommend using the latest release (v2.32.1).

Collecting device data from your customers is required when initiating non-recurring transactions from Vault records. Collecting and passing this data with transactions will help reduce decline rates.

To collect device data, you will need to pass some additional dataCollector options to your braintree.setup call.

HTML
Copy
Copied
<script type="text/javascript">
  braintree.setup('TOKEN', 'custom', {
    paypal: {
      container: 'paypal-container',
      singleUse: false,
    },
    dataCollector: {
      paypal: true
    },
    onPaymentMethodReceived: function (obj) {
      doSomethingWithTheNonce(obj.nonce);
    }
  });
</script>

The braintreeInstance returned by onReady will have an additional deviceData string value. It is up to you to provide this value as the device_data option to your server. The most common mechanism for this is to inject the device_data value into your form as a hidden input inside of your onReady callback.

JavaScript
Copy
Copied
braintree.setup(TOKEN, 'custom', {
  dataCollector: {
    paypal: true
  },
  onReady: function (braintreeInstance) {
    var form = document.getElementById('my-form-id');
    var deviceDataInput = form['device_data'];

    if (deviceDataInput == null) {
      deviceDataInput = document.createElement('input');
      deviceDataInput.name = 'device_data';
      deviceDataInput.type = 'hidden';
      form.appendChild(deviceDataInput);
    }

    deviceDataInput.value = braintreeInstance.deviceData;
  }
  /* ... */
});
note

If you're also using our Advanced Fraud Tools for credit cards, you can simultaneously collect that device data by adding a kount option to your dataCollector. See the Advanced Fraud Tools guide for details.

Country and language support

The Vault flow is available to merchants in all countries that we support. The language in the UI will automatically adjust based on the customer's country.

Currency presentment

In the Vault flow itself, the transaction currency and amount are not displayed to the customer. It is up to you to display these details in your checkout flow somewhere (e.g. cart page, order review page, etc.). Our Server-Side guide outlines which currencies are supported for PayPal transactions.

Still have questions?

If you can’t find an answer, contact our Support team