1 files changed, 9 insertions, 8 deletions
diff --git a/packages/backend/src/pages/RequestPayment.tsx b/packages/backend/src/pages/RequestPayment.tsx
index 5f5032a..6b2b84c 100644
--- a/packages/backend/src/pages/RequestPayment.tsx
+++ b/packages/backend/src/pages/RequestPayment.tsx
@@ -22,9 +22,9 @@ import { Fragment, h, render, VNode } from 'preact';
 import { render as renderToString } from 'preact-render-to-string';
 import { useEffect } from 'preact/hooks';
 import { Footer } from '../components/Footer';
-import { QR } from '../components/QR';
 import "../css/pure-min.css";
 import "../css/style.css";
+import { QR } from '../components/QR';
 
 
 /**
@@ -48,11 +48,12 @@ import "../css/style.css";
 interface Props {
   payURI?: string,
   order_status_url?: string,
+  qr_code?: string,
 }
 
 function Head({ order_summary }: { order_summary?: string }): VNode {
   return <Fragment>
-    <meta http-equiv="content-type" content="text/html; UTF-8" />
+    <meta charSet="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <noscript>
       <meta http-equiv="refresh" content="1" />
@@ -61,7 +62,7 @@ function Head({ order_summary }: { order_summary?: string }): VNode {
   </Fragment>
 }
 
-export function RequestPayment({ payURI, order_status_url }: Props): VNode {
+export function RequestPayment({ payURI, qr_code, order_status_url }: Props): VNode {
   useEffect(() => {
     const longpollDelayMs = 60 * 1000;
     let checkUrl: URL;
@@ -134,9 +135,7 @@ export function RequestPayment({ payURI, order_status_url }: Props): VNode {
         <p>
           Scan this QR code with your mobile wallet:
         </p>
-        <div class="qr">
-          {payURI ? <QR text={payURI} /> : `{{{ taler_pay_qrcode_svg }}}`}
-        </div>
+        <div class="qr" dangerouslySetInnerHTML={{ __html: qr_code ? qr_code : `{{{ taler_pay_qrcode_svg }}}` }} />
         <p>
           <a class="pure-button pure-button-active success" href={payURI ? payURI : `{{ taler_pay_uri }}`}>
             Or open your Taller wallet
@@ -161,11 +160,13 @@ export function mount(): void {
       render(<Head order_summary={os} />, document.head);
     }
 
-    const pu = fromLocation.get('pay_uri') || undefined;
+    const uri = fromLocation.get('pay_uri') || undefined;
     const osu = fromLocation.get('order_status_url') || undefined;
+    const qr_code = uri ? renderToString(<QR text={uri} />) : undefined;
 
     render(<RequestPayment
-      payURI={pu} order_status_url={osu}
+      payURI={uri} order_status_url={osu}
+      qr_code={qr_code}
     />, document.body);
   } catch (e) {
     console.error("got error", e);