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 > 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 PayPal 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.

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);
  });
};

In your server, make an API request to the Create a payment session endpoint. For details about the API request parameters, see Create a payment session in the API Reference.

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

To configure the payment flow mode, specify parameters for creating the server-side payment session and the client-side button, as outlined in the following table:

In client code, make a call to your backend API to create a payment session.