Use Cases

Merchant Paytool is a solution dedicated directly to online payments. This functionality does not require any type of session or user account in the Verestro System. It is a functionality that offers one-time payment e-commerce transactions, therefore it is based on a form in which the user simply enters his card details. This chapter describes the business process from the user's point of view, extended by technical elements.

Transaction process via web SDK

The transaction process in the Verestro system begins when the user selects the Merchant Paytool as a payment option. At this point, the transaction pre-initialization process takes place. The sequence diagram below shows the entire transaction process step by step. The transaction processing way described in this chapter takes place when the Merchantr uses the "Integrated" implementation model. For detailed information check “Implementation models” chapter.

The diagram below shows a successful transaction process:

@startuml
skinparam ParticipantPadding 30
skinparam BoxPadding 30
skinparam noteFontColor #FFFFFF
skinparam noteBackgroundColor #1C1E3F
skinparam noteBorderColor #1C1E3F
skinparam noteBorderThickness 1
skinparam sequence {
ArrowColor #1C1E3F
ArrowFontColor #1C1E3F
ActorBorderColor #1C1E3F
ActorBackgroundColor #FFFFFF
ActorFontStyle bold
ParticipantBorderColor #1C1E3F
ParticipantBackgroundColor #1C1E3F
ParticipantFontColor #FFFFFF
ParticipantFontStyle bold
LifeLineBackgroundColor #1C1E3F
LifeLineBorderColor #1C1E3F
}
participant "Merchant App (Browser)" as browser
participant "Paytool Frontend" as pfront
participant "Paytool SDK" as psdk
participant "Paytool Backend" as pback
participant "Merchant Server" as custback
participant "Acquirer" as acq
note right of browser: User chooses "Pay with Merchant Paytool" (1)
browser->pfront
pfront->psdk: Begin transaction (2)
psdk->pback: Transaction preinitialize /preinit (3)
pback->pback: Store transaction session data (4)
pback->psdk: OK - returns transactionId (5)
psdk->pfront: Redirect with transactionId (6)
pfront->pback: Get transaction (from point 3) (7)
pback->pfront: Returns transaction details (8)
pfront->pfront: User filling data (CN, CVC, EXP) (9)
pfront->pfront: Encrypt data (from point 9) (10)
pfront->pback: Perform transaction /transaction/TRX_ID + enc body (11)
pback->acq: Transaction with 3DS (12)
note left of acq: At this point 3D Secure process takes place
acq->pback: Response (13)
pback->pfront: Transaction Result (14)
pback->custback: Send postback to provided URL (15) (Optional - configurable)
pfront->browser: redirect User (success/failure) (16)
custback->pback: Get transaction status (17) (optional but hardly recommended in case when postbacks are disabled)
pback->custback: Return transaction status (18)
custback->browser: Provide transaction result (19)
@enduml

For easier understanding of the process, each of the steps listed in the diagram are described below:

1. The user which using Merchant's application, selects the Merchant Paytool payment option and clicks pay.

2. The Merchant application starts the transaction process by communicating with Merchant Paytool SDK.

3. Merchant Paytool SDK performs the transaction pre-initialization by making a request to Merchant Paytool Backend.

4. Merchant Paytool Backend creates an entry in the system about initiating the transaction and returns the unique id (in the form of UUID) of the transaction.

5. Merchant Paytool Backend returns transaction id to the Merchant Paytool SDK.

6. Merchant Paytool SDK redirects the user to a form in Merchant Paytool Frontend.

7. Merchant Paytool Frontend retrieves from the backend information about the created transaction (in point 4) using the previously obtained transaction id.

8. Merchant Paytool Backend returns transaction details to the Merchant Paytool Frontend.

9. The user fills in the form with card data and personal data and clicks “Confirm and Pay” button.

10. Merchant Paytool Frontend encrypts data with JWE standard.

11. Merchant Paytool Frontend makes a payment request (based on the previously received transaction id) to the Merchant Paytool Backend providing encrypted data collected from the user.

12. Merchant Paytool Backend makes transaction with 3D Secure request to the Acquirer.

13. Acquirer returns transaction with 3D Secure status.

