Set up Alipay payment methods 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 Alipay button on your page and place it where you want the button to be rendered. Replace alipay-button-container with the ID you want to use.

<div id="alipay-button-container">
<!-- The Alipay button will be inserted here. -->
</div>

Step 3. Render the Alipay 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 button. The following table describes the payment request parameters:

   Parameter	Type	Description
   buttonHeight	string	Optional. The button height in pixels, such as 100px.
   buttonWidth	string	Optional. The button width in pixels, such as 100px.

4. Mount the button component to the container.
5. Handle the payment result.  

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>