diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/components/PaymentButtons.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/PaymentButtons.tsx | 36 |
1 files changed, 26 insertions, 10 deletions
diff --git a/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx b/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx index d85a2c78e..8cb1c49dd 100644 --- a/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx +++ b/packages/taler-wallet-webextension/src/components/PaymentButtons.tsx @@ -21,6 +21,8 @@ import { PreparePayResult, PreparePayResultType, TranslatedString, + parsePayUri, + stringifyPayUri, } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -32,6 +34,8 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { Button } from "../mui/Button.js"; import { ButtonHandler } from "../mui/handlers.js"; import { assertUnreachable } from "../utils/index.js"; +import { useBackendContext } from "../context/backend.js"; +import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; interface Props { payStatus: PreparePayResult; @@ -50,8 +54,6 @@ export function PaymentButtons({ }: Props): VNode { const { i18n } = useTranslationContext(); if (payStatus.status === PreparePayResultType.PaymentPossible) { - const privateUri = `${uri}&n=${payStatus.noncePriv}`; - return ( <Fragment> <section> @@ -66,7 +68,7 @@ export function PaymentButtons({ </i18n.Translate> </Button> </section> - <PayWithMobile uri={privateUri} /> + <PayWithMobile uri={uri} /> </Fragment> ); } @@ -125,7 +127,6 @@ export function PaymentButtons({ default: assertUnreachable(reason); } - const uriPrivate = `${uri}&n=${payStatus.noncePriv}`; return ( <Fragment> @@ -141,7 +142,7 @@ export function PaymentButtons({ <i18n.Translate>Get digital cash</i18n.Translate> </Button> </section> - <PayWithMobile uri={uriPrivate} /> + <PayWithMobile uri={uri} /> </Fragment> ); } @@ -159,7 +160,6 @@ export function PaymentButtons({ /> )} </section> - {!payStatus.paid && <PayWithMobile uri={uri} />} </Fragment> ); } @@ -169,20 +169,36 @@ export function PaymentButtons({ function PayWithMobile({ uri }: { uri: string }): VNode { const { i18n } = useTranslationContext(); + const api = useBackendContext(); - const [showQR, setShowQR] = useState<boolean>(false); + const payUri = parsePayUri(uri); + const [showQR, setShowQR] = useState<string | undefined>(undefined); + async function sharePrivatePaymentURI() { + if (!payUri) { + return; + } + if (!showQR) { + const result = await api.wallet.call(WalletApiOperation.SharePayment, { + merchantBaseUrl: payUri.merchantBaseUrl, + orderId: payUri.orderId, + }); + setShowQR(result.privatePayUri); + } else { + setShowQR(undefined); + } + } return ( <section> - <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}> + <LinkSuccess upperCased onClick={sharePrivatePaymentURI}> {!showQR ? i18n.str`Pay with a mobile phone` : i18n.str`Hide QR`} </LinkSuccess> {showQR && ( <div> - <QR text={uri} /> + <QR text={showQR} /> <i18n.Translate> Scan the QR code or - <a href={uri}> + <a href={showQR}> <i18n.Translate>click here</i18n.Translate> </a> </i18n.Translate> |