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

# Sequence diagrams - stored card using a Network Token

## Customer Initiated Transactions (CITs)

You can create the Network Payment Token (NPT) either before the initial plain card or Worldpay token payment is made, or after the payment. Examples of both are below:

### Creating an NPT (CIT) - before payment

Create an NPT before the payment using either API only or the Checkout SDK.

As NPT creation is not guaranteed you must have a fallback to a Worldpay Token.

Using Checkout SDK
Card payment via the Checkout Web SDK, including the creation of a verified token and a Network Payment Token (before payment).

Using:

1. [Checkout SDK](/products/checkout/)
2. [Verified Token API](/products/verified-tokens/) - for Worldpay Token creation
3. [Tokens API](/products/tokens/) - to convert the Worldpay token to a network token
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 Tokens_API
    participant 3DS_API
    participant Card_Payments_API
    Note over Merchant_Frontend: Checkout JS added to page 
    Browser-&gt;&gt;Merchant_Frontend: Click Pay
    Merchant_Frontend-&gt;&gt;Checkout_Sessions: Create session
    Checkout_Sessions-&gt;&gt;Merchant_Frontend: Return session 
    Merchant_Frontend-&gt;&gt;Merchant_Backend: Pay 
    Merchant_Backend-&gt;&gt;Verified_Token_API: Verified token request
    Note left of Verified_Token_API: Includes session 
    Verified_Token_API-&gt;&gt;Merchant_Backend: Verified token response
    Note right of Merchant_Backend: Worldpay Token returned 
    Merchant_Backend-&gt;&gt;Tokens_API: Create NPT
    Note left of Tokens_API: Includes Worldpay Token
    Tokens_API-&gt;&gt;Merchant_Backend: Create NPT response
    Note right of Merchant_Backend: Network Payment Token (NPT) number returned 
    Merchant_Backend-&gt;&gt;Tokens_API: Provision cryptogram for NPT
    Note left of Tokens_API: Includes Network Payment Token (NPT) number
    Tokens_API-&gt;&gt;Merchant_Backend: Provision cryptogram response
    Note right of Merchant_Backend: Cryptogram for Network Payment Token (NPT) returned 
    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` / Includes Network Payment Token (NPT) number and cryptogram
    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)
Card payment via the Checkout Web SDK and 3DS authentication, including the creation of a verified token and a Network Payment Token (before payment).

Using:

1. [Checkout SDK](/products/checkout/)
2. [Verified Tokens API](/products/verified-tokens/) - covert the session in to a Worldpay Token
3. [Tokens API](/products/tokens/) - to convert the Worldpay token to an NPT
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 Tokens_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 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->>Tokens_API: Create NPT
    Note left of Tokens_API: Includes Worldpay Token
    Tokens_API->>Merchant_Backend: Create NPT response
    Note right of Merchant_Backend: Network Payment Token (NPT) number returned 
    Note left of Merchant_Backend: If NPT creation fails/is slow/not supported use the Worldpay Token instead <br> Proceed to the 3DS steps
    Merchant_Backend->>Tokens_API: Provision cryptogram for NPT
    Note left of Tokens_API: Includes Network Payment Token (NPT) number
    Tokens_API->>Merchant_Backend: Provision cryptogram response
    Note right of Merchant_Backend: Cryptogram for Network Payment Token (NPT) returned 
    Merchant_Backend->>3DS_API: deviceDataInitialization request
    Note left of 3DS_API: Includes Network Payment Token (NPT) number
    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 Network Payment Token (NPT) number
    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`, `customerAgreement.storedCardUsage: first` <br> Includes Network Payment Token (NPT) number and cryptogram
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

API only
Card payment including the creation of a Network Payment Token (before payment).

Using:

