Set up PayPal on PayPal Commerce Platform with Zuora JavaScript SDK

Step 1. Load zuora.js

Import the Zuora JavaScript client library to your page.

For sandbox environments, use <script src="https://js.zuora.com/payment/sandbox/1.4.0/zuora.js"></script>.

For production environments, use <script src="https://js.zuora.com/payment/1.4.0/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 > 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 PayPal Commerce Platform, specify PaypalCP. This field is case-sensitive. paymentGatewayId: The ID of the PayPal Commerce Platform payment gateway instance. clientId: The client ID of the PayPal application,  which can be found in the PayPal dashboard.

   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: "PaypalCP",
      paymentGatewayId: "4028839390f481ae0190f491084f0004",
      clientId: "AfuCtaWvIgugr1mcrpoEdGTAwxkpeVi-C5Zrw0oXdmFWLh5QzWAeWiu1UmzBe8A6JktG_Z31UKD1jXJ9"
    },
    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);
  });
};