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.

The following table describes the parameters:

merchantInfo: {
    merchantName: "Example Merchant"
}

Here is an example of the code implementation:

<script>
    const publishableKey = "pk_rO0ABXenAF2s7QAF…";
    
    const renderForm = () => {
      const zuora = Zuora(publishableKey);
      zuora.createApplePayButton({
        currency: "USD",
        amount: "10.00",
        countryCode: "US",
        locale: "en_US",
        buttonType: "pay",
        buttonStyle: "white-outline",
        buttonRadius: "20px",
        buttonHeight: "50px",
        supportedNetworks: ["visa", "masterCard", "amex", "discover"],
        createPaymentSession: () => {
          return new Promise((resolve, reject) => {
            fetch("/sdk-test/payment-session.json?seed=" + Math.random(), {
              method: "GET",
            }).then((response) => {
              if (response.ok) {
                return response.json();
              } else {
                return reject("Payment session request is rejected.");
              }
            }).then((data) => {
              return resolve(data.token);
            }).catch((error) => {
              return reject(error);
            });
          });
        },
        onComplete: (result) => {
          console.log("==========");
          console.log("Payment Result");
          console.log("==========");
          console.log(`transaction result: ${JSON.stringify(result)}`);
          alert(`transaction result: ${JSON.stringify(result)}`);
        }
      }).then(function(applePayButton) {
        applePayButton.mount("#payment-form-container")
      }).catch(function(error) {
        console.error(error);
      });
    }
    function resultMessage(message) {
        const container = document.querySelector("#result-message");
        container.innerHTML = message;
      }
</script>

The onComplete function returns result in the following structure:

On Success

{
    success: true,
    paymentMethodId?: string;
    paymentId?: string;
}

On Error

{
    success: false,
    error: {
        type: string;
        code: string;
        message: string;
    }
}