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

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.