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 Apple Pay button on your page and place it where you want the button to be rendered. Replace payment-form-container with the ID you want to use.

1
<div id="payment-form-container">
2
<!-- The Apple Pay button will be inserted here. -->
3
</div>

Step 3. Render the Apple Pay button r

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 configuration parameters and generate a payment session when the end customers click the Apple Pay button. The following table describes the parameters:

1. The following parameters should not be specified when rendering the button:

   • The label parameter required by Apple Pay is automatically populated with the value from the Business Name field of the Public Business Information payment setting.

   • The accountId parameter should not be specified when rendering the button. It can be specified when implementing the server-side API integration. See Implement server-side API integration to create payment session.

2. Mount the button component to the container.
3. Handle the payment result.

Here is an example of the code implementation:

<script>
02
    const publishableKey = "pk_rO0ABXenAF2s7QAF…";
03
     
04
    const renderForm = () => {
05
      const zuora = Zuora(publishableKey);
06
      zuora.createApplePayButton({
07
        currency: "USD",
08
        amount: "10.00",
09
        countryCode: "US",
10
        locale: "en_US",
11
        buttonType: "pay",
12
        buttonStyle: "white-outline",
13
        buttonRadius: "20px",
14
        buttonHeight: "50px",
15
        supportedNetworks: ["visa", "masterCard", "amex", "discover"],
16
        createPaymentSession: () => {
17
          return new Promise((resolve, reject) => {
18
            fetch("/sdk-test/payment-session.json?seed=" + Math.random(), {
19
              method: "GET",
20
            }).then((response) => {
21
              if (response.ok) {
22
                return response.json();
23
              } else {
24
                return reject("Payment session request is rejected.");
25
              }
26
            }).then((data) => {
27
              return resolve(data.token);
28
            }).catch((error) => {
29
              return reject(error);
30
            });
31
          });
32
        },
33
        onComplete: (result) => {
34
          console.log("==========");
35
          console.log("Payment Result");
36
          console.log("==========");
37
          console.log(`transaction result: ${JSON.stringify(result)}`);
38
          alert(`transaction result: ${JSON.stringify(result)}`);
39
        }
40
      }).then(function(applePayButton) {
41
        applePayButton.mount("#payment-form-container")
42
      }).catch(function(error) {
43
        console.error(error);
44
      });
45
    }
46
    function resultMessage(message) {
47
        const container = document.querySelector("#result-message");
48
        container.innerHTML = message;
49
      }
50
</script>

The onComplete function returns result in the following structure:

1
{
2
    success: true,
3
    paymentMethodId?: string;
4
    paymentId?: string;
5
}

1
{
2
    success: false,
3
    error: {
4
        type: string;
5
        code: string;
6
        message: string;
7
    }
8
}