---
title: "Replacing the transaction confirmation UI for Web"
slug: "dpo-replace-web-app-sdk-ui-transaction-confirmation"
updated: 2026-10-27T20:13:31Z
published: 2026-10-27T20:13:31Z
canonical: "docs.onespan.com/dpo-replace-web-app-sdk-ui-transaction-confirmation"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onespan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Replacing the transaction confirmation UI for Web

When the user selects FIDO authentication to confirm a transaction, the App SDK displays the default transaction confirmation dialog.

![](https://cdn.document360.io/038f59a7-abd0-4c14-9de7-3434d28b49fd/Images/Documentation/Screenshot 2026-02-24 at 1.50.25 PM.png?sv=2026-02-06&spr=https&st=2026-10-29T01%3A41%3A19Z&se=2026-10-29T02%3A41%3A19Z&sr=c&sp=r&sig=%2FbvBSnnasYNd1GNWlUKVdZT8Lc2eMZI1QTy28AU%2BSOM%3D)

This confirmation dialog appears only for transactions that do not use [Secure Payment Confirmation](/dpoa/docs/s3suite94-web-implementing-authentication-in-your-web-app-1#invoking-secure-payment-confirmation) (SPC). For SPC transactions, the browser handles the UI.

There are two ways to modify this user interface: you can either suppress its display or replace it.

### Suppress the display of the transaction confirmation dialog

```javascript
To suppress the display, pass an extension in transOpts when calling AdaptiveUI.transact().
var extension = {
    "id": "noknok.showTransaction",
    "data": "false",
    "fail_if_unknown": false
}
var extensions = [];
extensions.push(extension);
var transOpts = {
    "extensions": extensions,
    ...
}
var ui = new AdaptiveUI(appSdkConfig);
ui.transact(sessionData, transactionID, transOpts);
```

## Replace the transaction confirmation dialog

To customize the user interface for transaction confirmation, implement the ITransactionUI and the TransactionUIFactory interfaces.

```javascript
// ITransactionUI implementation displays the confirmation UI
// to the user and returns the result of the user's action.
var CustomTransactionUI = function() {
  this.openUI = function(transactionContent, contentType) {
      // The promise returned from this method should only resolve.
      return new Promise(function(resolve) {
          // Present the confirmation UI
          if(<user authorizes the transaction>) {
              // Resolve with success.
              resolve(Outcome.SUCCESS);
          } else {
              // Resolve with a canceled error.
              resolve(Outcome.CANCELED);
          }
      });
   }
}
startcode// TransactionUIFactory implementation handles creation of
// the ITransactionUI instance.
var CustomTransactionUIFactory = function() {
    this.createTransactionUIInstance = function() {
        // Create and return a new instance of the custom UI.
        return new CustomTransactionUI();
    }
}
```

Finally, your app initializes the SDK to use your custom UI factory when transaction confirmation is needed.

```javascript
TransactionUIFactory.setInstance(new CustomTransactionUIFactory());
```