1. [Tokens API](/products/tokens/) - to create an NPT (from plain card or existing worldpay token)
2. [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
    Browser->>Merchant_Frontend: Click Pay
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>Tokens_API: Create NPT
    Note left of Tokens_API: Using Plain card or Worldpay Token
    Tokens_API->>Merchant_Backend: Create NPT response
    Note right of Merchant_Backend: Network Payment Token (NPT) number returned 
    Note left of Merchant_Backend: Note: If NPT creation fails, use Tokens API to create a Worldpay Token
    Merchant_Backend->>Tokens_API: Provision cryptogram for NPT
    Note left of Tokens_API: Includes Network Payment Token (NPT) number
    Tokens_API->>Merchant_Backend: Provision cryptogram response
    Note right of Merchant_Backend: Cryptogram for Network Payment Token (NPT) returned 
    Merchant_Backend->>Card_Payments_API: customerInitiatedTransactions request
    Note over Merchant_Backend,Card_Payments_API:  Set `customerAgreement.type: cardOnFile`, `customerAgreement.storedCardUsage: first` <br> Includes Network Payment Token (NPT) number and cryptogram
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

API only (includes 3DS)
Card payment with 3DS authentication including the creation of a Network Payment Token (before payment).

Using:

1. [Tokens API](/products/tokens/) - to create an NPT (from plain card or existing worldpay token)
2. [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
    Browser->>Merchant_Frontend: Click Pay
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>Tokens_API: Create NPT
    Note left of Tokens_API: Using Plain card or Worldpay Token
    Tokens_API->>Merchant_Backend: Create NPT response
    Note left of Merchant_Backend: If NPT creation fails, use Tokens API to create a Worldpay Token
    Note right of Merchant_Backend: Network Payment Token (NPT) number returned 
    Merchant_Backend->>Tokens_API: Provision Cryptogram for NPT
    Note left of Tokens_API: Includes Network Payment Token (NPT) number
    Tokens_API->>Merchant_Backend: Provision cryptogram response
    Note right of Merchant_Backend: Cryptogram for Network Payment Token (NPT) returned 
    Merchant_Backend->>3DS_API: deviceDataInitialization request
    Note left of 3DS_API: Includes Network Payment Token (NPT) number
    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 Network Payment Token (NPT) number
    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`, `customerAgreement.storedCardUsage: first` <br> Includes Network Payment Token (NPT) number and cryptogram
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

### Creating an NPT (CIT) - after payment

Create an NPT after the payment using either API only or the Checkout SDK.

Using Checkout SDK
Card payment via the Checkout Web SDK, including the creation of a verified token and a Network Payment Token (after payment).

Using:

1. [Checkout SDK](/products/checkout/)
2. [Verified Tokens API](/products/verified-tokens/) - for Worldpay Token creation
3. [Card Payments API](/products/card-payments/)
4. [Tokens API](/products/tokens/) - to convert the Worldpay token to NPT



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Checkout_Sessions
    participant Verified_Token_API
    participant Tokens_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 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->>Card_Payments_API: customerInitiatedTransactions request
    Note over Merchant_Backend,Card_Payments_API:  Set `customerAgreement.type: cardOnFile`, `customerAgreement.storedCardUsage: first` <br> Includes Worldpay Token
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
    Merchant_Backend->>Tokens_API: Create NPT
    Note left of Tokens_API: Includes Worldpay Token
    Tokens_API->>Merchant_Backend: Create NPT response
    Note right of Merchant_Backend: Network Payment Token (NPT) number returned
```

Using Checkout SDK (includes 3DS)
Card payment via the Checkout Web SDK, including the creation of a verified token and an Network Payment Token (after payment). Also uses 3DS authentication.

Using:

1. [Checkout SDK](/products/checkout/)
2. [Verified Tokens API](/products/verified-tokens/) - covert the session in to a Worldpay Token
3. [3DS API](/products/3ds/)
4. [Card Payments API](/products/card-payments/)
5. [Tokens API](/products/tokens/) - to convert the Worldpay token to an NPT



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Checkout_Sessions
    participant Verified_Token_API
    participant Tokens_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 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`, `customerAgreement.storedCardUsage: first` <br> Includes Worldpay Token
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
    Merchant_Backend->>Tokens_API: Create NPT
    Note left of Tokens_API: Includes Worldpay Token
    Tokens_API->>Merchant_Backend: Create NPT response
    Note right of Merchant_Backend: Network Payment Token (NPT) number returned
```

API only
Card payment including the creation of a Network Payment Token (after payment).

Using:

1. [Card Payments API](/products/card-payments/)
2. [Tokens API](/products/tokens/) - to create the NPT



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Tokens_API
    participant Card_Payments_API
    Browser->>Merchant_Frontend: Click Pay
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>Card_Payments_API: customerInitiatedTransactions request
    Note left of Card_Payments_API: Using plain card
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
    Merchant_Backend->>Tokens_API: Create NPT
    Note left of Tokens_API: Using plain card
    Tokens_API->>Merchant_Backend: Create NPT response
    Note right of Merchant_Backend: Network Payment Token (NPT) number returned
```

API only (includes 3DS)
Card payment with 3DS authentication including the creation of a Network Payment Token (after payment).

Using:

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



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Tokens_API
    participant Card_Payments_API
    Browser->>Merchant_Frontend: Click Pay
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>3DS_API: deviceDataInitialization request
    Note left of 3DS_API: Using plain card
    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: Using plain card
    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`, `customerAgreement.storedCardUsage: first` <br> Using plain card
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
    Merchant_Backend->>Tokens_API: Create NPT
    Note left of Tokens_API: Using plain card
    Tokens_API->>Merchant_Backend: Create NPT response
    Note right of Merchant_Backend: Network Payment Token (NPT) number returned
```

### Using an NPT (CIT)

* The NPT cryptogram and number can be from a different Payment Service Provider.
* Worldpay can only provision cryptograms for NPTs it has originally created.


Using an NPT
Using an existing NPT to provision a new cryptogram and make the payment

Using:

1. [Tokens API](/products/tokens/) - to provision the NPT cryptogram
2. [Card Payments API](/products/card-payments/)



```mermaid

sequenceDiagram
    participant Browser
    participant Merchant_Frontend
    participant Merchant_Backend
    participant Tokens_API
    participant Card_Payments_API
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>Tokens_API: Provision Cryptogram for NPT
    Note left of Tokens_API: Includes Network Payment  (NPT) number
    Tokens_API->>Merchant_Backend: Provision cryptogram response
    Note right of Merchant_Backend: Cryptogram for Network Payment Token (NPT) returned 
    Merchant_Backend->>Card_Payments_API: customerInitiatedTransactions request
    Note over Merchant_Backend,Card_Payments_API:  Set `customerAgreement.type: cardOnFile`, `customerAgreement.storedCardUsage: subsequent` <br> Includes Network Payment Token (NPT) number and cryptogram
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

Using an NPT (includes 3DS)
Using an existing NPT to provision a new cryptogram, request 3DS authentication and make the payment

Using:

1. [Tokens API](/products/tokens/) - to provision the NPT cryptogram
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
    Merchant_Frontend->>Merchant_Backend: Pay 
    Merchant_Backend->>Tokens_API: Provision cryptogram for NPT
    Note left of Tokens_API: Includes Network Payment  (NPT) number
    Tokens_API->>Merchant_Backend: Provision cryptogram response
    Note right of Merchant_Backend: Cryptogram for Network Payment Token (NPT) returned 
    Merchant_Backend->>3DS_API: deviceDataInitialization request
    Note left of 3DS_API: Includes Network Payment Token (NPT) number 
    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 Network Payment Token (NPT) number
    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`, `customerAgreement.storedCardUsage: subsequent` <br> Includes Network Payment Token (NPT) number and cryptogram
    Card_Payments_API->>Merchant_Backend: customerInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```

## Merchant Initiated Transactions

Subsequent Merchant Initiated Transaction (MIT)
Using an existing NPT to make a subsequent payment (MIT)

An NPT cryptogram is not required for Merchant Initiated 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`, `customerAgreement.storedCardUsage: subsequent` <br>Includes Network Payment Token (NPT) number
    Card_Payments_API->>Merchant_Backend: merchantInitiatedTransactions response
    Merchant_Backend->>Card_Payments_API: Settlement request
    Card_Payments_API->>Merchant_Backend: Settlement response
```