Video and slides synchronized, mp3 and slide download available at URL https://bit.ly/2GNLI3K. Michel Weksler talks about the Payment Request API family of World Wide Web Consortium (W3C) standards and how they can be used to streamline checkout across the web. Filmed at qconsf.com. Michel Weksler has been writing code for over 30 years, working at both startups and large companies. He worked for PayPal, for several startups, worked on the NFC Wallet project at Google, and has been an engineer on the Airbnb payments team for the last 3 years. Aside from payments, his technical passions include code quality, engineering best practices, and web standards.

1. Streamlining Online Checkout
Using Web Standards
Alex Liu & Michel Weksler / November 2017

2. InfoQ.com: News & Community Site
• Over 1,000,000 software developers, architects and CTOs read the site world-
wide every month
• 250,000 senior developers subscribe to our weekly newsletter
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• 2 dedicated podcast channels: The InfoQ Podcast, with a focus on
Architecture and The Engineering Culture Podcast, with a focus on building
• 96 deep dives on innovative topics packed as downloadable emags and
minibooks
• Over 40 new content items per week
Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
payment-request-api-w3c

3. Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide
Presented at QCon San Francisco
www.qconsf.com

4. Why are checkouts not easy nor fast?

9. Why not easy nor
fast?
Support different:
● networks
● payment methods
● billing address formats
● shipping address formats

10. Agenda
1. What?
2. Why?
3. Demo
4. Technical Details

11. Payment Request API

12. W3C
A standard to allow merchants to utilize
payment methods with minimal integration

15. Why Payment Request API?

16. Airbnb Payments
● An escrow service
● Moving billions of dollars per year
● 25 integrations, 191 countries, 75
currencies
● Ecosystems of all maturity levels

17. Why Payment
Request API?
● Mobile is 21% of e-commerce
payments
● 66% of mobile purchases made on
web rather than native apps
● At airbnb, conversion rate on
mobile much lower than desktop

18. Google Developer Blog
“makes checkout flows easier, faster and
consistent”

19. 1. Easier

20. 1. Easier
2. Faster

21. 1. Easier
2. Faster
3. Consistent

22. Payment Request
at Airbnb
● Users can use their existing wallets
● Preferred payment methods
● Avoid custom billing form
presentation
● Common infrastructure: CVV, billing
address, shipping address

23. Demo

24. Demo

25. Demo

26. Google Developer Blog
“makes checkout flows easier, faster and
consistent”

28. PaymentRequest
new PaymentRequest(
methodData,
details,
options
).show();

29. methodData
new PaymentRequest(
methodData,
details,
options
).show();

30. methodData
.methods
const methods = [
'basic-card',
'https://android.com/pay',
'https://apple.com/apple-pay',
];

31. methodData
.networks
const networks = [
'mastercard',
'visa',
'discover',
'amex'
];

32. methodData
.types
const types = [
'credit',
'debit',
];

33. methodData
const methodData = [
{
supportedMethods: methods,
data: {
supportedNetworks: networks,
supportedTypes: types,
},
}
]

34. details
new PaymentRequest(
methodData,
details,
options
).show();

35. details
const details = {
id: "HM2AJDX29P1",
displayItems: [{
label: "1 x $55 per night",
amount: { currency: "USD", value: "55.00" },
}, {
label: "Occupancy Tax",
amount: { currency: "USD", value: "5.00" },
}],
total: {
label: "Total due",
amount: { currency: "USD", value: "60.00" },
},
};

36. options
new PaymentRequest(
methodData,
details,
options
).show();

37. options
const options = {
requestPayerEmail: false,
requestPayerName: true,
requestPayerPhone: false,
requestShipping: true,
}

38. PaymentRequest
new PaymentRequest(
methodData,
details,
options
);

39. PaymentRequest
new PaymentRequest(
methodData,
details,
options
).show();

41. Questions?

42. Watch the video with slide
synchronization on InfoQ.com!
https://www.infoq.com/presentations/
payment-request-api-w3c