I'm presenting how to consume Payment Request API. I'm also explaining how to implement a high order component in React so to encapsulate business logic in a composable way.

1. Payment Request API
with a React high order component
@marcolanaro86marcolanaro

2. Question 1
How many people actually enjoy the process of buying
something on the web using their mobile device?

3. Question 2
How many people can remember all the details from their
credit card without having to take it out?

4. Question 3
How many people like giving their raw credit card numbers
over to random websites?

5. Web Desktop vs Mobile
Traffic
Conversion
60%
5%
40%
15%
MobileDesktop

6. Mobile Native vs Web
Step conversion
results -> checkout
Total Conversion
Native Web
10% 5%
Step conversion
checkout -> confirmation 30%
30% 30%
15%

7. Why?

8. Autocomplete fields
less friction
30% faster
each app needs data entry
each app need validation process
multiple payment methods
Autofill

9. Cannot guess 100% reliability card type from number
Card number formatting while typing
Card number validation
Custom Forms
Scan your card details from the camera without need of typing
Credit/Debit card
…billing/shipping address, contact info

10. Payment Request API
Eliminate checkout forms

11. It is not
Integrator with payment processor
Supported by Safari (but we have ApplePay)
A new payment method
A finalised standard

12. It is
Open
Cross browser
Chrome, Chrome for Android, Edge, Opera
Standard
One click payment

13. Native

14. Despite WIP, >28% support

15. Process

16. Playground

17. React
Everything is a component
Declarative code
Not obvious how to
encapsulate logic in a
component

18. Functor
Given categories C and D
a functor F:C→D
is a map that sends
each object x in C to an object F(x) in D
&
each morphism f:x→y in C to a
morphism F(f):F(x)→F(y) in D
such that each commuting diagram in C
maps to a commuting diagram in D

20. 1
2

21. 1
2

22. const paymentRequest = () => (WrappedComponent) => (
class ExtendedComponent extends React.Component {
render() {
const { config, ...rest } = this.props;
if (!isSupported() || !config) {
return WrappedComponent({ ...rest, isSupported: false });
}
return WrappedComponent({ ...rest, isSupported: true, show:
show(config), abort });
}
}
);
Pseudo code

23. Why?
Powerful behaviour encapsulated in the high order component
Declarative API
Composable
Very simple to use

24. Create the component
import * as React from 'react';
import paymentRequest from 'react-payment-request-api';
const Button = ({ show, isSupported, style }) => isSupported
? <button onClick={show} style={style}>Pay now!</button>
: <span>Payment request not supported</span>;
export default paymentRequest()(Button);

25. Use the component
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Button from './button';
import getConfig from './config';
import styles from './styles';
const App = () =>
<Button config={getConfig()} style={styles.button} />;
ReactDOM.render(<App />, document.getElementById('app'));

26. const getConfig = () => ({
methodData: [{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'diners'],
},
}],
details: details,
onShowSuccess: (result, resolve, reject): void => {
console.log('Result:', result);
// make the payment
setTimeout(resolve, 2000);
},
onShowFail: (error) => console.log('Error', error),
onShippingAddressChange: (request, resolve, reject): void => {
console.log('ShippingAddress:', request.shippingAddress);
// recalculate details
resolve(details);
},
onShippingOptionChange: (request, resolve, reject): void => {
resolve(details);
},
});
Configuration

27. const getConfig = () => ({
methodData: [{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'diners'],
},
}],
details: details,
onShowSuccess: (result, resolve, reject): void => {
console.log('Result:', result);
// make the payment
setTimeout(resolve, 2000);
},
onShowFail: (error) => console.log('Error', error),
onShippingAddressChange: (request, resolve, reject): void => {
console.log('ShippingAddress:', request.shippingAddress);
// recalculate details
resolve(details);
},
onShippingOptionChange: (request, resolve, reject): void => {
resolve(details);
},
});
Configuration

28. Demo
https://lanaro.net/react-payment-request-api/

29. Open source
Repository:
https://github.com/marcolanaro/react-payment-request-api
Standard:
https://www.w3.org/TR/payment-request/