14. MerchantPaytool Backend provide transaction status to Merchant Paytool Frontend.

15. Merchant Paytool Backend sends a postback about the completed transaction along with transaction status and a unique transaction id to the Merchant Server (this step takes place if the Merchant wants to use this option).

16. Merchant Paytool Frontend displays transaction status to the user and redirects him to the approciate site (redirect URL provided by the Merchant).

17. Merchant Server gets transaction details from Merchant Paytool Backend using transaction id (this step takes place if Merchant wants to use this option).

18. Merchant Paytool Backend returns transaction details to the Merchant Server.

After the user completes the transaction, it is highly recommended that the Merchant gets transaction details from Merchant Paytool Backend (as shown in point 18 of the diagram above) or listen for postbacks (as shown in point 15 of the diagram above).

Transaction process via REST API

The transaction process in the Verestro system begins when the user selects the Merchant Paytool as a payment option. At this point, the transaction pre-initialization process takes place. The sequence diagram below shows the entire transaction process step by step. The transaction processing way described in this chapter takes place when the Merchant uses the "REST API" implementation model. For detailed information check “Implementation models” chapter.

The diagram below shows a successful transaction process:

@startuml
skinparam ParticipantPadding 30
skinparam BoxPadding 30
skinparam noteFontColor #FFFFFF
skinparam noteBackgroundColor #1C1E3F
skinparam noteBorderColor #1C1E3F
skinparam noteBorderThickness 1
skinparam sequence {
ArrowColor #1C1E3F
ArrowFontColor #1C1E3F
ActorBorderColor #1C1E3F
ActorBackgroundColor #FFFFFF
ActorFontStyle bold
ParticipantBorderColor #1C1E3F
ParticipantBackgroundColor #1C1E3F
ParticipantFontColor #FFFFFF
ParticipantFontStyle bold
LifeLineBackgroundColor #1C1E3F
LifeLineBorderColor #1C1E3F
}
participant "Merchant App (Browser)" as browser
participant "Paytool Frontend" as pfront
participant "Paytool Backend" as pback
participant "Merchant Server" as custback
participant "Acquirer" as acq
note right of browser: User chooses "Pay with Merchant Paytool" (1)
browser->pback: Transaction preinitialize /preinit (2)
pback->pback: Store transaction session data (3)
pback->browser: OK - returns transactionId (4)
browser->pfront: Redirect with transactionId (5)
pfront->pback: Get transaction (from point 3) (6)
pback->pfront: Returns transaction details (7)
pfront->pfront: User filling data (CN, CVC, EXP) (8)
pfront->pfront: Encrypt data (9)
pfront->pback: Perform transaction /transaction/TRX_ID + enc body (10)
pback->acq: Transaction with 3DS (11)
note left of acq: At this point 3D Secure process takes place
acq->pback: Response (12)
pback->pfront: Transaction Result (13)
pback->custback: Send postback to provided URL (14) (Optional - configurable)
pfront->browser: redirect User (success/failure) (15)
custback->pback: Get transaction status (16) (optional but hardly recommended in case when postbacks are disabled)
pback->custback: Return transaction status (17)
@enduml

User flow

This section describes each of the steps from end user point of view. Each of the steps is reflected in the pictures which are showing application design.

After the user selects the “payment by Merchant Paytool” option, the redirection to a separate web page happens – hosted by Verestro – where a form for card data and personal data is displayed. The picture below shows this form:

The user must fill in each of the fields with the appropiate data. Each parameter must meet the validation requirements, e.g. The card number must comply with the Luhn algorithm. The user must also confirm the acceptance of the terms of use. If the field's validation requirement is not met, the field is highlighted in red and the „Confirm and Pay” button remains inactive. The picture below shows a form with correctly filled data:

After pressing the "Confirm & Pay" button, the process of communication with the bank takes place. Upon its completion, the status of the transaction will be shown to the user. The pictures below show "success" and "fail" status view:

Regardless of the transaction status, the user is redirected to the address provided by the Merchant. The user can go to this address by clicking „Return to the shop” button or simply wait for an automatic redirection.

At the each stage, the user can view the “Term of use”, “Privacy notice”, “FAQ” by clicking approciate option as shown on the screen below: