When the user selects FIDO authentication to confirm a transaction, the App SDK displays the default transaction confirmation dialog.
This confirmation dialog appears only for transactions that do not use 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
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.
// 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.
TransactionUIFactory.setInstance(new CustomTransactionUIFactory());