Facilitating payments on the web (Chrome Dev Summit 2019)

Chrome for Developers · Beginner ·🔧 Backend Engineering ·6y ago
Skills: API Design70%

Key Takeaways

Explains payment primitives on the web, including Autofill, Google Pay, and Payment Handler APIs

Full Transcript

there are many ways to add support for payments on your website but which one is right for you and your customers my name is Sauk and I am a developer advocate with Google pay today I want to provide some guidance on how you as developers can enhance the online checkout experience for your customers specifically I'll walk you through how to make payments simple and more secure with autofill and Google pay in many cases people make online purchases with a credit or debit card providing this information is often accompanied with a request for other details lucky uses shipping or billing address autofill simplifies this experience for users by making their payment details readily available during the checkout flow order field does much the work for the user and no additional effort is required by website operators to take advantage of it author I feel works by providing a list of suggested payment and contact details that have been saved to the users browser if the user is signed in to Chrome chrome autofill extends this by asking the user to save these details to their Google account this action makes the users payment and contact details available across any of the chrome enabled devices checkout formed can vary significantly from one website to another to account for this chrome autofill uses heuristics to identify payment and contact detail fields to improve the effectiveness of autofill and to ensure that your users have a great autofill experience make sure your form fields are tagged with their respective attributes for credit card fields and address fields links to autofill resources can be found in the video's description below with Google pay you can make checkout even easier for customers by eliminating payment and shipping forms altogether Google pay provides users with a simple and secure method for entering their payment and shipping information on websites plus it works across all modern browsers hundreds of millions of Google users already have their payment details saved to Google pay that means purchases are just a click away they don't even need to enter a CVC in addition to accepting credit card and debit card payments Google pay offers additional payment methods like PayPal once configured using PayPal as a payment method with Google pay no longer requires that you to re-enter their PayPal password when making a payment the security and privacy of user data is paramount to Google and this is no different when it comes to payment data in Google pay payment credentials are encrypted for secure payment processing integrating the Google pay button into your website is easy and testing it out requires very little effort first include the Google page of script file check if the user is ready to pay add the Google pay button request payment data and finally extract the payment token for processing a detailed step-by-step guide is available as a codelab linked in the description below to speed up and simplify the purchasing experience for your customers I have the Google pay button to your checkout flow Shopping Cart and product pages Google pay is always making improvements for both our merchants and users so keep an eye out for new features like promo codes and offers we've also been experimenting with enhancements to the Google pay button and early results have shown increased usage rates amongst users if you are interested in early access to these new features please let us know by following the link in the description below what about the payment request API the payment request API is a w3c standard that helps users share their payment and contact details with websites using web or native payment apps like Google Play if you are a payment app provider we encourage you to explore the payment request API as a way to offer your users and enhance experience on Chrome browsers payment app creators can use the web payment standard to deliver a better user experience the Google page ova script library leverages the payment request API to provide a native experience on Chrome for Android with a native experience rolling out soon on Chrome for desktop at the moment the payment request API is not consistently supported across all browsers and requires developers to include browser specific logic therefore to accept Google pay we recommend that developers integrate with the Google page out script library directly Google pay can simplify your customers purchasing experience by eliminating the need to interact with a payment form completely in addition it provides a simple browser agnostic API for developers a simple and secure payment experience for users on both mobile and desktop support for additional forms of payment and in future access to features like promo codes and offers when used together water fill and Google pay can help to make payments simple and secure thanks for watching and see you next time [Music]

Original Description

Google offers a number of solutions to help developers safely and securely process transactions on the web. This talk gives an overview of the payment primitives offered for the web (Autofill, Google Pay, Payment Handler APIs) along with guidance on how to decide between the options. We will also give developers a view into new capabilities for each payment offering. This video describes how Google Chrome Autofill, Google Pay and the Payment Request API can help facilitate payments on your website. Presented by: Soc Sieng Google Pay for Web: Access Google Pay Business Console to get your Merchant ID → https://goo.gle/2KYRrDx Overview → https://goo.gle/34bl3Wa Codelab → https://goo.gle/3471s9O Autofill: Help users checkout faster with Autofill → https://goo.gle/33byAM6 Autofill attributes → https://goo.gle/2qznCmu #ChromeDevSummit All Sessions → https://goo.gle/CDS19 Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs Event photos →  https://goo.gle/CDS19Photos event: Chrome Dev Summit 2019; re_ty: Publish; product: Chrome - General; fullname: Soc Sieng;
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Chrome for Developers · Chrome for Developers · 0 of 60

