"Challenge: bulletproof payment form", Lev Davydov

Millions of daily users, hundreds of clients, one embeddable widget. How did we build it and what could possibly have gone wrong?

1. 和 vv

BULLETPROOF
PATENT FORM

Solidgate

3. lo | noBEphycb |
CET

4. KOLO

5. t= | Aouo
superhumans Center |

6. About me El solidgate

Frontend Guildmaster
at Solidgate

8 years in IT

Wanna you to learn
from our mistakes

7. Agenda El solidgate

1. Company intro.

2. Payment form iterations
3. Public API

4. Race conditions

5. Q&A

8. About us El solidgate

2.8 billions USD
processed annually

2x YTY growth 125 businesses
using Payment form

9. Tech numbers El solidgate

6k+ RPS on balancer Payment Form

A

+ Add query © Queryhistory © Query inspector

Graph

10. Initial requirements EJ solidgate

Payment form 1 EY 시 8
Embeddable into other apps |! で |

We are controlling updates @

Restrict client data access O@

=> iframe

11. Initial solution

Your iframe
Card Number
1234 1234 1234 1234

Expiration Date

MMIYY

Subscribe for 120,00 EUR/30 day:

Ask iframe url

Returns url

Pass sensitive
info

回 solidgate

Your backend

12. Initial problems EJ solidgate

its looks so
you do something’

Merchant website

| Draws

1 Uh, sorry, could you set a 300px
Your iframe fixed heigh, we are updating our
documentation ATM?

Card Number

13. 回 solidgate
3D-Secure ve En

CKACYBA TA

AlnpusarBanx VISA

Mepuawr: LQ
wa

Bara:
Kaprea:

Niareepaite onnary a honangy Npusar24,
ori Harwcuire xHonky pogosxcinn

15. Workarounds EJ solidgate

Uh, sorry, could you set a 300px
Your iframe fixed heigh, we are updating our
documentation ATM?

Card Number

Expiration Date

and there is a 3D redirect from
BigPopularBank with scrollbar

Sorry again, it should be 400px.

Your QA

store.soldgate.com 1 charge your You
nature payments in accesar

16. Workaround trap Elsolidgate

// publish, inside iframe
window. parent. postMessage({
type: "resize",
height: 400,
por);

// subscribe, outside iframe
window. addEventListener("message", e => {
if (e.type == "resize") て
iframe.height = e.height;

Ej
3)

17. More requirements

Extra fields

Apple pay

3D-Secure in modal

回 solidgate

4242 4242 4242 4242 vsa

«Pay

Your customer will proceed to the Apple
Pay to complete payment

18. Silver Bullet Elsolidgate

Requests SDK

Returns SDK

ñ

1 Your SDK | ER — |
Your iframe

Cord Number

Handles 별
non-sensetive info 1!

19. 回 solidgate

Why silver bullet? |

Better payment conversion |
Better clients conversion |
Better ideas conversion |

20. HOUSTON,
WE HAVE
A PROBLEM

window.on(load', () => {
window.parent.postMessage(‘its ok’, '*)

»

Credit or Debit Card Number

Expiry Date CVVCVC

Email C

r
You are engineer, [Username] ㅣ

21. Doom picture EJ solidgate

opyao

22. 回 solidgate

form.on("event", cb) is ugly past t> |

form.addEventListener("event", cb) is bright future &

You

Not migrating, past is OK,

gimme features 名

Merchant

23. Liskov
Substitution
Principle

If it looks like a duck,

quacks like a duck, but needs
batteries — you probably have
the wrong abstraction

24. Not perfect flow

interface Data {
containterld: string;
// rest props

‘
| Your SDK | a

Your iframe

Call backend
for iframeUrl

Find containerld
and paste iframe

回 solidgate

25. interface Data {
containterld: string;
// rest props

Your SDK Draws

Your iframe

Call backend for
payment data

| 一

Continue

回 solidgate

Find containerld
and paste
static iframe

el

+

Notify error

26. Breaking changes? El solidgate

Before After

enum OrderStatus {
Initial = “initial”, // default
|] new status
Processing = “processing”,
Success = “success”,
Fail = “fail”

}

enum OrderStatus {
Initial = “initial”, // default
Success = "success",
Fail = “fail”

}

27. Somehow breaking El solidgate

/ no
function sendToApi(status: OrderStatus) {}

| / yes
ei. WOK! NANYTA HABUMBCA function readFromApi(status: OrderStatus) {
TOBOPHTH "3ANEHMTb BI] KOHTEKCTVS switch (status)

case OrderStatus. Initial {
doStuff();

に ヨ

ar
N oth di
TBHALITYBABCA IT-APXITEHTOPOM default {

/ 4 hideAllUlAndSayNO00000/): // breaking
}

}

28. Exceptions Elsolidgate

interface Error {
kind: "order_declined"
reason: "invalid_api_key"

csnwCorrelationId:

env: “sandbox

29. So weird environment El solidgate

Promise.finallyButNotAllways() Object.valuesButNotAll()

30. Race conditions

EJ solidgate

31. _jn React function Like({ initialLiked }) {

const [liked, setLiked] = useState(initialLiked);

function handleClick() {
const newLiked = !liked;

// optimistic update
setLiked (newLiked) ;

// api call
fetch("/api/like", {
method: "POST",
body: JSON.stringify({ liked: newLiked }),
»
3

return (
<button onClick={handleClick}>
fliked ? "@" : won]
</button>

)3

32. Explanation 回 solidgate

Click % -> expectY —— Request 2 一 >
Backend

Click Y -> expect '— Request 2 —>

33. What to do? import { Mutex } from 'asyno-mutex'
Mutexes class Liker {

private mutex = new Mutex()
async like(liked: boolean) {
// awaits release (if already in use)

const release = await mutex.acquire();

try {

await fetch("/api/like", {
method: "POST",
body: JSON.stringify({ liked: newLiked }),

»

了 finally {
// do release
release();

34. n Payment form

interface Data {
containterld: string;
// rest props

Your SDK

Your iframe

Elsolidgate

Sdk.init(data)

人

Call backend for Find containerld and
payment data paste static iframe

Y

Ensure iframe loaded

y

Pass init data and payment data to iframe

35. 回 solidgate

Modal window

n Payment form

Your iframe

Card Number

1234 1234 1234 1234

Expiration Date

MMIYY

‚00 EUR/30 days

36. What to do? Explicit ownership

Please, do work, ID

回 solidgate

!
| Your SDK Your iframe

Are you alive?

Yes

Are you alive?

Yes

Here goes result from ID

N
1
ㅣ
1
1
À
1
|
1
1
1

Card Number

1234 1234 1234 1234

Expiration Date

MM/YY

Subscribe for 120,00 EUR/30 days

37. 回 solidgate

Iframes are good,
but not enough

How to synchronise
SDK © iframe versions?

Client-side SDK

Testing best practices
are Public API

Race conditions
are everywhere

Percentages/canary rollouts
(we can do it with Cloudfront)

38. QA