apidays Singapore 2023 - Iterate Faster with Dynamic Flows, Yee Hui Poh, Wise

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/

Transcript

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
34. BUTTON
36. SELECTION DROPDOWN LIST / RADIO BUTTONS
40. TEXTBOX
44. DESIGN CHANGES
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