Here is an example of the code implementation:

<script>
    const publishableKey = "pk_rO0AB…";
    const renderForm = () => {
      const zuora = Zuora(publishableKey);
      zuora.createAlipayButton({
        buttonWidth: "300px",
        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(alipayButton) {
        alipayButton.mount("#payment-form-container")
      }).catch(function(error) {
        console.error(error);
      });
    }
    function resultMessage(message) {
        const container = document.querySelector("#result-message");
        container.innerHTML = message;
      }
  </script>

In your server, make an API request to the Create a payment session endpoint.

Because only the payment method creation flow is supported, specify the following required fields in the API request:

• processPayment : false

• storePaymentMethod : true

• amount

• currency

For details about the API request parameters, see Create a payment session in the API Reference.

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