• Use the Register an Apple Pay domain API operation to register your domain with Apple Pay. The following operations are available to manage your registered domains:

  • List registered Apple Pay domains

  • Unregister an Apple Pay domain

• Register your domain through the UI: The registered domain is listed in the Apple Pay section. To unregister the domain, click Delete .

  1. Click your username in the upper right and navigate to Settings > Payments > Setup Payment Page and Payment Link .

  2. Click the E-Wallets tab.

  3. In the Apple Pay section, if you have not downloaded the domain-verification file, click download and then host it as described in step 2.

  4. Click Add Domain .

  5. Enter your domain that will show the Apple Pay button, select Accept and Agree to Apple Pay Web Terms and Conditions , and then click Save .

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> .

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.

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

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: Parameter Type Description currency string Required. The ISO 4217 alphabetic currency code, such as "USD". amount string Required. The total amount for the payment. supportedNetworks array Required. The payment networks supported by your Apple Pay integration. Specify the values as an array of strings, such as ["visa", "masterCard", "amex", "discover"] Before specifying this field, check the following information:

   • The networks supported by your payment gateway integration. See the Zuora Knowledge Center article specific to your payment gateway integration for details.

   • The allowed values. See Apple’s documentation for supportedNetworks for details.

   countryCode string The ISO 3166-1 alpha-2 code of the country where the transaction is processed, such as "US". If it is not specified, the default value US is used. locale string The locale code, which is the combination of ISO language code and ISO country code, such as "en_US". If it is not specified, the default value en_US is used. merchantInfo object Contains information about the merchant. You must specify the merchantName field (string) within this object. The provided merchant name and Zuora's merchant ID will be used to render the Apple Pay button. There is no need to specify the merchant ID in this object, because Zuora's merchant ID is automatically applied. Example: merchantInfo: { merchantName: "Example Merchant" } If merchantName and merchantInfo are not specified, the information configured in the Public Business Information setting for Payment Link will be used. Ensure you have enabled the Payment Link feature. See the following articles for instructions:

   • Follow the instructions in Enable payment features by yourself to enable the Payment Link feature.

   • Follow the instructions in Add public business information to invoice payment page to configure the Public Business Information setting.

   buttonType string Default: plain A string that indicates the button type that you can display to initiate Apple Pay transactions. For details about allowed values, see the following articles in Apple’s documentation:

   • ApplePayButtonType

   • Apple Pay Design - Button types

   buttonStyle string Default: black A string that indicates the supported appearance for an Apple Pay Button. For details about allowed values, see the following articles in Apple’s documentation:

   • ApplePayButtonStyle

   • Apple Pay Design - Button styles

   buttonRadius string Default: 7px The button corner radius in pixels, such as 10px . buttonHeight string The button height in pixels, such as 30px . 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 .

   • Specifying a gateway instance is not supported when rendering the button. You can do it when implementing the server-side API integration. See Implement server-side API integration to create payment session .

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_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:

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

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

In your server, make an API request to the Create a payment session endpoint. For details about constructing the API request and implementing payment flows, see Create a payment session in the API Reference.

In your client code, provide a valid callback for createPaymentSession , which makes a call to your backend API to create a payment session.

We suggest that you test your integration by using a live card with a test gateway. You can make test payments by using the live card without it being charged. If you must use an Apple Pay testing card, submit a request to Zuora Global Support .

Apple Pay payments are processed through multiple parties, such as the payment gateway, the card network, Apple Pay, and your integration with Zuora. You might encounter issues beyond Zuora’s control, such as a known issue with Discover test cards that currencies other than USD are not supported. If you encounter any issues during your testing, you can submit a request to Zuora Global Support . Zuora will actively work with you to investigate the problems. If the problem is with other parties, please contact the relevant parties for assistance.

Zuora will handle the payment processing and complete the payment. You do not need to implement any integration for this.

After an Apple Pay payment method is successfully created, it is shown as a Credit Card payment method type in Zuora. You can retrieve this payment method through the UI, API, Data Source Export, and Data Query.