Google & Apple Pay | Payload Docs

<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="shortcut icon" href="../../images/favicon-2e999173.svg"/> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Google & Apple Pay | Payload Docs</title> <style media="screen"> .highlight table td { padding: 5px; } .highlight table pre { margin: 0; } .highlight { color: #faf6e4; background-color: #122b3b; } .highlight .gl { color: #dee5e7; background-color: #4e5d62; } .highlight .gp { color: #a8e1fe; font-weight: bold; } .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs { color: #6c8b9f; font-style: italic; } .highlight .cp { color: #99c6cb; font-weight: bold; } .highlight .err { color: #fefeec; background-color: #cc0000; } .highlight .gr { color: #cc0000; font-weight: bold; font-style: italic; } .highlight .k, .highlight .kd, .highlight .kv { color: #80f662; font-weight: bold; } .highlight .o, .highlight .ow { color: #4df4ff; font-weight: bold; } .highlight .p, .highlight .pi { color: #4df4ff; } .highlight .gd { color: #cc0000; } .highlight .gi { color: #99c6cb; } .highlight .ge { font-style: italic; } .highlight .gs { font-weight: bold; } .highlight .gt { color: #dee5e7; background-color: #4e5d62; } .highlight .kc { color: #f696db; font-weight: bold; } .highlight .kn { color: #6f90a8; font-weight: bold; } .highlight .kp { color: #6f90a8; font-weight: bold; } .highlight .kr { color: #6f90a8; font-weight: bold; } .highlight .gh { color: #6f90a8; font-weight: bold; } .highlight .gu { color: #6f90a8; font-weight: bold; } .highlight .kt { color: #99c6cb; font-weight: bold; } .highlight .no { color: #99c6cb; font-weight: bold; } .highlight .nc { color: #99c6cb; font-weight: bold; } .highlight .nd { color: #99c6cb; font-weight: bold; } .highlight .nn { color: #99c6cb; font-weight: bold; } .highlight .bp { color: #99c6cb; font-weight: bold; } .highlight .ne { color: #99c6cb; font-weight: bold; } .highlight .nl { color: #6f90a8; font-weight: bold; } .highlight .nt { color: #6f90a8; font-weight: bold; } .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { color: #f696db; font-weight: bold; } .highlight .ld { color: #f696db; font-weight: bold; } .highlight .ss { color: #f696db; font-weight: bold; } .highlight .s, .highlight .sb, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .sr, .highlight .s1 { color: #7fc340; font-weight: bold; } .highlight .sa { color: #80f662; font-weight: bold; } .highlight .se { color: #4df4ff; font-weight: bold; } .highlight .sc { color: #4df4ff; font-weight: bold; } .highlight .si { color: #4df4ff; font-weight: bold; } .highlight .nb { font-weight: bold; } .highlight .ni { color: #999999; font-weight: bold; } .highlight .w { color: #BBBBBB; } .highlight .go { color: #BBBBBB; } .highlight .nf, .highlight .fm { color: #a8e1fe; } .highlight .py { color: #a8e1fe; } .highlight .na { color: #a8e1fe; } .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { color: #a8e1fe; font-weight: bold; } </style> <style media="print"> * { -webkit-transition:none!important; transition:none!important; } .highlight table td { padding: 5px; } .highlight table pre { margin: 0; } .highlight, .highlight .w { color: #586e75; } .highlight .err { color: #002b36; background-color: #dc322f; } .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs { color: #657b83; } .highlight .cp { color: #b58900; } .highlight .nt { color: #b58900; } .highlight .o, .highlight .ow { color: #93a1a1; } .highlight .p, .highlight .pi { color: #93a1a1; } .highlight .gi { color: #859900; } .highlight .gd { color: #dc322f; } .highlight .gh { color: #268bd2; background-color: #002b36; font-weight: bold; } .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv { color: #6c71c4; } .highlight .kc { color: #cb4b16; } .highlight .kt { color: #cb4b16; } .highlight .kd { color: #cb4b16; } .highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 { color: #859900; } .highlight .sa { color: #6c71c4; } .highlight .sr { color: #2aa198; } .highlight .si { color: #d33682; } .highlight .se { color: #d33682; } .highlight .nn { color: #b58900; } .highlight .nc { color: #b58900; } .highlight .no { color: #b58900; } .highlight .na { color: #268bd2; } .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { color: #859900; } .highlight .ss { color: #859900; } </style> <link href="../../stylesheets/screen-5f167ecf.css" rel="stylesheet" media="screen" /> <link href="../../stylesheets/print-5102ba7f.css" rel="stylesheet" media="print" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://payload.co/Payload.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js" integrity="sha256-bQmrZe4yPnQrLTY+1gYylfNMBuGfnT/HKsCGX+9Xuqo=" crossorigin="anonymous"></script> <script src="https://cdn.lr-ingest.io/LogRocket.min.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/02d3253cfb.js" crossorigin="anonymous"></script> <script>window.LogRocket && window.LogRocket.init('fwclzl/payload');</script> <script type="text/javascript"> (function(f,b){if(!b.__SV){var e,g,i,h;window.mixpanel=b;b._i=[];b.init=function(e,f,c){function g(a,d){var b=d.split(".");2==b.length&&(a=a[b[0]],d=b[1]);a[d]=function(){a.push([d].concat(Array.prototype.slice.call(arguments,0)))}}var a=b;"undefined"!==typeof c?a=b[c]=[]:c="mixpanel";a.people=a.people||[];a.toString=function(a){var d="mixpanel";"mixpanel"!==c&&(d+="."+c);a||(d+=" (stub)");return d};a.people.toString=function(){return a.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" "); for(h=0;h<i.length;h++)g(a,i[h]);var j="set set_once union unset remove delete".split(" ");a.get_group=function(){function b(c){d[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));a.push([e,call2])}}for(var d={},e=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<j.length;c++)b(j[c]);return d};b._i.push([e,f,c])};b.__SV=1.2;e=f.createElement("script");e.type="text/javascript";e.async=!0;e.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL? MIXPANEL_CUSTOM_LIB_URL:"file:"===f.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";g=f.getElementsByTagName("script")[0];g.parentNode.insertBefore(e,g)}})(document,window.mixpanel||[]); // Enabling the debug mode flag is useful during implementation, // but it's recommended you remove it for production mixpanel.init('baef5aff4d6f5aac3bb7b3544fa0b207', {debug: true}); </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-LRCS3HEL6S"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-LRCS3HEL6S'); </script> <meta name="tutorial-type" content=""> <script src="../../javascripts/all-ec9eaf79.js"></script> <script> $(function() { setupLanguages(["shell"]); }); </script> <script> $(function() { mixpanel.track('Page View: /ui/mobile-wallets'); }); </script> </head> <body class="ui ui_mobile-wallets ui_mobile-wallets_index" data-languages="["shell"]"> <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark shadow"> <a class="navbar-brand" href="#"> <div class="logo"></div> </a> <div class="d-flex"> <div class="search d-lg-none mr-2"> <input autocomplete="off" type="text" class="form-control my-2 my-sm-0 search bg-dark" id="input-search" placeholder="Search"> <div style="display:none" class="search-results shadow"> <ul class="list-group"> </ul> </div> </div> <button class="navbar-toggler" style="margin: .4rem 0" type="button"> <span class="navbar-toggler-icon"></span> </button> </div> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item "> <a class="nav-link" href="/">Overview</a> </li> <li class="nav-item dropdown "> <a class="nav-link dropdown-toggle" href="/apis" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> APIs </a> <div class="dropdown-menu fade-down shadow border-0" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="/apis"><i class="fad fa-play-circle"></i> Get Started</a> <a class="dropdown-item" href="/apis/authentication"><i class="fad fa-key"></i> Authentication</a> <a class="dropdown-item" href="/apis/payments"><i class="fad fa-money-check-alt"></i> Payments</a> <a class="dropdown-item" href="/apis/payouts"><i class="fad fa-money-check-edit-alt"></i> Payouts</a> <a class="dropdown-item" href="/apis/invoices"><i class="fad fa-file-invoice-dollar"></i> Billing & Invoicing</a> <a class="dropdown-item" href="/apis/processing-accounts"><i class="fad fa-university"></i> Processing Accounts</a> <a class="dropdown-item" href="/apis/customers"><i class="fad fa-user"></i> Customers</a> <a class="dropdown-item" href="/apis/webhooks"><i class="fad fa-bells"></i> Webhooks</a> <a class="dropdown-item" href="/apis/reports-and-analytics"><i class="fad fa-file-chart-line"></i> Reporting & Analytics</a> <a class="dropdown-item" href="/apis/object-reference/billing-charges"><i class="fad fa-book-open"></i> API Reference</a> <a class="dropdown-item" href="/apis/api-design"><i class="fad fa-brackets-curly"></i> API Design</a> </div> </li> <li class="nav-item dropdown active"> <a class="nav-link dropdown-toggle" href="/ui" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> UI Elements </a> <div class="dropdown-menu fade-down shadow border-0" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="/ui"><i class="fad fa-play-circle"></i> Get Started</a> <a class="dropdown-item" href="/ui/authentication"><i class="fad fa-key"></i> Authentication</a> <a class="dropdown-item" href="/ui/payloadjs"><i class="fab fa-js-square"></i> Payload.js</a> <a class="dropdown-item" href="/ui/mobile-sdks/"><i class="fad fa-mobile"></i> Android & iOS SDK</a> <a class="dropdown-item" href="/ui/processing-account-form"><i class="fad fa-shield-check"></i> Processing Account Form</a> <a class="dropdown-item" href="/ui/oauth-connect"><i class="fad fa-key"></i> OAuth Connect</a> <a class="dropdown-item" href="/ui/checkout"><i class="fad fa-shopping-cart"></i> Checkout</a> <a class="dropdown-item" href="/ui/secure-input"><i class="fad fa-i-cursor"></i> Secure Input</a> <a class="dropdown-item" href="/ui/payment-links"><i class="fad fa-link"></i> Payment Links</a> <a class="dropdown-item" href="/ui/plaid"><i class="fad fa-university"></i> Plaid</a> <a class="dropdown-item" href="/ui/mobile-wallets"><i class="fad fa-wallet"></i> Google & Apple Pay</a> </div> </li> <li class="nav-item dropdown "> <a class="nav-link dropdown-toggle" href="/back-end-sdks" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Back-end SDKs </a> <div class="dropdown-menu fade-down shadow border-0" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="/back-end-sdks"><i class="fad fa-play-circle"></i> Get Started</a> <a class="dropdown-item" href="/back-end-sdks/python"><i class="fab fa-python"></i> Python</a> <a class="dropdown-item" href="/back-end-sdks/node"><i class="fab fa-node-js"></i> Node.js</a> <a class="dropdown-item" href="/back-end-sdks/php"><i class="fab fa-php"></i> PHP</a> <a class="dropdown-item" href="/back-end-sdks/csharp"><i class="fac fa-dotnet"></i> C#</a> <a class="dropdown-item" href="/back-end-sdks/ruby"><i class="fas fa-gem"></i> Ruby</a> <a class="dropdown-item" href="/back-end-sdks/java"><i class="fab fa-java"></i> Java</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <div class="search"> <input autocomplete="off" type="text" class="form-control my-2 my-sm-0 search bg-dark" id="input-search" placeholder="Search"> <div style="display:none" class="search-results shadow"> <ul class="list-group"> </ul> </div> </div> </form> </div> </nav> <div class="toc-wrapper"> <div class="nav dropdown"> <button class="btn dropdown-toggle w-100 rounded-0" data-toggle="dropdown"> UI Elements </button> <div class="dropdown-menu fade-down shadow border-0" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="/">Overview</a> <a class="dropdown-item" href="/apis">APIs</a> <a class="dropdown-item" href="/ui">UI Elements</a> <a class="dropdown-item" href="/back-end-sdks">Back-end SDKs</a> </div> </div> <div class="nav-wrapper"> <ul id="toc" class="toc-list-h1"> <div class="item"> <li> <a href="/ui" class="toc-h1 main-link toc-link "> Get Started </a> </li> <div class="subset"> </div> </div> <div class="item"> <li> <a href="/ui/authentication" class="toc-h1 main-link toc-link "> Authentication </a> </li> <div class="subset"> </div> </div> <div class="section-title px-3 mt-4 title text-uppercase"><i class="fad fa-cube"></i> Libraries</div> <div class="item"> <li> <a href="/ui/payloadjs" class="toc-h1 main-link toc-link "> Payload.js </a> </li> <div class="subset"> </div> </div> <div class="item"> <li> <a href="/ui/payload-react" class="toc-h1 main-link toc-link "> Payload React </a> </li> <div class="subset"> </div> </div> <div class="item"> <li> <a href="/ui/mobile-sdks/" class="toc-h1 main-link toc-link "> iOS & Android SDK </a> <div class="collapse-toggle"> <div class="collapse-icon collapsed"> <span class="open"> <i class="far fa-plus"></i> </span> <span class="closed"> <i class="far fa-minus"></i> </span> </div> </div> </li> <div class="subset"> <li> <a href="/ui/mobile-sdks/" class="toc-h1 toc-link" data-title="Features">Features</a> </li> <li> <a href="/ui/mobile-sdks/installation" class="toc-h1 toc-link" data-title="Installation">Installation</a> </li> <li> <a href="/ui/mobile-sdks/make-request" class="toc-h1 toc-link" data-title="Making API requests">Making API requests</a> </li> </div> </div> <div class="section-title px-3 mt-4 title text-uppercase"><i class="fad fa-shield-check"></i> Processing Account Form</div> <div class="item"> <li> <a href="/ui/processing-account-form" class="toc-h1 main-link toc-link "> Overview </a> </li> <div class="subset"> </div> </div> <div class="item"> <li> <a href="/ui/processing-account-form/integrated-form" class="toc-h1 main-link toc-link "> Integrated Form </a> </li> <div class="subset"> </div> </div> <div class="item"> <li> <a href="/ui/processing-account-form/standalone-link" class="toc-h1 main-link toc-link "> Standalone Link </a> </li> <div class="subset"> </div> </div> <div class="section-title px-3 mt-4 title text-uppercase"><i class="fad fa-key"></i> 3rd Party Authorization</div> <div class="item"> <li> <a href="/ui/oauth-connect" class="toc-h1 main-link toc-link "> OAuth Connect </a> </li> <div class="subset"> </div> </div> <div class="section-title px-3 mt-4 title text-uppercase"><i class="fad fa-shopping-cart"></i> Checkout</div> <div class="item"> <li> <a href="/ui/checkout" class="toc-h1 main-link toc-link "> Overview </a> </li> <div class="subset"> </div> </div> <div class="item"> <li> <a href="/ui/payloadjs/checkout" class="toc-h1 main-link toc-link "> Web </a> <div class="collapse-toggle"> <div class="collapse-icon collapsed"> <span class="open"> <i class="far fa-plus"></i> </span> <span class="closed"> <i class="far fa-minus"></i> </span> </div> </div> </li> <div class="subset"> <li> <a href="/ui/payloadjs/checkout" class="toc-h1 toc-link" data-title="Embedded Plugin">Embedded Plugin</a> </li> <li> <a href="/ui/checkout-page" class="toc-h1 toc-link" data-title="Redirect Page">Redirect Page</a> </li> </div> </div> <div class="item"> <li> <a href="/ui/mobile-sdks/checkout" class="toc-h1 main-link toc-link "> Mobile </a> </li> <div class="subset"> </div> </div> <div class="section-title px-3 mt-4 title text-uppercase"><i class="fad fa-i-cursor"></i> Secure Input</div> <div class="item"> <li> <a href="/ui/secure-input" class="toc-h1 main-link toc-link "> Overview </a> </li> <div class="subset"> </div> </div> <div class="item"> <li> <a href="/ui/payloadjs/secure-input/create-form" class="toc-h1 main-link toc-link "> Web </a> <div class="collapse-toggle"> <div class="collapse-icon collapsed"> <span class="open"> <i class="far fa-plus"></i> </span> <span class="closed"> <i class="far fa-minus"></i> </span> </div> </div> </li> <div class="subset"> <li> <a href="/ui/payloadjs/secure-input/create-form" class="toc-h1 toc-link" data-title="Create a Form">Create a Form</a> </li> <li> <a href="/ui/payloadjs/secure-input/handle-results" class="toc-h1 toc-link" data-title="Handle Results">Handle Results</a> </li> <li> <a href="/ui/payloadjs/secure-input/styling" class="toc-h1 toc-link" data-title="Styling Inputs">Styling Inputs</a> </li> <li> <a href="/ui/payloadjs/secure-input/associate-customer" class="toc-h1 toc-link" data-title="Associate Customer">Associate Customer</a> </li> <li> <a href="/ui/payloadjs/secure-input/options" class="toc-h1 toc-link" data-title="Input Options">Input Options</a> </li> <li> <a href="/ui/payloadjs/secure-input/examples" class="toc-h1 toc-link" data-title="Examples">Examples</a> </li> </div> </div> <div class="item"> <li> <a href="/ui/mobile-sdks/secure-input" class="toc-h1 main-link toc-link "> Mobile </a> </li> <div class="subset"> </div> </div> <div class="section-title px-3 mt-4 title text-uppercase"><i class="fad fa-link"></i> Payment Requests & Pages</div> <div class="item"> <li> <a href="/ui/payment-links/" class="toc-h1 main-link toc-link "> Payment Links </a> <div class="collapse-toggle"> <div class="collapse-icon collapsed"> <span class="open"> <i class="far fa-plus"></i> </span> <span class="closed"> <i class="far fa-minus"></i> </span> </div> </div> </li> <div class="subset"> <li> <a href="/ui/payment-links/" class="toc-h1 toc-link" data-title="Create a Payment Link">Create a Payment Link</a> </li> <li> <a href="/ui/payment-links/send-or-embed" class="toc-h1 toc-link" data-title="Send or Embed">Send or Embed</a> </li> <li> <a href="/ui/payment-links/handle-payment" class="toc-h1 toc-link" data-title="Handle Payment">Handle Payment</a> </li> <li> <a href="/ui/payment-links/checkout-options" class="toc-h1 toc-link" data-title="Checkout Options">Checkout Options</a> </li> </div> </div> <div class="section-title px-3 mt-4 title text-uppercase"><i class="fad fa-university"></i> Bank Account Linking</div> <div class="item"> <li> <a href="/ui/payloadjs/secure-input/bank-account-verify" class="toc-h1 main-link toc-link "> Built-in Verification </a> </li> <div class="subset"> </div> </div> <div class="item"> <li> <a href="/ui/plaid" class="toc-h1 main-link toc-link "> Plaid </a> </li> <div class="subset"> </div> </div> <div class="item"> <li> <a href="/ui/payment-activation" class="toc-h1 main-link toc-link "> Payout Activation Link </a> </li> <div class="subset"> </div> </div> <div class="section-title px-3 mt-4 title text-uppercase"><i class="fad fa-wallet"></i> Google & Apple Pay</div> <div class="item active"> <li> <a href="/ui/mobile-wallets" class="toc-h1 main-link toc-link active"> Overview </a> </li> <div class="subset"> </div> </div> <div class="item"> <li> <a href="/ui/mobile-wallets/activation/apple-pay-activation" class="toc-h1 main-link toc-link "> Activation </a> <div class="collapse-toggle"> <div class="collapse-icon collapsed"> <span class="open"> <i class="far fa-plus"></i> </span> <span class="closed"> <i class="far fa-minus"></i> </span> </div> </div> </li> <div class="subset"> <li> <a href="/ui/mobile-wallets/activation/apple-pay-activation" class="toc-h1 toc-link" data-title="Apple Pay">Apple Pay</a> </li> <li> <a href="/ui/mobile-wallets/activation/google-pay-activation" class="toc-h1 toc-link" data-title="Google Pay">Google Pay</a> </li> </div> </div> <div class="item"> <li> <a href="/ui/payloadjs/apple-pay" class="toc-h1 main-link toc-link "> Web </a> <div class="collapse-toggle"> <div class="collapse-icon collapsed"> <span class="open"> <i class="far fa-plus"></i> </span> <span class="closed"> <i class="far fa-minus"></i> </span> </div> </div> </li> <div class="subset"> <li> <a href="/ui/payloadjs/apple-pay" class="toc-h1 toc-link" data-title="Apple Pay">Apple Pay</a> </li> <li> <a href="/ui/payloadjs/google-pay" class="toc-h1 toc-link" data-title="Google Pay">Google Pay</a> </li> </div> </div> <div class="item"> <li> <a href="/ui/mobile-sdks/google-pay" class="toc-h1 main-link toc-link "> Mobile </a> </li> <div class="subset"> </div> </div> </ul> </div> <ul class="toc-footer"> <li><a href="https://payload.com" data-toggle="tooltip" title="Back to Payload.co"><i class="fad fa-home"></i></a></li> <li><a href="https://github.com/payload-code/" data-toggle="tooltip" title="Github"><i class="fab fa-github"></i></a></li> </ul> </div> <div class="page-wrapper"> <div class="content mb-5"> <h1 id='google-and-apple-pay'>Google and Apple Pay</h1> <hr> <p>Payload offers simple integration options for accepting Google and Apple pay with our UI libraries and SDKs. <span class="row justify-content-left align-items-center pt-3"> <span class="d-inline-block text-left col-2"><img src="https://developers.google.com/pay/api/images/brand-guidelines/google-pay-mark.png"/></span> <span class="d-inline-block text-left col-2"><img src="../../images/applepay-f29daab6.svg"/></span> </span></p> <p>Integrating Google & Apple Pay for the web or mobile is simple using Payload.js and our mobile SDKs. Follow this guide to learn how to integrate and activate Google & Apple Pay for your Payload account.</p> <h2 id='get-started'>Get Started</h2> <aside class="notice"> <b>Note</b> If you're looking for Google Pay and Apple Pay support for in-store or in-person payments using our NFC card reader support, please see the <a href="/ui/card-readers">Card Readers</a> section for further information. </aside> <p>To get started the first step is to activate Google Pay & Apple Pay using their specific activation methods to enable web payments. See <a href="/ui/mobile-wallets/activation/apple-pay-activation">Activation</a> for further information.</p> <h2 id='live-preview'>Live preview</h2> <p>For a live preview using Payload.js, see the demo below. <strong>Please note</strong>, Apple Pay will only be available if you load the demo from Safari on an iOS device.</p> <p><span class="row pt-4"> <span class="col text-left"> <a class="btn btn-primary btn-lg" href="https://payload-code.github.io/google-apple-pay-demo.html" target="_blank"><i class="mdi mdi-open-in-new"></i> View a Demo</a> </span> </span></p> </div> <div class="content-footer border-top mb-5"> <div class="pt-3 px-0 text-right row mx-0 justify-content-end"> <div class='btn-group mr-3'> <button type="button" class="btn text-muted btn-arrow-right border" style="background:#e4ebf1;font-weight:500" disabled>Next</button> <a href="/ui/mobile-wallets/activation/apple-pay-activation" class="next-page btn btn-link border pl-4"> Activation - Apple Pay</a> </div> </div> </div> </div> </body> </html>

CINXE.COM

Google & Apple Pay | Payload Docs