Upgrade to Pro — share decks privately, control downloads, hide ads and more …

apidays Singapore 2023 - Iterate Faster with Dy...

apidays
January 19, 2024

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/

apidays

January 19, 2024
Tweet

More Decks by apidays

Other Decks in Programming

Transcript

  1. Table of Contents 1. 2. 3. 4. 5. Backstory Dynamic

    Flow Demo Architecture Dynamic Flow SDK
  2. UI was simple back then. 1. 2. 3. 4. One

    client (web) One currency pair Two onboarding Two recipient type
  3. 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
  4. 1 What are the challenges? New countries New payment options

    Development cycle 2 3 Release cycle 4
  5. WHAT IF Frontend UI Backend Hey, can I know what

    fields do you need? { "action": "recipient", "currency": "sgd" }
  6. 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.
  7. 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
  8. WHAT IF 2 Frontend UI Backend Hey, can I know

    what fields do you need? { "action": "recipient", "currency": "sgd" }
  9. 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.
  10. 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
  11. It is only a super simplified example Dynamic Fields Field

    name only No type No validation 1. 2. 3.
  12. Dynamic Flow is now almost everywhere at Wise Customer Verification

    Recipient Creation Additional Transfer Details Customer Self-service
  13. What do we need in Dynamic Flow? What to collect

    How to collect Are the values correct Where to send
  14. 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)
  15. 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
  16. What is lacking? Dynamic Fields 1. 2. 3. 4. 5.

    Order and layout Additional information Complex fields Flow with multiple steps Submission URL
  17. … "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
  18. 01

  19. 02

  20. 04

  21. 05

  22. 06

  23. 07

  24. 08

  25. 09

  26. 11

  27. 12

  28. 13

  29. 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.