[<< Back to Modular Home](/products/modular)

# Sequence diagrams - guest card payment

### Basic card authorization

API only
Card payment using Card Payments API only.

Using:

1. [Card Payments API](/products/card-payments/)



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Card_Payments_API
    Browser-&gt;&gt;Merchant_Frontend: Click Pay
    Merchant_Frontend-&gt;&gt;Merchant_Backend: Pay 
    Merchant_Backend-&gt;&gt;Card_Payments_API: customerInitiatedTransactions request
    Card_Payments_API-&gt;&gt;Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend-&gt;&gt;Card_Payments_API: Settlement request
    Card_Payments_API-&gt;&gt;Merchant_Backend: Settlement response
```

Using Checkout SDK
Card payment via the Checkout SDK, including the creation of a verified token.

Using:

1. [Checkout SDK](/products/checkout/) - for cvc support choose `card and cvc`
2. [Verified Tokens API](/products/verified-tokens/)
3. [Card Payments API](/products/card-payments/)



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Checkout_Sessions
    participant Verified_Token_API
    participant Card_Payments_API
    Note over Merchant_Frontend: Checkout JS added to page 
    Browser->>Merchant_Frontend: Click Pay
    Merchant_Frontend->>Checkout_Sessions: Create session
    Checkout_Sessions->>Merchant_Frontend: Return session 
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>Verified_Token_API: Verified token request
    Note right of Merchant_Backend: Includes session (card session)
    Verified_Token_API->>Merchant_Backend: Verified token response
    Merchant_Backend->>Card_Payments_API: customerInitiatedTransactions request
    Note right of Merchant_Backend: Includes token and optional cvc session 
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

### Basic card authorization with 3DS

Card payment with 3DS authentication enabled.

API only
Using:

1. [3DS API](/products/3ds/)
2. [Card Payments API](/products/card-payments/)



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant 3DS_API
    participant Card_Payments_API
    participant Issuers
    Browser->>Merchant_Frontend: Click Pay
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>3DS_API: deviceDataInitialization request
    3DS_API->>Merchant_Backend: deviceDataInitialization response
    Merchant_Backend->>Merchant_Frontend: DeviceData - BIN/JWT/URL
    Merchant_Frontend->>Browser: 3DS Device Data form
    Browser-->>Issuers: Form POST
    Issuers-->>Browser: PostMessage: dfReferenceId
    Merchant_Backend->>3DS_API: Authentication request
    3DS_API->>Merchant_Backend: Authentication response
    Merchant_Backend->>Merchant_Frontend: Challenge JWT/URL
    Merchant_Frontend->>Browser: 3DS challenge form
    Browser-->>Issuers: Form POST
    Issuers-->>Merchant_Backend: `returnUrl` specified in authentication request
    Note right of Merchant_Frontend: Update or close challenge window on website
    Merchant_Backend->>3DS_API: Verification request
    3DS_API->>Merchant_Backend: Verification response
    Note right of Merchant_Frontend: Apply authentication details in payment<br> E.g. eci, authenticationValue etc
    Merchant_Backend->>Card_Payments_API: customerInitiatedTransactions request
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

Using Checkout SDK (web)
Card payment via the Checkout Web SDK, including the creation of a verified token, with 3DS authentication enabled.

Using:

1. [Checkout SDK](/products/checkout/) - for cvc support choose `card and cvc`
2. [Verified Tokens API](/products/verified-tokens/)
3. [3DS API](/products/3ds/)
4. [Card Payments API](/products/card-payments/)



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Checkout_Sessions
    participant Verified_Token_API
    participant 3DS_API
    participant Card_Payments_API
    Note over Merchant_Frontend: Checkout JS added to page 
    Browser->>Merchant_Frontend: Click Pay
    Merchant_Frontend->>Checkout_Sessions: Create session
    Checkout_Sessions->>Merchant_Frontend: Return session 
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>Verified_Token_API: Verified token request
    Note right of Merchant_Backend: Includes session (card session)
    Verified_Token_API->>Merchant_Backend: Verified token response
    Merchant_Backend->>3DS_API: deviceDataInitialization request
    3DS_API->>Merchant_Backend: deviceDataInitialization response
    Merchant_Backend->>Merchant_Frontend: DeviceData - BIN/JWT/URL
    Merchant_Frontend->>Browser: 3DS Device Data form
    Browser-->>Issuers: Form POST
    Issuers-->>Browser: PostMessage: dfReferenceId
    Merchant_Backend->>3DS_API: Authentication request
    3DS_API->>Merchant_Backend: Authentication response
    Merchant_Backend->>Merchant_Frontend: Challenge JWT/URL
    Merchant_Frontend->>Browser: 3DS challenge form
    Browser-->>Issuers: Form POST
    Issuers-->>Merchant_Backend: `returnUrl` specified in authentication request
    Note right of Merchant_Frontend: Update or close challenge window on website
    Merchant_Backend->>3DS_API: Verification request
    3DS_API->>Merchant_Backend: Verification response
    Note right of Merchant_Frontend: Apply authentication details in payment<br> E.g. eci, authenticationValue etc
    Merchant_Backend->>Card_Payments_API: customerInitiatedTransactions request
    Note right of Merchant_Backend: Includes token, 3DS details and optional cvc session
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

Using Checkout SDK (iOS/Android)
Card payment via the Checkout iOS/Android SDK, including the creation of a verified token, with 3DS authentication enabled.

Using

1. [Checkout SDK](/products/checkout/) - for cvc support choose `card and cvc`
2. [Verified Tokens API](/products/verified-tokens/)
3. [3DS API](/products/3ds/)
4. [Card Payments API](/products/card-payments/)



```mermaid

sequenceDiagram
    participant Merchant_App
    participant Merchant_Backend
    participant Checkout_Sessions
    participant Verified_Token_API
    participant 3DS_API
    participant Card_Payments_API
    Merchant_App->>Checkout_Sessions: Click Pay: Create session
    Checkout_Sessions->>Merchant_App: Return session 
    Merchant_App->>Merchant_Backend: Pay 
    Merchant_Backend->>Verified_Token_API: Verified token request
    Note right of Merchant_Backend: Includes session (card session)
    Verified_Token_API->>Merchant_Backend: Verified token response
    Merchant_Backend->>3DS_API: deviceDataInitialization request
    3DS_API->>Merchant_Backend: deviceDataInitialization response
    Merchant_Backend->>Merchant_App: DeviceData - JWT
    Merchant_App-->>Issuers: Device app data
    Note over Merchant_App: Cardinal SDK: Initialize
    Issuers-->>Merchant_App: Device Data sent
    Note over Merchant_App: consumerSessionId
    Merchant_App->>Merchant_Backend: 
    Merchant_Backend->>3DS_API: Authentication request
    Note over Merchant_Backend: Includes consumerSessionId
    3DS_API->>Merchant_Backend: Authentication response
    Merchant_Backend->>Merchant_App: Challenge - payload
    Note over Merchant_App: Cardinal SDK: Display Challenge
    Merchant_App-->>Issuers: Challenge data
    Issuers-->>Merchant_App: Challenge complete
    Merchant_App->>Merchant_Backend: Challenge complete
    Merchant_Backend->>3DS_API: Verification request
    3DS_API->>Merchant_Backend: Verification response
    Note over Merchant_Backend: 3DS details E.g. eci etc
    Merchant_Backend->>Card_Payments_API: customerInitiatedTransactions request
    Note right of Merchant_Backend: Includes token, 3DS details and optional cvc session
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

### Basic card authorization with 3DS and FraudSight

Card payment with a FraudSight risk assessment and 3DS authentication enabled.

API only
Using:

