Set up PayPal on Braintree v2.0

Step 1. Load zuora.js

Import the Zuora JavaScript client library to your page:

<script src="https://js.zuora.com/payment/v3/zuora.js"></script>

Step 2. Create a container

Create a container for the PayPal button on your page and place it where you want the button to be rendered. Replace paypal-button-container with the ID you want to use.

<div id="paypal-button-container">
<!-- The PayPal button will be inserted here. -->
</div>

Step 3. Render the PayPal button

1. Copy the publishable key from Payment Form. In the Zuora UI, click your username in the upper right and navigate to Settings > Payments > Dynamic Hosted Payment Form. On the Publishable Keys tab, copy the key.
2. Initialize an instance of the Zuora object with your publishable key.
3. Populate the payment request parameters and generate a payment session when the end customers click the Pay button. The following table describes the payment request parameters:

   Parameter	Type	Description
   currency	string	Required. The ISO 4217 alphabetic currency code, such as "USD".
   amount	string	Required. The total amount for the payment. This field is required if intent is authorize.
   countryCode	string	The ISO 3166-1 alpha-2 code of the country where the transaction is processed, such as "US". If it is not specified, the default value US is used.
   locale	string	The locale code, which is the combination of ISO language code and ISO country code, such as "en_US". If it is not specified, the default value en_US is used.
   vault	boolean	To store the payment method, set this field to true.
   intent	string	The intent of the transaction. Currently, only authorize is supported.
   provider	object	The payment gateway instance that will process the payment. Specify the following nested fields: name: The type of the payment gateway. To support the PayPal integration on Braintree v2.0, specify Braintree. This field is case-sensitive. paymentGatewayId: The ID of the Braintree v2.0 payment gateway instance.

   For more information about payment flow implementation by using these parameters, see Payment flow use cases in the later section.

4. Mount the button component to the container.
5. Handle the payment result.  

Here is an example of the code implementation:

// The publishable key can be found on the Payment Form setting page.
const publishableKey = "pk_rO0AB..........";
const renderForm = () => {
  const zuora = Zuora(publishableKey);
  zuora.createPayPalButton({
    countryCode: "US",
    locale: "en_US",
    currency: "USD",
    // The amount to be paid. this is required when intent is "authorize".
    amount: "1.00", 
    // set it to true to enable vaulting.
    vault: true, 
    // The intent of the transaction. only "authorize" is supported
    intent: "authorize", 
    provider: {
      name: "Braintree",
      // This is the Braintree v2 gateway instance id.
      paymentGatewayId: "4028839390f481ae0190f491084f0004",
    },
    createPaymentSession: () => {
      // it MUST return a Promise here.
      return new Promise((resolve, reject) => {
        // Send request to your server to create a payment session.
        // The server should return a payment session id.
        // then resolve the promise with the payment session id.
        resolve("payment-session-id-from-server");
      });
    },
    onComplete: (result) => {
      // handle the transaction result
      // when result.success is true, the transaction is successful.
      // result.paymentMethodId is the created payment method id.
      // result.paymentId is the processed payment id.
      //
      // When result.success is false, the transaction is failed.
      // result.error will contain the error code and message.
    }
  }).then(function(paypalButton) {
    paypalButton.mount("#paypal-button-container")
  }).catch(function(error) {
    // failed to create the PayPal button
    console.error(error);
  });
};