Accept a Wallet Payment on Web

Use our Pay Form with Tyro.js to accept Apple Pay or Google Pay payments on a web browser (or web view for Apple Pay).

Apple Pay support

Once enabled, the Tyro Pay Form will automatically display the Apple Pay button if it is supported on the customer's device. Apple Pay is supported for the following:

• Safari on iOS 10+
• Safari on macOS Sierra or later
• Chrome, Edge and Firefox on iOS 16+
• iOS Apps using WKWebView on iOS 13+

For example, the Apple Pay button will not show on Chrome on a Mac, but it will show on Safari on a Mac. Please refer to Apple's documentation for more information.

Google Pay support

Once enabled, the Tyro Pay Form will automatically display the Google Pay button if it is supported on the customer's device. Google Pay is supported on all major web browsers.

Enabling Wallet Payments with Tyro.js

Prerequisites

Please familiarise yourself with the guide to Accept an Online Payment, as the steps outline in this document builds upon the existing integration.

1. Verify your website domain for Apple Pay

Before enabling Apple Pay, your website must be served over HTTPS and the domain/s verified. Subdomains must also be verified, for example, company.example.com and example.com each need to be verified.

• Download the domain association file and host it at https://<your-website-domain>/.well-known/apple-developer-merchantid-domain-association. For example, if your domain is https://example.com, the file should be publicly available at https://example.com/.well-known/apple-developer-merchantid-domain-association. Make sure the file name is apple-developer-merchantid-domain-association and contains no extension, otherwise domain verification will fail.
• Once you have hosted the file, let Tyro know the domain/s you want verified and we will action this with Apple.
• All websites that use Apple Pay will need to be verified. This includes your sandbox and production environments.

2. Enable Apple Pay and Google Pay

At step 4 from Accept an Online Payment, modify your code to include options when you create the Pay Form tyro.createPayForm().

Updated Pay Form config

// Javascript sample code
let paySecret;
async function init() {
    const response = await fetch("/create-order", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ items }),
    });
    paySecret = await response.json().paySecret;
    await tyro.init(paySecret);

    const payForm = tyro.createPayForm({
        options: {
            // Updated code
            applePay: {
                enabled: true,
            },
            googlePay: {
                enabled: true
            },
            creditCardForm: {
                enabled: true
            }
        }
    });
    payForm.inject("#tyro-pay-form");
}

init();

2.1 Optional - Configure Options

You can configure options when creating the Pay Form.

Displaying Wallet Buttons Individually

You can also display the wallet buttons on their own. For example, to display only the Apple Pay button, set options.applePay.enabled=true and other options to false.

// Javascript sample code
const payForm = tyro.createPayForm({
    options: {
        applePay: {
            enabled: true,
            // optional
            totalLabel: 'Example Merchant Name'
            // optional - defaults to all networks when not provided
            supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'maestro'] 
        },
        googlePay: {
            enabled: false
        },
        creditCardForm: {
            enabled: false
        }
    }
});

3. Add the Wallet Payment Listeners

Set the listeners to handle the Wallet Payment events.

3.1 Set the WalletPaymentBeginListener

Invoked when the user has clicked on one of the Wallet Payment buttons. This is called before the Wallet dialog is shown, e.g. the Apple Pay Dialog that shows the cards to use. You would typically show a loading state on your UI during this process.

// Javascript sample code
  payForm.setWalletPaymentBeginListener((paymentType) => {
    // show loading code here...
    if(paymentType === 'APPLE_PAY') {
        // optionally do something specific to Apple Pay
    } else if(paymentType === 'GOOGLE_PAY'){
        // optionally do something specific to Google Pay
    }
  });

3.2 Set the WalletPaymentCancelledListener

Invoked when the Wallet Payment dialog has been closed by the user, e.g. they decide to cancel the payment before choosing a saved card. Use this listener to hide the loading state on your UI.

// Javascript sample code
  payForm.setWalletPaymentCancelledListener((paymentType) => {
    // hide loading code here...
    if(paymentType === 'APPLE_PAY') {
        // optionally do something specific to Apple Pay
    } else if(paymentType === 'GOOGLE_PAY'){
        // optionally do something specific to Google Pay
    }
  });

3.3 Set the WalletPaymentCompleteListener

Invoked when the Wallet Payment is complete.

• If the error object is defined, the transaction has failed. Inspect the error object for more details.
• If the error object is undefined, the transaction has completed. Fetch the PayRequest and get the status to check the result.
• For more statuses see Pay Request statuses

// Javascript sample code

async function showPaymentResult() {
  const payRequest = await tyro.fetchPayRequest();

  switch (payRequest.status) {
    case "SUCCESS":
      return showSuccess();
    case "FAILED":
      return showFail();
    ......
  }
}

payForm.setWalletPaymentCompleteListener((paymentType, error) => {
    if(error) {
        const { type, errorMessage, errorCode, gatewayCode } = error;
        // handle errors here
            switch (type) {
            case "SERVER_VALIDATION_ERROR":
                return showServerValidationError(errorMessage, errorCode, gatewayCode);
            case "CARD_ERROR":
                return showCardError(errorMessage, errorCode, gatewayCode);
            case "SERVER_ERROR":
                return showGenericError(errorMessage, errorCode, gatewayCode);
            ......
            }
    } else {
        showPaymentResult();
    }
});

5. Configure styles

To configure the Wallet Payment styles including Apple Pay and Google Pay specific styles, please see the Style Guide.

6. Test your integration

6.1 Testing Apple Pay

• Your domain must be verified and be served over HTTPS.
• Open your integrated checkout page on Safari with an Apple Pay enabled device. Make sure you have added cards to Apple Pay. The Apple Pay button should be displayed.
• You should be able to successfully submit payments via the Apple Pay button.

6.2 Testing Google Pay

• Make sure you are logged into your Google Account and you have Google Pay enabled with cards.
• Open your integrated checkout page on Chrome with a Google Pay enabled device. The Google Pay button should be displayed.
• You should be able to successfully submit payments via the Google Pay button.