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

# Sequence diagrams - stored card using a Worldpay Token

## Customer Initiated Transactions (CITs)

Store card details for future CITs.

### Creating a stored card

Creating a token, authentication using 3DS and using the token as part of a card payment.

API only (includes 3DS)
For use with future Customer Initiated Payments (CIT)

Using:

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



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Tokens_API
    participant 3DS_API
    participant Card_Payments_API
    participant Issuers
    Browser-&gt;&gt;Merchant_Frontend: Click Pay
    Merchant_Frontend-&gt;&gt;Merchant_Backend: Pay 
    Merchant_Backend-&gt;&gt;Tokens_API: Tokens request
    Tokens_API-&gt;&gt;Merchant_Backend: Tokens response
    Merchant_Backend-&gt;&gt;3DS_API: deviceDataInitialization request
    Note left of 3DS_API: Includes Worldpay Token 
    3DS_API-&gt;&gt;Merchant_Backend: deviceDataInitialization response
    Merchant_Backend-&gt;&gt;Merchant_Frontend: DeviceData - BIN/JWT/URL
    Merchant_Frontend-&gt;&gt;Browser: 3DS Device Data form
    Browser--&gt;&gt;Issuers: Form POST
    Issuers--&gt;&gt;Browser: PostMessage: dfReferenceId
    Merchant_Backend-&gt;&gt;3DS_API: authentication request
    Note left of 3DS_API: Includes Worldpay Token 
    3DS_API-&gt;&gt;Merchant_Backend: Authentication response
    Merchant_Backend-&gt;&gt;Merchant_Frontend: Challenge JWT/URL
    Merchant_Frontend-&gt;&gt;Browser: 3DS challenge form
    Browser--&gt;&gt;Issuers: Form POST
    Issuers--&gt;&gt;Merchant_Backend: `returnUrl` specified in authentication request
    Note right of Merchant_Frontend: Update or close challenge window on website
    Merchant_Backend-&gt;&gt;3DS_API: Verification request
    3DS_API-&gt;&gt;Merchant_Backend: Verification response
    Note right of Merchant_Frontend: Apply authentication details in payment&lt;br&gt; E.g. eci, authenticationValue etc
    Merchant_Backend-&gt;&gt;Card_Payments_API: customerInitiatedTransactions request
    Note over Merchant_Backend,Card_Payments_API: Set `customerAgreement.type: cardOnFile` &lt;br&gt; `customerAgreement.storedCardUsage: first`
    Note right of Merchant_Backend: Includes token 
    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 (includes 3DS)
Using the Checkout SDK, for use with future Customer Initiated Payments (CITs).

Using:

1. [Checkout SDK](/products/checkout/)
2. [Verified Tokens API](/products/verified-tokens/) - for Worldpay Token creation
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
    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 left of Verified_Token_API: Includes session 
    Verified_Token_API->>Merchant_Backend: Verified token response
    Note right of Merchant_Backend: Worldpay Token returned  
    Merchant_Backend->>3DS_API: deviceDataInitialization request
    Note left of 3DS_API: Includes Worldpay 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 left of 3DS_API: Includes Worldpay 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 over Merchant_Backend,Card_Payments_API: Set `customerAgreement.type: cardOnFile` <br> `customerAgreement.storedCardUsage: first`
    Note right of Merchant_Backend: Includes Worldpay Token 
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

### Using a stored card (CIT)

Using a token with 3DS authentication and using the token as part of a card payment.

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
    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 authentication details 
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

## Merchant Initiated Transactions

### Setup recurring customer agreement

Request 3DS authentication with the challenge set as mandated for SCA compliance. Send a card payments Customer Initiated Transaction (CIT) request.

API only (includes 3DS)
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
    Note over Merchant_Backend,3DS_API: Set `challenge.preference.challengeMandated` (if in mandated region)
    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 over Merchant_Backend,Card_Payments_API: Set `customerAgreement.type: subscription` <br> `customerAgreement.storedCardUsage: first`
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

Using Checkout SDK (includes 3DS)
Using:

1. [Checkout SDK](/products/checkout/)
2. [Verified Tokens API](/products/verified-tokens/) - for Worldpay Token creation
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
    participant Issuers
    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 left of Verified_Token_API: Includes session 
    Verified_Token_API->>Merchant_Backend: Verified token response
    Note right of Merchant_Backend: Worldpay Token returned  
    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
    Note over Merchant_Backend,3DS_API: Set `challenge.preference.challengeMandated` (if in mandated region)
    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 over Merchant_Backend,Card_Payments_API: Set `customerAgreement.type: subscription` <br> `customerAgreement.storedCardUsage: first`
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

#### Subsequent Merchant Initiated Transaction (MIT)

Send an MIT request for subsequent recurring transactions.

Using:

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



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Card_Payments_API
    participant Issuers
    Browser->>Merchant_Frontend: Click Pay
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>Card_Payments_API: merchantInitiatedTransactions request
    Note over Merchant_Backend,Card_Payments_API: Set `customerAgreement.type: subscription` <br> `customerAgreement.storedCardUsage: subsequent`
    Card_Payments_API->>Merchant_Backend: merchantInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```