Current Situation¶
Current metrics - tables¶
| Metric ID | Title | Type | Platform | Origin | Explanation |
|---|---|---|---|---|---|
Current User flow - Flowchart¶
Happy flow
Warning! This flow only has the happy flow worked out. So it only contains the steps if it goes well and the payment is approved.
Flowchart - click to expand
---
config:
flowchart:
curve: monotoneY
nodeSpacing: 30
rankSpacing: 40
padding: 10
wrappingWidth: 120
---
flowchart TD
%% Example comment label
%% CheckoutStep1@{ shape: braces, label: EXAMPLE UF-1} -.-> RedirectCheckout
%% Pre-checkout
Start@{ shape: circle} --> ToMyAccount[Go to my account]
ToMyAccount --> MyAccountReorder[Add to Cart: My account reorder]
MyAccountReorder ---> ToCheckoutMyAccount[Go to checkout]
ToCheckoutMyAccount ---> MyAccountPassthrough(User is logged in, thus you can continue to payment method selection)
MyAccountPassthrough ----> SelectMethod
Start@{ shape: circle} --> GoToPDPPLP[Go to PDP or PLP]
GoToPDPPLP --> AddToCart[Add to Cart: PDP or PLP]
AddToCart --> ToCart[Go to Cart]
ToCart --> RedirectCheckout[Go to checkout]
%% Checkout Step 1: UserData
RedirectCheckout --> IsLoggedIn{Is Logged in?}
IsLoggedIn -->|Yes| SelectMethod{Choose payment method}
IsLoggedIn -->|No| AuthChoice{Choose authentication method}
AuthChoice -->|Log in| Login@{shape: manual-input, label: Enter credentials} ---> SelectMethod
AuthChoice -->|Register| Registration@{ shape: manual-input, label: Fill registration form **with** password} ---> SelectMethod
AuthChoice -->|Guest| GuestForm@{ shape: manual-input, label: Fill registration form **without** password -> as guest} ---> SelectMethod
AuthChoice -->|Forgot password| ForgotPassword(Redirect to forgot password)
ForgotPassword --> ResetPassword@{shape: procs, label: Set a new password with password reset email} --> RedirectCheckout
%% Checkout Step 2: Payment Selection
%% BANKTRANSFER
CreatePaymentBankTransfer@{shape: procs, label: Create Bank transfer payment at CM}
OpenBankTransferModal@{shape: event, label: Open Bank Transfer Modal}
SelectMethod -- Bank Transfer --> CreatePaymentBankTransfer
CreatePaymentBankTransfer --> OpenBankTransferModal
OpenBankTransferModal -------> RedirectToValidationPage
%% IDEAL
PaymentIDEAL@{shape: procs, label: Start payment at CM for iDEAL}
RedirectToIdeal@{shape: event, label: Redirect to iDEAL}
PayIdeal@{shape: process, label: Pay the amount in iDEAL}
SelectMethod -- IDEAL --> PaymentIDEAL
PaymentIDEAL --> RedirectToIdeal
RedirectToIdeal --> PayIdeal
PayIdeal ------> RedirectToValidationPage
%% PAYPAL
PaymentPaypal@{shape: procs, label: Start payment at CM for PayPal}
RedirectToPayPal@{shape: event, label: Redirect to PayPal}
PayPayPal@{shape: process, label: Pay the amount in PayPal}
SelectMethod -- PayPal --> PaymentPaypal
PaymentPaypal --> RedirectToPayPal
RedirectToPayPal --> PayPayPal
PayPayPal ------> RedirectToValidationPage
%% MAESTRO
PaymentMaestro@{shape: procs, label: Start payment at CM for Meastro}
RedirectToMaestro@{shape: event, label: Redirect to Meastro}
PayMeastro@{shape: process, label: Pay the amount in Meastro}
SelectMethod -- Maestro --> PaymentMaestro
PaymentMaestro --> RedirectToMaestro
RedirectToMaestro --> PayMeastro
PayMeastro ------> RedirectToValidationPage
%% KLARNA
HasPhoneNumber@{shape: diamond, label: Has Customer a phone number?}
FillPhoneNumberModal@{shape: manual-input, label: Fill phone number for payment}
PaymentKlarna@{shape: procs, label: Start payment at CM for Klarna}
RedirectToKlarna@{shape: event, label: Redirect to Klarna}
PayKlarna@{shape: process, label: Pay the amount in Klarna}
SelectMethod -- Klarna --> HasPhoneNumber
HasPhoneNumber -- Yes --> PaymentKlarna
HasPhoneNumber -- No --> FillPhoneNumberModal
FillPhoneNumberModal --> PaymentKlarna
PaymentKlarna --> RedirectToKlarna
RedirectToKlarna --> PayKlarna
PayKlarna ----> RedirectToValidationPage
%% VISA & MASTERCARD
SelectMethod -- Creditcard (Mastercard & Visa) --> GoToCreditcardPage
%% MISTERCASH (Bancontact)
SelectMethod -- Mistercash (Bancontact) --> GoToBancontactPage
%% Generic validation and completion
RedirectToValidationPage@{shape: event, label: Redirect to Validation Page}
ValidateOrderPayment@{shape: procs, label: Validate Order payment}
IsOrderPaymentValid@{shape: diamond, label: Is Order payment valid?}
RedirectToValidationPage --> ValidateOrderPayment
ValidateOrderPayment --> IsOrderPaymentValid
IsOrderPaymentValid -- No --> SelectMethod
IsOrderPaymentValid -- Yes --> RedirectOrderConfirmation@{shape: rect, label: Redirect to Order Confirmation}
%% Sub-flows
%% Creditcard Sub-flow
subgraph Creditcard Flow
GoToCreditcardPage@{ shape: rect, label: Go to payment with Creditcard} --> UseSavedCard@{shape: diamond, label: Use existing card?}
%% Use existing card
UseSavedCard -- Use existing card --> UseCardCM@{ shape: procs, label: Gets existing card from CM and uses that card}
UseCardCM ---> PaymentCreditcard
%% Use new card
UseSavedCard -- No --> EnterCardDetails[Enter card details]
EnterCardDetails --> SaveCard{Save new card?}
%% Save new card
SaveCard -- Yes --> SaveCardCM@{ shape: procs, label: Saves new card to CM and uses that card}
SaveCardCM --> PaymentCreditcard@{shape: procs, label: Process payment}
%% Don't save new card
SaveCard -- No --> PaymentCreditcard
PaymentCreditcard --> Handle3dSecure@{shape: event, label: Handle 3D Secure and authenticate payment}
click Handle3dSecure href "#threedsecure" "Information on 3D secure"
end
Handle3dSecure ---> RedirectToValidationPage
%% Bancontact Sub-flow
subgraph Bancontact flow
GoToBancontactPage@{shape: rect, label: Go to payment with Bancontact} --> UseBancontactQr@{shape: diamond, label: Use Bancontact QR Code?}
%% Use QR
PaymentBancontactQr@{shape: procs, label: Start payment at CM for Bancontact Qr}
RedirectToBancontact@{shape: event, label: Redirect to Bancontact}
PayBancontact@{shape: process, label: Pay the amount in Bancontact}
UseBancontactQr -- Yes --> PaymentBancontactQr
PaymentBancontactQr --> RedirectToBancontact
RedirectToBancontact --> PayBancontact
%% Don't use QR
UseBancontactQr -- No --> UseSavedCardBancontact@{shape: diamond, label: Use existing card?}
%% Use existing card
UseSavedCardBancontact -- Use existing card --> UseCardCMBancontact@{ shape: procs, label: Gets existing card from CM and uses that card}
UseCardCMBancontact ---> PaymentBancontact
%% Use new card
UseSavedCardBancontact -- No --> EnterCardDetailsBancontact[Enter card details]
EnterCardDetailsBancontact --> SaveCardBancontact{Save new card?}
%% Save new card
SaveCardBancontact -- Yes --> SaveCardCMBancontact@{ shape: procs, label: Saves new card to CM and uses that card}
SaveCardCMBancontact --> PaymentBancontact@{shape: procs, label: Process payment}
%% Don't save new card
SaveCardBancontact -- No --> PaymentBancontact
PaymentBancontact --> Handle3dSecureBancontact@{shape: event, label: Handle 3D Secure and authenticate payment}
click Handle3dSecureBancontact href "#threedsecure" "Information on 3D secure"
end
PayBancontact ----> RedirectToValidationPage
Handle3dSecureBancontact --> RedirectToValidationPage
%% APPLE_PAY & GOOGLE_PAY - NOT IMPLEMENTED TO THE SIDE
SelectMethod -. Apple Pay & Google Pay ..-x NotImplemented@{ shape: stadium, label: Not Implemented}
subgraph gone [" "]
NotImplemented
end
style gone fill:none,stroke:none
3D Secure
Step: Handle 3D Secure and Authenticate Payment¶
This step handles the 3D Secure authentication required by most banks and credit card providers.
There are two possible types of 3D Secure flows:
- Direct Redirect URL
- Authorization via Credit Card / Bank App (iFrame)
Both types load JavaScript provided by CM Payments (formerly known as Docdata).
1. Authorization via Credit Card / Bank App (iFrame)¶
In this flow, an iFrame is loaded with a specific URL from CM Payments.
Within this iFrame, a bank-specific page is displayed that instructs the user to authorize the payment in their Credit Card or Bank App.
This page acts as a loading indicator until the authorization is completed.
Once the user authorizes the payment and returns, the iFrame receives an update and the user proceeds to the next step in the checkout process.
2. Direct Redirect URL¶
In this flow, the user is directly redirected to the next checkout step after authentication.
However, this type appears to be rarely used nowadays, as nearly all banks now support the 3D Secure authorization flow described above.