Articles

Building Powerful Checkout Experiences with Google Pay (Google I/O’19)


[MUSIC PLAYING] AVNISH MIDUTHURI: Hello. I’m Avnish Miduthuri, and I’m a
Product Manager for Google Pay. JENNY GOVE: And I’m Jenny, and
I’m a User Experience Research Leader Manager for Google Pay. Today we’re going to be
talking about building powerful checkout
experiences with Google Pay. Even though more and more
people are transacting online and the number of online
payments is growing each year, merchants still have trouble
maximizing their conversion rates online. Online checkout is
notoriously problematic, and we know this because
data shows that more than 70% of carts are abandoned
across e-commerce sites. Of course, we want
customers to be able to change their
minds easily when they’re making a purchase. However, we don’t
want cart abandonment due to poor ease of use. Unfortunately, a lot of it
can be attributed to that. A significant amount is
due to usability issues with form fields. So for example, studies
have found that 90% of sites don’t format the
credit card expiration field in exactly the same way
as it is on the physical card itself. And this can lead to all
sorts of errors for users. They get confused. There’s some dropoff
there when that happens. Another issue that has been
found is that 86% of sites don’t clearly mark which
form fields are optional and which are required. And this can lead to users
getting stuck, perhaps sometimes even trying to
complete fields that are not even applicable to them. And that can be another
common point of drop off. While there are many guidelines
for improving form usability– and these are really
important to implement wherever you do have a form– a better way is to choose
a checkout solution that minimizes the form field entries
that are required of users. So what I’ve shown you so far
is data from audits of sites. And these are poor
experiences, and we know that from usability studies. These are really facts
about apps and sites today and their compliance
with best practices. But what about
users’ perceptions? Well, 28% of users
report that they experience checkout
fails that are too long or too complicated. And that’s a reason for why
they abandon their purchase. You can see that
here on the chart. There’s only a couple
of things that people think are worse
than that, and that is some of the shipping
costs being too high, and also being required to
create an account before you check out. However, the issue of too
long and complicated checkout processes is worse for
them than the experiences they feel about having
trust with the credit card on the site, and also
with regards to how they feel about return policies. It’s sometimes the return
policies aren’t satisfactory. So not only does the data show
that checkout processes are problematic for users, but users
are really well aware of it as well. Now through our work
with Google Pay, we intend to mitigate these
problems both for users and for developers. Before we get into some
of the new tools we’ve created to help
solve these problems, we’ll give you a quick
recap of Google Pay and look at some of
the latest highlights. AVNISH MIDUTHURI:
Thank you, Jenny. Our mission with Google Pay is
to enable the billions of users that are signed in to Google to
pay with their Google account wherever they are,
whether that’s online, in apps, in stores, and
of course, when they transact with Google apps and services. Google Pay uses the
payment information that users have already saved
to their Google account, when they set up the
Google Pay app, safeguards to Chrome autofill,
or make purchases on the Play Store, YouTube,
or several other Google properties. And hundreds of
millions of users globally are already enabled
to pay with Google Pay. As a developer,
Google Pay provides you access to all
of these credentials when users shop on your
sites and in your apps. And so by implementing
Google Pay, you can maximize conversion by
reducing friction at checkout and enable your customers to pay
with just a couple of clicks. And here are just a few
of the largest merchants that have done just
that around the world. From Chipotle, eBay,
Multikino, Ryanair, Yandex taxi, many, many more. Thousands of apps and
hundreds of thousands of sites globally now except Google Pay. And our merchants have
seen great results, from the Gilt app that
saw a 10% lift in product view-to-conversion
from Google Pay users over non-Google Pay
users, or Vueling that saw a 17% lift in
conversion after they implemented Google Pay
on their mobile site. And Starbucks has seen
such great adoption of Google Pay in
their mobile app that they’re extending that
acceptance to auto reloads to further enhance their
customer experience. And as Google Pay is
expanded globally, we’ve worked to
customize the app and provide locally relevant
features and experiences. A great example of
this is in India. Google Pay launched
in India with support for UPI, a Unified
Payment Interface that allows for instant
bank-to-bank transfers. Users in India can use Google
Pay to send money to friends, pay their utility bills,
recharge their mobile plans, and of course, pay on their
favorite sites and apps. And we’ve seen tremendous
adoption from users in India, with over 45 million monthly
active users and $81 billion in annualized
transaction volume, and over 2,000 online merchants
that accept Google Pay in India alone, varying across use cases
from food delivery, retail, travel, movie and event tickets,
even trading investments, and well-known merchants like
[INAUDIBLE],, Book My Show, and many, many more. And with simple
hassle-free payments, Google Pay is helping
accelerate the move in India for both users and
merchants from cash to digital. For example, Uber saw that
50% of their Google Pay users in India had previously
transacted with cash. And on Redbus, a popular
online bus ticketing platform, 15% of their transactions
now come from Google Pay. And starting just a few
weeks ago, users in India can now book train tickets
from Indian Railways at no additional cost. Users can search for, buy, and
even cancel their train tickets all from right within the app. So that brings you
up to speed on what we’ve been working on recently. And now we’re going
to talk about what we’re doing to make
Google Pay even better for users and developers. JENNY GOVE: So let’s start
with the user experience and simplifying
payment experiences. We’re adding new
customer-facing features to improve your checkout
in several different ways. We know that providing more
detail and transparency for customers leads to
increased conversion rates for businesses. And with dynamic updates,
the Google Pay sheet can display shipping options
and dynamic plans pricing with a breakdown
that you provide. This allows customers to
confirm all relevant purchase details quickly, leading to
a faster checkout for them. You’ll see this rolling out soon
in leading web implementations by Shopify merchants,
Square, and Stripe. And a little later
in this talk, Avnish will walk you through how
you can add dynamic updates with Google Play to your site. In addition to
speeding up checkout, we’re working on a feature
that quite literally provides monetary value to
your customers. We’re doing this by
displaying saved offers or enabling users to
enter a promotion code and seamlessly applying them
when users pay by Google Pay. We’re looking to
test this feature across desktop and across
mobile in the coming months. And if you’d like to learn
more, please reach out via the support link here
from our developer site. Now let’s take a look at
ways to raise conversions. So we know that simpler
checkout experiences make it more likely
that users will convert, and this can be achieved
using Google Pay. And to make checkout
even simpler, we’re offering new
payment button options. These are customized for
your sites and your users, and they’re aimed at driving
higher sales for you. For instance, rather
than using static assets, web developers can use
the create button API. This enables a dynamic
purchase button that uses the right styling
and the right colors and is localized to your
user’s device or their browser settings, as you can see here. And in addition to that,
we’ve been experimenting with personalized buttons that
display important information to users before they
enter the checkout flow. So for instance, we can
show users exactly what card they’ll be paying with. So you can see that on
the left-hand screen in a moment coming up. So you can see it here, they
can see exactly what form of payment they’re paying with. Or as on the right-hand
side, we might be able to push messages to
them, like they need to sign in or to sign up to Google Pay. And all this information can be
displayed right on the button. And as the button is hosted
and rendered by Google Pay, all of this will happen
without you, the developer, having to make any changes. AVNISH MIDUTHURI: So now let’s
talk about new places and ways that merchants can
accept Google Pay. In India, we’re looking
to connect merchants and developers to
build experiences that bridge across
offline and online, as well as across online
platforms like desktop and mobile. The Google Play
omnichannel API allows users to authenticate
payments in the Google Pay app that are triggered by
entering codes elsewhere. Let’s walk through an example
of how this works on the Book My Show site, which is a popular
movie ticketing site in India. A user starts on the desktop
site, selects Google Pay, and enters their phone number. This then triggers
a notification to the user’s Google
Pay app on their device. Only users can click
into that notification, approve the payment,
and see the confirmation right in the Google Play
app, as well as the surface that they’re transacting on. In addition to
more places to pay, we’re also enabling
additional payment methods to allow more users to pay
with Google Pay on your sites and apps. So for example, users are now
able to use Google Pay to pay with their PayPal account easily
without any additional logins or passwords if they’re
signed into Google. For merchants, this
interoperability allows access to the
millions of users that have already stored
their PayPal credentials in their Google account. And this feature is live across
merchants in the US and Germany and will be rolling out to
more countries later this year. As you can see an example
here on the FlixBus app, which is a popular app to buy
bus tickets across Europe. And users can just select
their PayPal account if they have it in
their Google Pay and pay without any
additional friction. And as we add payment
methods, we’re making it really
easy for developers to accept these methods
via standardized interface. So for example, you can already
accept cards and now PayPal. And coming soon,
UPI payments will be available via the
same unified API. So what that means is
with a single integration, Indian merchants will
be able to accept Google Pay for their users
wherever they operate, and global merchants
can accept UPI payments for their Indian users. So we’ve talked about some
of the new features we’ve enabled with Google
Pay, as well as some of those that we’re
working on enabling soon, as well as some of
the steps we’ve taken to simplify the integration. Now I’m going to talk about
one of the features that Jenny mentioned earlier–
dynamic updates– and show you how you
can add dynamic updates to your checkout
flow with Google Pay. So to start with, you’ll
need Google Pay on your site. And if you don’t
already have Google Pay, you can check out
our developer docs to learn how you can do that. But just to recap, here
are some of the steps you take to enable Google Pay. Load pay.js, which is our
Google Pay JavaScript library. Call isReadytoPay. That’s an API that you
can use to determine how and when to show Google Pay. Then if you use a
purchase button, we recommend using
the create button API that Jenny talked about to
display the right Google Pay purchase button that’s
customized to your preferences, as well as to the
user’s settings. Finally, when you’re ready to
accept payment from the user, call loadPaymentData to
present the Google Pay sheet. Now that you added Google
Pay to your site, let’s talk about how you can
enable dynamic updates. You can do so in
three easy steps. First, provide price
and shipping info in your payment data request. Second, specify a callback
function and the callback intents you’d like to listen
to that affect your checkout. Finally, update your
payment data request based on what the user selects
on the Google Pay sheet. So in today’s
example, I’ll show you how the callback
function is triggered when a user selects a shipping
option on the Google Pay sheet. Let’s walk through each of
those steps in a little bit more detail. You can provide price in
the transaction info object that already exists today. What you can also do now
is to present display items to the user that gives
the user more information and allow them to confirm their
purchase right on the Google Pay sheet. So for example, you can provide
subtotal, shipping, taxes, and discounts. And if you require shipping
and enable multiple shipping options, you can set these with
the shipping option parameters. Again, with shipping
options, we’d recommend using labels to
display the price to users, as well as a
descriptive information to let users know, for example,
when items will be delivered for each shipping
option so they can make an appropriate selection. Next, provide a
callback function when you construct
the Google Pay client. Determine the updates
you’d want to listen to, and also specify those
in the callback intents. So again, we’re showing
shipping option here. Then, when that’s done, you
can call loadPaymentData to present the Google Pay
sheet and allow the user to select their payment
and shipping information. Finally, when the
user makes selections, you’ll receive a callback on the
callback function you specify. And you should handle these and
update the payment data request appropriately. So you can see
here, for example, the callback function is updated
based on the user selected shipping options. The total price now
reflects the price with the user-selected
shipping option, as well as new display items
that can be shown to the user if those have changed. And that’s it. I’m going to show a quick demo
of how that looks on my Pixel. Can we switch to demo, please? So I’m heading to New York this
weekend for a developer event next week, and I’d like to
buy some Google swag here, so I’m going to go to the
Google Play Store site here. And let’s like this sweatshirt. I’m going to click to
buy with Google Pay. So you can see my payment
information displayed, as well as shipping addresses. It’s already got our Google
New York office selected as the shipping address. And for shipping options,
the $10 standard shipping, that only gets there
in five business days, which will be too late. I could pick $20 for shipping. That sounds pricey. Let me see if I can
actually have this shipped to me right here
in Mountain View and pick it up before I leave. When I selected the
Mountain View address, you notice that there’s a free
shipping and California option that didn’t apply earlier. The price updated
to $22.15, and I can click in and see the
details for the transaction, so I can confirm that
shipping is, indeed, free. And now I’m ready to pay. So I’ll just click to pay. Payment information and shipping
is sent to the merchant, and the order is confirmed. And that’s it. Dynamic updates are available
for web developers in our test environment starting today. So we encourage you to
check out our documentation or stop by our code labs at
IO right here to test it out. JENNY GOVE: Thanks, Avnish. So next, we’re going to talk
about how you can easily accept Google Pay on
your site or in your app. If you build your
own site or app, we’ve made it really simple
for you to add Google Pay. Google Pay users a
JSON request format to make it very simple
for you to accept Google Pay consistently with the
same request across Android, the web, as well as other
Google services like Actions on Google. Google Pay works with
your existing processor and can be integrated with
just a few lines of code. We’ve expanded our list of
supported payment processors to over 60 processors globally. You can reach out to any
of our processor partners, and they’re prepared to
walk you through anything you need for easy
integration with Google Pay. Next, if you’re a merchant that
uses hosted checkout platforms, we’ve also worked to make Google
Pay broadly available and easy to add for all merchants,
including those that don’t build their own sites. For example, if you’re a
BigCommerce merchant processing with PayPay or with Stripe,
you can now easily enable Google Pay for your customers. Google Pay is available
on several commerce and hosted checkout
platforms globally, including Shopify, Square,
PayU, and TPAY, and many more. And if you’re a
commerce platform that offers hosted solutions, do
contact us via our developer site, and then you can
find out how you can easily onboard all your
merchants and provide your merchants with a
better checkout experience. Now that we’ve talked about the
new features and improvements we’re making to
Google Pay, we’re going to walk you through
some of the guidelines to ensure that you can make
the most of what Google Pay has to offer. These will help you create
checkout experiences that increase the likelihood
that your customers are successful and satisfied
from start to finish. Google Pay enables customers to
share their payment information in a single click. So Google Pay can help
you onboard new users without them having to manually
enter all that information. For example, here and
in the DoorDash app, Google Pay is
enabled as a default to help new DoorDash users get
through to check out quickly. And new Starbucks users
who have Google Pay can quickly top up
their rewards cards without having to go through
a payment method setup flow. Now, requiring account
creation before users have gone through the checkout
flow slows down the purchase and can lead to abandoned carts. I think we saw in that graph
at the beginning on users’ perceptions that users
don’t like that at all. No one wants it. So use Google Pay for a faster
guest checkout experience. And then you can
recommend to your users to create an account
after they’ve come and fulfilled
the tasks that they came to your site or app for. In the Macy’s
checkout process here, you can see guest
check out on the left here, and then the option to
create an account after they’ve gone through checkout
on the right-hand side. Now, it’s important
to include and present all the relevant transaction
details for the user before they take that
final action to purchase. And studies have shown that
a significant number of users abandon the purchase
because they can’t see that total cost up front. I’m sure that we’ve all done
that at one point or another. With Google Pay, you
can use dynamic updates, as we talked about earlier,
to show an updated price based on the shipping selections. And that’s directly
within the payment sheet. And so your users then can check
out quickly and confidently. And it is important to the user
that their specific payment methods, such as a
specific credit card that is being used with Google Pay,
is clearly visible to them, so that they can be sure
about that form of payment they’re using. So we recommend also
displaying Google Pay alongside that payment method
used by the customer right throughout the
checkout process– including on the
confirmation screens, as you can see here,
and also on receipts. This gives users
the full context when they see the confirmation
screen, or perhaps a receipt in email, and
that consistency continues to build their user trust. Now, if you sell tickets or
passes, you can use Google Pay and our passes API
together to provide a delightful post-purchase
experience for your users. So here you see Ryanair. They’ve enabled Google Pay as
a payment method in their app, and then once users have
purchased their ticket, they can save it to their app. They can save their boarding
pass to have it ready there and then for when they’re
going to board their flight. And with Google
Pay, you can also enable quick
single-item purchases right from the product
pages themselves, as Etam have done here. This enables even
quicker purchasing so your customers don’t have to
add their items to their cart before going through
the checkout process. They can just purchase directly. So implementing
these practices can help you make better
experiences for your users, enabling them to
check out quickly and easily every single time. So that wraps up the content
of our presentation today. If you want to know
more, then please just visit these links here. The first provides
guidelines on implementation, and the second is access
to our brand assets. So we’ve shared a lot of
details with you today, and we’re excited to see
how you take them to create your own delightful
purchase experiences, whether that’s adding
dynamic updates or enabling purchases directly
from your product pages. AVNISH MIDUTHURI: And
today I’m happy to announce Google Pay Developers Live,
our marquee developer event, dedicated to Google Pay. And this will be happening
later this year in London and will be
livestreamed globally. So please save the date and
sign up at the link shown here to get updates on the event. JENNY GOVE: And if you’re
interested in learning more about saving tickets or
other passes to Google Pay after purchase, be sure
to check out [INAUDIBLE] and Jose’s session,
“Engaging customers beyond payments: Tickets,
transit, and boarding passes.” And that’s on Thursday at
2:30, right here on stage 7. AVNISH MIDUTHURI: And
while you’re here at IO, you can meet our team anytime
at the payment sandbox. And if you’d like to continue
the conversation today, come join us at our
developer meetup. That’s happening in
the community lounge starting at 4:20, and it’s
on the porch of stage 1. JENNY GOVE: And so
that just leaves me to say thank you all
so much for joining us, and we hope to see you soon. AVNISH MIDUTHURI: Thank you. [MUSIC PLAYING]

Leave a Reply

Your email address will not be published. Required fields are marked *