1. [FraudSight API](/products/fraudsight/)
2. [3DS API](/products/3ds/)
3. [Card Payments API](/products/card-payments/)



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant 3DS_API
    participant Card_Payments_API
    participant FraudSight_API
    participant Issuers
    Browser->>Merchant_Frontend: Click Pay
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>FraudSight_API: Assessment request
    FraudSight_API->>Merchant_Backend: Assessment response
    Merchant_Backend->>3DS_API: deviceDataInitialization request
    3DS_API->>Merchant_Backend: deviceDataInitialization response
    Merchant_Backend->>Merchant_Frontend: DeviceData - BIN/JWT/URL
    Merchant_Frontend->>Browser: 3DS Device Data form
    Browser-->>Issuers: Form POST
    Issuers-->>Browser: PostMessage: dfReferenceId
    Merchant_Backend->>3DS_API: Authentication request
    3DS_API->>Merchant_Backend: Authentication response
    Merchant_Backend->>Merchant_Frontend: Challenge JWT/URL
    Merchant_Frontend->>Browser: 3DS challenge form
    Browser-->>Issuers: Form POST
    Issuers-->>Merchant_Backend: `returnUrl` specified in authentication request
    Note right of Merchant_Frontend: Update or close challenge window on website
    Merchant_Backend->>3DS_API: Verification request
    3DS_API->>Merchant_Backend: Verification response
    Note right of Merchant_Frontend: Apply authentication details in payment<br> E.g. eci, authenticationValue etc
    Merchant_Backend->>Card_Payments_API: customerInitiatedTransactions request
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

Using Checkout SDK (web)
Card payment via the Checkout Web SDK, including the creation of a verified token, with a FraudSight risk assessment and 3DS authentication enabled.

Using:

1. [Checkout SDK](/products/checkout/) - for cvc support choose `card and cvc`
2. [Verified Tokens API](/products/verified-tokens/)
3. [FraudSight API](/products/fraudsight/)
4. [3DS API](/products/3ds/)
5. [Card Payments API](/products/card-payments/)



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Checkout_Sessions
    participant Verified_Token_API
    participant FraudSight_API
    participant 3DS_API
    participant Card_Payments_API
    Note over Merchant_Frontend: Checkout JS added to page 
    Browser->>Merchant_Frontend: Click Pay
    Merchant_Frontend->>Checkout_Sessions: Create session
    Checkout_Sessions->>Merchant_Frontend: Return session 
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>Verified_Token_API: Verified token request
    Note right of Merchant_Backend: Includes session (card session)
    Verified_Token_API->>Merchant_Backend: Verified token response
    Merchant_Backend->>FraudSight_API: Assessment request
    Note right of Merchant_Backend: Includes Token
    FraudSight_API->>Merchant_Backend: Assessment response
    Merchant_Backend->>3DS_API: deviceDataInitialization request
    Note right of Merchant_Backend: Includes token
    3DS_API->>Merchant_Backend: deviceDataInitialization response
    Merchant_Backend->>Merchant_Frontend: DeviceData - BIN/JWT/URL
    Merchant_Frontend->>Browser: 3DS Device Data form
    Browser-->>Issuers: Form POST
    Issuers-->>Browser: PostMessage: dfReferenceId
    Merchant_Backend->>3DS_API: Authentication request
    Note right of Merchant_Backend: Includes token 
    3DS_API->>Merchant_Backend: Authentication response
    Merchant_Backend->>Merchant_Frontend: Challenge JWT/URL
    Merchant_Frontend->>Browser: 3DS challenge form
    Browser-->>Issuers: Form POST
    Issuers-->>Merchant_Backend: `returnUrl` specified in authentication request
    Note right of Merchant_Frontend: Update or close challenge window on website
    Merchant_Backend->>3DS_API: Verification request
    3DS_API->>Merchant_Backend: Verification response
    Note right of Merchant_Frontend: Apply authentication details in payment<br> E.g. eci, authenticationValue etc
    Merchant_Backend->>Card_Payments_API: customerInitiatedTransactions request
    Note right of Merchant_Backend: Includes token, 3DS details and optional cvc session
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```