← Previous Next →
1 Polymer Performance Patterns (The Polymer Summit 2015)
Polymer Performance Patterns (The Polymer Summit 2015)
Chrome for Developers
2 Polymer Power Tools (The Polymer Summit 2015)
Polymer Power Tools (The Polymer Summit 2015)
Chrome for Developers
3 Chrome Dev Summit 2014 – Chrome Case Studies
Chrome Dev Summit 2014 – Chrome Case Studies
Chrome for Developers
4 Web Directions Code 2015 round up
Web Directions Code 2015 round up
Chrome for Developers
5 Maintainable Code - HTTP203
Maintainable Code - HTTP203
Chrome for Developers
6 iron-ajax… wat?! -- Polycasts #26
iron-ajax… wat?! -- Polycasts #26
Chrome for Developers
7 The Guardian - Supercharged
The Guardian - Supercharged
Chrome for Developers
8 ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
ES2015 (next version of JavaScript), Totally Tooling Tips (S2 Ep1)
Chrome for Developers
9 #AskPolymer: Rob answers all the questions ever -- Polycasts #27
#AskPolymer: Rob answers all the questions ever -- Polycasts #27
Chrome for Developers
10 The Future of JavaScript - HTTP203
The Future of JavaScript - HTTP203
Chrome for Developers
11 Data Binding 101 -- Polycasts #28
Data Binding 101 -- Polycasts #28
Chrome for Developers
12 The Guardian part 2 - Supercharged
The Guardian part 2 - Supercharged
Chrome for Developers
13 The Future of Web Audio: with Chris Wilson and Chris Lowis
The Future of Web Audio: with Chris Wilson and Chris Lowis
Chrome for Developers
14 Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome 46: New motion-path animations, client hints and service worker improvements
Chrome for Developers
15 Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Sublime Snippets, Totally Tooling Tips (S2 Ep2)
Chrome for Developers
16 #AskPolymer: How do you make the show? -- Polycasts #29
#AskPolymer: How do you make the show? -- Polycasts #29
Chrome for Developers
17 Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Critical Path CSS, Totally Tooling Tips (S2 Mini Tip #1)
Chrome for Developers
18 Binding to Objects -- Polycasts #30
Binding to Objects -- Polycasts #30
Chrome for Developers
19 Player FM - Supercharged
Player FM - Supercharged
Chrome for Developers
20 Where’s the Designer? #AskPolymer -- Polycasts #31
Where’s the Designer? #AskPolymer -- Polycasts #31
Chrome for Developers
21 Jake Beats Wikipedia - HTTP203
Jake Beats Wikipedia - HTTP203
Chrome for Developers
22 Supercharged Observers! -- Polycasts #32
Supercharged Observers! -- Polycasts #32
Chrome for Developers
23 Jai's Web blog - Supercharged
Jai's Web blog - Supercharged
Chrome for Developers
24 Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Windows Command-line Tooling, Totally Tooling Tips (S2, Ep4)
Chrome for Developers
25 What about internationalization? #AskPolymer -- Polycasts #33
What about internationalization? #AskPolymer -- Polycasts #33
Chrome for Developers
26 Developing for Billions (Chrome Dev Summit 2015)
Developing for Billions (Chrome Dev Summit 2015)
Chrome for Developers
27 Google+ Performance Improvement Comparison
Google+ Performance Improvement Comparison
Chrome for Developers
28 Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Deploying HTTPS: The Green Lock and Beyond (Chrome Dev Summit 2015)
Chrome for Developers
29 Progressive Web Apps (Chrome Dev Summit 2015)
Progressive Web Apps (Chrome Dev Summit 2015)
Chrome for Developers
30 Instant Loading with Service Workers (Chrome Dev Summit 2015)
Instant Loading with Service Workers (Chrome Dev Summit 2015)
Chrome for Developers
31 Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Increase Engagement with Web Push Notifications (Chrome Dev Summit 2015)
Chrome for Developers
32 Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Engaging with the Real World: Web Bluetooth and Physical Web (Chrome Dev Summit 2015)
Chrome for Developers
33 Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Asking for Permission: respectful, opinionated UI (Chrome Dev Summit 2015)
Chrome for Developers
34 Polymer - State of the Union (Chrome Dev Summit 2015)
Polymer - State of the Union (Chrome Dev Summit 2015)
Chrome for Developers
35 Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Building Progressive Web Apps with Polymer (Chrome Dev Summit 2015)
Chrome for Developers
36 Introduction to RAIL (Chrome Dev Summit 2015)
Introduction to RAIL (Chrome Dev Summit 2015)
Chrome for Developers
37 DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
DevTools in 2015: Authoring to the max (Chrome Dev Summit 2015)
Chrome for Developers
38 RAIL in the real world (Chrome Dev Summit 2015)
RAIL in the real world (Chrome Dev Summit 2015)
Chrome for Developers
39 #ChromeDevSummit talks are up - W00T! -- Polycast #34
#ChromeDevSummit talks are up - W00T! -- Polycast #34
Chrome for Developers
40 V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
V8 Performance from the Driver's Seat (Chrome Dev Summit 2015)
Chrome for Developers
41 Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Quantify and improve real-world RAIL (Chrome Dev Summit 2015)
Chrome for Developers
42 Owning your performance: RAIL (Chrome Dev Summit 2015)
Owning your performance: RAIL (Chrome Dev Summit 2015)
Chrome for Developers
43 HTTP/2 101 (Chrome Dev Summit 2015)
HTTP/2 101 (Chrome Dev Summit 2015)
Chrome for Developers
44 Leadership Panel (Chrome Dev Summit 2015)
Leadership Panel (Chrome Dev Summit 2015)
Chrome for Developers
45 Build Processes, Totally Tooling Tips (S2, Ep 5)
Build Processes, Totally Tooling Tips (S2, Ep 5)
Chrome for Developers
46 Accessibility (Chrome Dev Summit 2015)
Accessibility (Chrome Dev Summit 2015)
Chrome for Developers
47 Binding to Arrays -- Polycasts #35
Binding to Arrays -- Polycasts #35
Chrome for Developers
48 HTTP2 - HTTP203
HTTP2 - HTTP203
Chrome for Developers
49 Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome 47: Splash Screens, requestIdleCallback and better desktop notifications (New in Chrome)
Chrome for Developers
50 Call For Submissions - Supercharged
Call For Submissions - Supercharged
Chrome for Developers
51 Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Cross Device Testing, Totally Tooling Tips (S2 Ep6)
Chrome for Developers
52 Testing AJAX with Web Component Tester -- Polycasts #37
Testing AJAX with Web Component Tester -- Polycasts #37
Chrome for Developers
53 Slack: Extended Xmas Special - Supercharged
Slack: Extended Xmas Special - Supercharged
Chrome for Developers
54 Browser testing with Travis & Sauce Labs -- Polycasts #38
Browser testing with Travis & Sauce Labs -- Polycasts #38
Chrome for Developers
55 Optimize for production with Vulcanize -- Polycasts #39
Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
56 Highlights from Chrome Dev Summit 2015
Highlights from Chrome Dev Summit 2015
Chrome for Developers
57 Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome 48: Custom buttons in notifications, DevTools Security panel, and Presentation mode
Chrome for Developers
58 Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Crisper: Protecting your Polymer app with CSP -- Polycasts #40
Chrome for Developers
59 How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
How do I use Sass with Polymer? #AskPolymer -- Polycasts #41
Chrome for Developers
60 Colors – DevTools Tonight #0 (Pilot)
Colors – DevTools Tonight #0 (Pilot)
Chrome for Developers

Related Reads

Up next
/dev/push: An Open Vercel Alternative to Ship Your Apps Quickly
Ian Wootten
Watch →