Online card payment

Document purpose

This document is intended to provide a non-technical audience with an understanding of the Online Card Payment end-user journey. Note: For illustrative purposes the Canvas app has been used to demonstrate the end-user functionality of the SDK.

About the Online Card Payment end-user journey

A customer using their card to shop online is required to perform SCA (exemptions may apply).

The Online Card Payment workflow

The Online Card Payment end-user journey

Step 1 – Customer shopping on merchant’s website

The customer is shopping with an online merchant and has chosen an item and added it to their ‘shopping basket’.

Step 2 – Enter card details

In the online checkout, the customer enters their card details:
  • Long card number
  • Card expiry date
  • CVV Number (Card Verification Value)

Step 3 – Transaction outcome

  • Success – continue to Step 4 – Success screen.
  • SCA required – continue to Step 5 – Authentication choice screen displayed.
  • Fail – return to the merchant’s online checkout to re-enter the card details.

Step 4 – Success screen

The Success screen is displayed to notify the customer that the transaction has been successful, and no further action is required.

Step 5 – Authentication choice screen displayed

The customer is presented with the SCA options available:
  • Authenticate via app
  • Authenticate with OTP via SMS (no change to existing journey)
  • Authenticate with OTP via Email (no change to existing journey)

Step 6 – Customer chooses authentication type

The customer chooses how they would like to authenticate the transaction: Via App – continue to Step 7 – Authenticate via app screen displayed.

Step 7 – Authenticate via app screen displayed

The Authenticate via app screen is displayed instructing the customer to open the Canvas app. The customer may receive a push notification (if enabled). Continue to Step 8 – Authenticate via App.

Step 8 – Authenticate via app

Now in the journey, the customer is presented with the Authorise card payment screen.

Step 9 – Other Authentication

The customer is able to select ‘other authentication’ to be presented with alternative SCA actions to complete
transaction.

Step 10 – Confirmation screen

Returning to the Visa screen, the customer selects Confirm to complete the journey.

Step 11 – Error/Transaction cancelled

If the verification fails, there are two outcomes:

  • Error screen – continue to Step 12 – Error screen.
  • Transaction cancelled – continue to Step 13 – Transaction cancelled.

Step 12 – Error screen

The Error screen is displayed, and the transaction is terminated.

Step 13 – Transaction cancelled

The transaction is cancelled, and the customer is taken back to the merchant’s screen.