1 files changed, 12 insertions, 3 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
index f0e23b49b..471685bf1 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
@@ -22,13 +22,14 @@ import { PaymentButtons } from "../../components/PaymentButtons.js";
 import { SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
+import { getAmountWithFee, InvoiceDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
 export function ReadyView(
   state: State.Ready | State.NoBalanceForCurrency | State.NoEnoughBalance,
 ): VNode {
   const { i18n } = useTranslationContext();
-  const { summary, amount, expiration, uri, status, payStatus } = state;
+  const { summary, effective, raw, expiration, uri, status, payStatus } = state;
   return (
     <WalletAction>
       <LogoHeader />
@@ -37,7 +38,15 @@ export function ReadyView(
       </SubTitle>
       <section style={{ textAlign: "left" }}>
         <Part title={i18n.str`Subject`} text={<div>{summary}</div>} />
-        <Part title={i18n.str`Amount`} text={<Amount value={amount} />} />
+        <Part title={i18n.str`Amount`} text={<Amount value={effective} />} />
+        <Part
+          title={i18n.str`Details`}
+          text={
+            <InvoiceDetails
+              amount={getAmountWithFee(effective, raw, "debit")}
+            />
+          }
+        />
         <Part
           title={i18n.str`Valid until`}
           text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />}
@@ -45,7 +54,7 @@ export function ReadyView(
         />
       </section>
       <PaymentButtons
-        amount={amount}
+        amount={raw}
         payStatus={payStatus}
         uri={uri}
         payHandler={status === "ready" ? state.accept : undefined}