apidays Singapore 2023 - Resilience to adaptability through digitisation April 12 & 13, 2023 Iterate Faster with Dynamic Flows Yee Hui Poh, Solutions Engineer at Wise ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

1. ITERATE FASTER WITH
DYNAMIC FLOW
API Days Singapore 2023

3. POH YEE HUI
Solutions Engineer @ Wise

4. INSTANT,CONVENIENT,TRANSPARENT,
AND EVENTUALLY FREE.

5. Table of Contents
1.
2.
3.
4.
5.
Backstory
Dynamic Flow
Demo
Architecture
Dynamic Flow SDK

6. BACKSTORY
01

7. only ONE pair
EUR - GBP

8. UI was simple
back then.
1.
2.
3.
4.
One client (web)
One currency pair
Two onboarding
Two recipient type

9. New Currency.
1.
2.
New Onboarding
New Recipient Type
2 CCY = 2 route
3 CCY = 6 routes
4 CCY = 12 routes
5 CCY = 20 routes
10 CCY = 90 routes

10. WE HAVE EXPANDED

11. 40+
source countries

12. 70+
target countries

13. £ 9,000,000,000
processed per month

14. >100
recipient types

15. 1
What are the
challenges?
New countries
New payment options
Development cycle
2
3
Release cycle
4

16. 60+
partners
WISE PLATFORM

17. WHAT IF
Frontend UI Backend
Hey, can I know what fields do you need?
{
"action": "recipient",
"currency": "sgd"
}

18. WHAT IF
[
"name",
"bank",
"account"
]
Frontend UI Backend
Hey, can I know what fields do you need?
{
"action": "recipient",
"currency": "sgd"
}
Sure, please collect these fields.

19. WHAT IF
[
"name",
"bank",
"account"
]
Frontend UI Backend
Hey, can I know what fields do you need?
{
"action": "recipient",
"currency": "sgd"
}
Sure, please collect these fields.
Account
Bank
Name
SUBMIT

20. WHAT IF 2
Frontend UI Backend
Hey, can I know what fields do you need?
{
"action": "recipient",
"currency": "sgd"
}

21. WHAT IF 2
[
"name",
"bank",
"branch",
"account"
]
Frontend UI Backend
Hey, can I know what fields do you need?
{
"action": "recipient",
"currency": "sgd"
}
Sure, please collect these fields.

22. Account
WHAT IF 2
[
"name",
"bank",
"branch",
"account"
]
Frontend UI Backend
Hey, can I know what fields do you need?
{
"action": "recipient",
"currency": "sgd"
}
Sure, please collect these fields.
Branch
Bank
Name
SUBMIT

23. It is only a super
simplified
example
Dynamic Fields
Field name only
No type
No validation
1.
2.
3.

24. DYNAMIC FLOW
02

25. Dynamic Flow is now
almost everywhere at Wise
Customer
Verification
Recipient
Creation
Additional
Transfer Details
Customer
Self-service

26. What do we need in Dynamic Flow?
What to collect
How to collect
Are the values correct
Where to send

27. Dynamic Fields
[
{
"name": "Full Name",
"group": [
{
"key": "accountHolderName",
"name": "Full Name",
"type": "text",
"required": true,
"minLength": 2,
"maxLength": 140,
"validationRegexp": "^[0-9A-Za-z]$"
}
]
}
]
Simple Field Types
1.
2.
3.
4.
text
radio
select (dropdown)
date
Simple Validations
1.
2.
3.
length validation
regex validation
allowed values (select / radio)

28. THANKS
[
…
{
"key": "accountHolderName",
"name": "Full Name",
"type": "text",
"required": true,
"minLength": 2,
"maxLength": 140,
"validationRegexp": "^[0-9A-Za-zÀ-ÖØ-öø-ÿ-_()'*,.%#^@{}~<>+$"[] ]+$"
}
…
]
field name
validation
EXAMPLE
field type

29. Soon we realised we need
something more powerful.

30. What is lacking?
Dynamic Fields
1.
2.
3.
4.
5.
Order and layout
Additional information
Complex fields
Flow with multiple steps
Submission URL

31. …
"name": {
"type": "object",
"displayOrder": [
"fullName"
],
"properties": {
"fullName": {
"title": "Full name of the account holder",
"type": "string",
"validationMessages": {
"minLength": "Name needs to be between 2 and 140 characters long.",
"maxLength": "Name cannot be longer than 140 characters.",
"pattern": "Please use latin characters only.",
"required": "Name cannot be empty."
},
"autofillProvider": "contact",
"autofillKey": "contact.fullName",
"pattern": "^[0-9A-Za-zÀ-ÖØ-öø-ÿ-_()'*,.%#^@&{}~<>+$"[] ]+$",
"minLength": 2,
"maxLength": 140
}
},
"required": [
"fullName"
]
},
…
THANKS
…
{
"title": "Create recipient",
"actions": [
{
"title": "Confirm",
"url": "/v2/accounts",
"method": "POST"
}
],
"schemas": [
{
"allOf": [
{
"title": "Bank details",
"control": "tab",
"placeholder": "Please select where you are sending to...",
"oneOf": [
{
"title": "Inside Europe",
"type": "object",
"displayOrder": [
"name",
"details",
],
"properties": { ... },
"icon": {
"name": "bank",
}
},
{
"title": "Outside Europe",
"type": "object",
"properties": { ... },
"alert": {
"context": "warning",
"markdown": "To send EUR to this account, we need to use the SWIFT network...",
"type": "alert"
}
}
]
}
]
}
]
}
…
Submission Endpoint
Help / Warnings
IMPROVED
Field UI
Icons / Images
validation
Display order
Messages
Auto-fill

32. DEMO
03

33. 01

34. BUTTON

35. 02

36. SELECTION
DROPDOWN LIST / RADIO BUTTONS

37. 04

38. 05

39. 06

40. TEXTBOX

41. 07

42. 08

43. 09

44. DESIGN
CHANGES

45. 11

46. 12

47. 13

49. ARCHITECTURE
04

50. ARCHITECTURE
Backend Renderer
Design System
UI
Refresh / Submit

51. WHAT DOES IT
MEAN FOR DEVS?

52. Change now,
Live immediately
Build once,
Add new flow anytime

53. DYNAMIC FLOW
SDK
05

54. ARCHITECTURE
Backend Renderer
Design System
UI
Refresh / Submit

55. WE BUILT IT SO
YOU DON’T HAVE TO

56. Dynamic Flow
SDK
1.
2.
3.
Generate your specification in
your backend.
Feed it to the SDK in the
frontend.
SDK spits out the UI page.

57. OUR RENDERER
YOUR DESIGN SYSTEM

58. Dynamic Flow
With Dynamic Flow,
you can iterate faster.

59. THANKS
REACH OUT
TO US

60. platform.wise.com

61. linkedin.com/in/yeehuipoh
Poh Yee Hui
yeehui.poh@wise.com