# Technical Diagrams Find technical diagrams, including workflow diagrams, on this page. ## **Checkout workflow** The April checkout process can be divided into a sequence of steps which all happen within the April iFrame. ```mermaid graph LR A(Checkout initialisation) --> B{{Card capture &
Payment selection}} B --> FP1(Process payment) subgraph Full payment FP1 end FP1 --> C B --> PI1(KYC check) subgraph Pay in instalments PI1 --> PI2(Configure plan) PI2 --> PI3(Process payment ) end PI3 --> C(Complete order) ``` Each individual step is its own process, and each must be completed before advancing to the next step. Detailed sequence diagrams of each step can be found below. ### Checkout initialisation ```mermaid sequenceDiagram participant Cust as Customer participant CP as Customer Checkout Page participant LUI as April Checkout UI participant LAPI as April API Cust ->>+ CP: Navigate to the checkout page CP ->> LAPI: Load checkout.js script CP ->> LUI: AprilCheckout.init() CP ->> LUI: AprilCheckout.render() LUI ->>+ LAPI: Load assets for checkout LUI ->> LAPI: Check if returning customer LUI ->> LAPI: Load saved cards LAPI -->>- LUI: Return requested assets CP -->>- Cust: Display checkout form Cust ->> LUI: Customer selects payment type Cust ->> LUI: Enter credit card information ``` ### Full payment When a customer elects to pay the full amount at checkout, the process is relatively straightforward. ```mermaid sequenceDiagram participant Cust as Customer participant CP as Customer Checkout Page participant LUI as April Checkout UI participant LAPI as April API Cust ->> CP: Click place order CP ->>+ LUI: Request submit LUI ->> LAPI: Submit card details LAPI ->> LAPI: Tokenise card & process payment LAPI -->> LUI: Return payment token LUI -->>- CP: Return payment token ``` ### Pay in instalments When a customer elects to pay in instalments, there are a number of additional sub-steps which are completed within the pay in instalments sequence. #### Instalments payments overview ```mermaid sequenceDiagram participant Cust as Customer participant CP as Customer Checkout Page participant LUI as April Checkout UI participant LAPI as April API Cust ->> LUI: Enters credit card information Cust ->> LUI: Enters Email and Phone number Cust ->> LUI: Enters Date of birth alt Customer had not been KYC'ed LUI ->> LUI: Do KYC check else Customer has been KYC'ed LUI ->> Cust: Request configure pay plan end Cust ->> LUI: Configure pay plan LUI ->> LAPI: Submit card and payment plan details LAPI ->> LAPI: Tokenise card & process payment plan LAPI -->> LUI: Return payment token LUI -->> CP: Return payment token ``` #### KYC check April performs a lightweight KYC check on customers electing to pay in instalments as part of its responsible lending practices. Customers paying in instalments for the first time through April will have to complete a short ID form, while the check should be imperceptible for customers who have used this option before. More information about KYC checks, including a detailed description, can be found in the **[Know Your Customer (KYC) checks](/developer-portal/know-your-customer-b2c)** documentation pages. ```mermaid sequenceDiagram participant Cust as Customer participant CP as Customer Checkout Page participant LUI as April Checkout UI participant LAPI as April API Cust ->>+ LUI: Enters credit card information Cust ->> LUI: Enters Email and Phone number Cust ->> LUI: Enters Date of birth LUI ->>- LAPI: Submit KYC info LAPI ->> LAPI: Do silent KYC verification alt Pass silent KYC verification LAPI ->> LUI: Request configure pay plan LUI ->> Cust: Request configure pay plan else Fail silent KYC verification Alt Pass simple KYC verification LAPI ->> LUI: Request configure pay plan LUI ->> Cust: Request configure pay plan else Fail simple KYC verification loop Try simple KYC verification at least 2 times LUI ->> Cust: Prompt for Basic KYC info Cust ->> LUI: Provide updated KYC info LUI ->> LAPI: Submit updated KYC info LAPI ->> LAPI: Do KYC verification end Alt Pass ID KYC verification LAPI ->> LUI: Request configure pay plan LUI ->> Cust: Request configure pay plan else Fail ID KYC verification loop Try ID KYC verification at least 2 times LUI ->> Cust: Prompt for ID document info Cust ->> LUI: Provide updated ID document info LUI ->> LAPI: Submit updated ID document info LAPI ->> LAPI: Do ID document verification end LAPI -->> LUI: KYC verification failed LUI -->> CP: KYC verification failed CP ->> Cust: Display KYC failed end end end ``` #### Configure Payment Plan At this step the customer adjusts the instalments payment plan - amounts and dates - to their preference. ```mermaid sequenceDiagram participant Cust as Customer participant CP as Customer Checkout Page participant LUI as April Checkout UI participant LAPI as April API Cust ->> LUI: Select pay plan configuration alt Valid pay plan LUI ->> LAPI: Submit pay plan else Invalid pay plan LUI ->> Cust: Request configure pay plan end ``` ### Order Completion After the customer has entered their information and agreed to a payment method and/or plan, the order is completed through e-commerce backend servers and April API secured by the merchant’s secret API key. ```mermaid sequenceDiagram participant Cust as Customer participant CP as Customer Checkout Page participant MBE as E-commerce backend servers participant LAPI as April API CP ->>+ MBE: Submit complete order MBE ->> LAPI: Create order LAPI -->> MBE: Return orderId MBE ->> LAPI: Make payment using orderId & payment token LAPI -->> MBE: Return transactionId MBE -->>- CP: Complete checkout CP ->> Cust: Display completion message ``` ## **Virtual terminal workflows** When using Virtual Terminal, the activation and payment flows have been separated to enable pre-registration of customers. ### Activation flow ```mermaid sequenceDiagram participant Cust as Customer participant CP as Customer Checkout Page participant LUI as April activation UI participant LAPI as April API LUI ->> Cust: Requests Email and Phone number Cust -->> LUI: Enters Email and Phone number LUI ->> Cust: Sends activation codes to email and phone Cust -->> LUI: Enter activation codes LUI ->> Cust: Requests KYC Info (Names, Date of Birth and address) Cust -->>+ LUI: Enters KYC Info LUI ->>- LAPI: Submit KYC info LAPI ->> LAPI: Do KYC verification alt Pass Simple KYC verification LAPI -->> LUI: Notify success and activated LUI -->> Cust: Notify success and activated else Fail Simple KYC verification LUI ->> Cust: Prompt for ID document info Cust ->> LUI: Provide updated ID document info LUI ->> LAPI: Submit updated ID document info LAPI ->> LAPI: Do ID document verification Alt Pass ID KYC verification LAPI -->> LUI: Notify success and activated LUI -->> Cust: Notify success and activated else Fail ID KYC verification LAPI -->> LUI: Notify failure of activation LUI -->> Cust: Notify failure of activation end end ``` ### Payment flow ```mermaid sequenceDiagram participant Cust as Customer participant Cash as Cashier participant POS as Point of sale system participant LAPI as April API participant Mobile as Customer phone Cust ->>+ Cash: Hands over items to be scanned Cash ->> Cust: Requests mobile number Cust -->> Cash: Provides mobile number Cash ->> POS: Enters mobile number, clicks send payment POS ->> LAPI: Creates order request LAPI ->> Mobile: SMS invoice to Mobile Mobile ->> Cust: Notifies customer of invoice SMS message Cust -->> Mobile: Clicks link and makes payment POS ->> LAPI: Polls API for payment completion LAPI -->> POS: Returns payment status POS -->> Cash: Notifies Cashier of payment success or failure Cash -->>- Cust: Notifies customer of payment success or failure ``` br br **[Return to documentation home](/).**