{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"Accept a Wallet Payment on Web","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"accept-a-wallet-payment-on-web","__idx":0},"children":["Accept a Wallet Payment on Web"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"apple-pay-support","__idx":1},"children":["Apple Pay support"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Safari on iOS 10+"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Safari on macOS Sierra or later"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Chrome, Edge and Firefox on iOS 16+"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["iOS Apps using WKWebView on iOS 13+"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://support.apple.com/en-au/HT208531"},"children":["Apple's documentation"]}," for more information."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"google-pay-support","__idx":2},"children":["Google Pay support"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"enabling-wallet-payments-with-tyrojs","__idx":3},"children":["Enabling Wallet Payments with Tyro.js"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"prerequisites","__idx":4},"children":["Prerequisites"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Please familiarise yourself with the guide to ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/tyro-js"},"children":["Accept an Online Payment"]},", as the steps outline in this document builds upon the existing integration."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"1-verify-your-website-domain-for-apple-pay","__idx":5},"children":["1. Verify your website domain for Apple Pay"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Tyro acts as the aggregator and processes the payments via our own Apple Developer account. Hence you do not need to create an Apple Developer account, Apple Pay Merchant ID, or certificates etc. Follow the steps below instead."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Download the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://docs.connect.tyro.com/.well-known/aple-developer-merchantid-domain-association"},"children":["domain association file"]}," and host it at ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://<your-website-domain>/.well-known/apple-developer-merchantid-domain-association"]},". For example, if your domain is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://example.com"]},", the file should be publicly available at ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://example.com/.well-known/apple-developer-merchantid-domain-association"]},". Make sure the file name is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["apple-developer-merchantid-domain-association"]}," and contains no extension, otherwise domain verification will fail."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Once you have hosted the file, let Tyro know the domain/s you want verified and we will action this with Apple."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["All websites that use Apple Pay will need to be verified. This includes your sandbox and production environments."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"2-enable-apple-pay-and-google-pay","__idx":6},"children":["2. Enable Apple Pay and Google Pay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["At step 4 from ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/tyro-js#4-create-a-pay-request-and-inject-the-pay-form"},"children":["Accept an Online Payment"]},", modify your code to include ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/tyro-js/pay-form#config-parameters"},"children":["options"]}," when you create the Pay Form ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tyro.createPayForm()"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"updated-pay-form-config","__idx":7},"children":["Updated Pay Form config"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Javascript sample code\nlet paySecret;\nasync function init() {\n    const response = await fetch(\"/create-order\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: JSON.stringify({ items }),\n    });\n    paySecret = await response.json().paySecret;\n    await tyro.init(paySecret);\n\n    const payForm = tyro.createPayForm({\n        options: {\n            // Updated code\n            applePay: {\n                enabled: true,\n            },\n            googlePay: {\n                enabled: true\n            },\n            creditCardForm: {\n                enabled: true\n            }\n        }\n    });\n    payForm.inject(\"#tyro-pay-form\");\n}\n\ninit();\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"21-optional---configure-options","__idx":8},"children":["2.1 Optional - Configure Options"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can configure ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/tyro-js/pay-form#config-parameters"},"children":["options"]}," when creating the Pay Form."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"displaying-wallet-buttons-individually","__idx":9},"children":["Displaying Wallet Buttons Individually"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can also display the wallet buttons on their own. For example, to display only the Apple Pay button, set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["options.applePay.enabled=true"]}," and other options to false."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Javascript sample code\nconst payForm = tyro.createPayForm({\n    options: {\n        applePay: {\n            enabled: true,\n            // optional\n            totalLabel: 'Example Merchant Name'\n            // optional - defaults to all networks when not provided\n            supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb', 'maestro']\n        },\n        googlePay: {\n            enabled: false\n        },\n        creditCardForm: {\n            enabled: false\n        }\n    }\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"3-add-the-wallet-payment-listeners","__idx":10},"children":["3. Add the Wallet Payment Listeners"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set the listeners to handle the Wallet Payment events."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"31-set-the-walletpaymentbeginlistener","__idx":11},"children":["3.1 Set the WalletPaymentBeginListener"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Javascript sample code\n  payForm.setWalletPaymentBeginListener((paymentType) => {\n    // show loading code here...\n    if(paymentType === 'APPLE_PAY') {\n        // optionally do something specific to Apple Pay\n    } else if(paymentType === 'GOOGLE_PAY'){\n        // optionally do something specific to Google Pay\n    }\n  });\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"32-set-the-walletpaymentcancelledlistener","__idx":12},"children":["3.2 Set the WalletPaymentCancelledListener"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Javascript sample code\n  payForm.setWalletPaymentCancelledListener((paymentType) => {\n    // hide loading code here...\n    if(paymentType === 'APPLE_PAY') {\n        // optionally do something specific to Apple Pay\n    } else if(paymentType === 'GOOGLE_PAY'){\n        // optionally do something specific to Google Pay\n    }\n  });\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"33--set-the-walletpaymentcompletelistener","__idx":13},"children":["3.3  Set the WalletPaymentCompleteListener"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Invoked when the Wallet Payment is complete."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/tyro-js/pay-form#error-object"},"children":["error object"]}," is defined, the transaction has failed. Inspect the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/tyro-js/pay-form#error-object"},"children":["error object"]}," for more details."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["If the error object is undefined, the transaction has completed. Fetch the PayRequest and get the status to check the result."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["For more statuses see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/payment-scenarios/during-payment"},"children":["Pay Request statuses"]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"// Javascript sample code\n\nasync function showPaymentResult() {\n  const payRequest = await tyro.fetchPayRequest();\n\n  switch (payRequest.status) {\n    case \"SUCCESS\":\n      return showSuccess();\n    case \"FAILED\":\n      return showFail();\n    ......\n  }\n}\n\npayForm.setWalletPaymentCompleteListener((paymentType, error) => {\n    if(error) {\n        const { type, errorMessage, errorCode, gatewayCode } = error;\n        // handle errors here\n            switch (type) {\n            case \"SERVER_VALIDATION_ERROR\":\n                return showServerValidationError(errorMessage, errorCode, gatewayCode);\n            case \"CARD_ERROR\":\n                return showCardError(errorMessage, errorCode, gatewayCode);\n            case \"SERVER_ERROR\":\n                return showGenericError(errorMessage, errorCode, gatewayCode);\n            ......\n            }\n    } else {\n        showPaymentResult();\n    }\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"5-configure-styles","__idx":14},"children":["5. Configure styles"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When displaying the Wallet Payment buttons, please make sure you follow the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.apple.com/design/human-interface-guidelines/technologies/apple-pay/buttons-and-marks"},"children":["Apple Pay"]}," and ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developers.google.com/pay/api/web/guides/brand-guidelines"},"children":["Google Pay"]}," design guidelines."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To configure the Wallet Payment styles including Apple Pay and Google Pay specific styles, please see the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/online-payments/pay-online/integration-guide/tyro-js/style-guide"},"children":["Style Guide"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"6-test-your-integration","__idx":15},"children":["6. Test your integration"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You must use the cards that have been added to Google Pay or Apple Pay."," ","Note, when using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["liveMode=false"]},", your card will not be charged."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"61-testing-apple-pay","__idx":16},"children":["6.1 Testing Apple Pay"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Your domain must be verified and be served over HTTPS."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You should be able to successfully submit payments via the Apple Pay button."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"62-testing-google-pay","__idx":17},"children":["6.2 Testing Google Pay"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Make sure you are logged into your Google Account and you have Google Pay enabled with cards."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Open your integrated checkout page on Chrome with a Google Pay enabled device. The Google Pay button should be displayed."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["You should be able to successfully submit payments via the Google Pay button."]}]}]},"headings":[{"value":"Accept a Wallet Payment on Web","id":"accept-a-wallet-payment-on-web","depth":1},{"value":"Apple Pay support","id":"apple-pay-support","depth":2},{"value":"Google Pay support","id":"google-pay-support","depth":2},{"value":"Enabling Wallet Payments with Tyro.js","id":"enabling-wallet-payments-with-tyrojs","depth":2},{"value":"Prerequisites","id":"prerequisites","depth":2},{"value":"1. Verify your website domain for Apple Pay","id":"1-verify-your-website-domain-for-apple-pay","depth":3},{"value":"2. Enable Apple Pay and Google Pay","id":"2-enable-apple-pay-and-google-pay","depth":3},{"value":"Updated Pay Form config","id":"updated-pay-form-config","depth":4},{"value":"2.1 Optional - Configure Options","id":"21-optional---configure-options","depth":4},{"value":"Displaying Wallet Buttons Individually","id":"displaying-wallet-buttons-individually","depth":4},{"value":"3. Add the Wallet Payment Listeners","id":"3-add-the-wallet-payment-listeners","depth":3},{"value":"3.1 Set the WalletPaymentBeginListener","id":"31-set-the-walletpaymentbeginlistener","depth":4},{"value":"3.2 Set the WalletPaymentCancelledListener","id":"32-set-the-walletpaymentcancelledlistener","depth":4},{"value":"3.3  Set the WalletPaymentCompleteListener","id":"33--set-the-walletpaymentcompletelistener","depth":4},{"value":"5. Configure styles","id":"5-configure-styles","depth":3},{"value":"6. Test your integration","id":"6-test-your-integration","depth":3},{"value":"6.1 Testing Apple Pay","id":"61-testing-apple-pay","depth":4},{"value":"6.2 Testing Google Pay","id":"62-testing-google-pay","depth":4}],"frontmatter":{"title":"Accept a Wallet Payment on Web","seo":{"title":"Accept a Wallet Payment on Web"}},"lastModified":"2026-09-01T06:34:43.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/online-payments/pay-online/integration-guide/tyro-js/wallet-payments","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}