lightning payment qr code clickable (#1579) (#1602)

Co-authored-by: ithiame <[email protected]>
B2Bitcoin · Nov 30, 2024 · 734dacd · 734dacd
1 parent 8c67a3a
commit 734dacd
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 20 deletions.
diff --git a/src/lib/types/Order.ts b/src/lib/types/Order.ts
@@ -12,6 +12,7 @@ import type { User } from './User';
 import { getWeek, getWeekOfMonth } from 'date-fns';
 import type { Ticket } from './Ticket';
 import type { OrderLabel } from './OrderLabel';
+import { toBitcoins } from '$lib/utils/toBitcoins';
 
 export type OrderPaymentStatus = 'pending' | 'paid' | 'expired' | 'canceled';
 
@@ -378,3 +379,23 @@ export function invoiceNumberVariables(
 		...(dates.paymentPaidOrCreated && dateVars('paymentDynamic', dates.paymentPaidOrCreated))
 	};
 }
+
+export function bitcoinPaymentQrCodeString(
+	paymentAddress: string,
+	paymentAmount: number,
+	paymentCurrency: Currency
+) {
+	return `bitcoin:${paymentAddress}?amount=${toBitcoins(paymentAmount, paymentCurrency)
+		.toLocaleString('en-US', { maximumFractionDigits: 8 })
+		.replaceAll(',', '')}`;
+}
+
+export function lightningPaymentQrCodeString(
+	paymentAddress: string,
+	paymentAmount: number,
+	paymentCurrency: Currency
+) {
+	return `lightning:${paymentAddress}?amount=${toBitcoins(paymentAmount, paymentCurrency)
+		.toLocaleString('en-US', { maximumFractionDigits: 8 })
+		.replaceAll(',', '')}`;
+}
diff --git a/src/lib/utils/bitcoinPaymentQr.ts b/src/lib/utils/bitcoinPaymentQr.ts
diff --git a/src/routes/(app)/order/[id]/+page.svelte b/src/routes/(app)/order/[id]/+page.svelte
@@ -7,14 +7,18 @@
 	import IconCopy from '~icons/ant-design/copy-outlined';
 	import IconCheckmark from '~icons/ant-design/check-outlined';
 	import { useI18n } from '$lib/i18n';
-	import { FAKE_ORDER_INVOICE_NUMBER, orderAmountWithNoPaymentsCreated } from '$lib/types/Order';
+	import {
+		bitcoinPaymentQrCodeString,
+		FAKE_ORDER_INVOICE_NUMBER,
+		lightningPaymentQrCodeString,
+		orderAmountWithNoPaymentsCreated
+	} from '$lib/types/Order';
 	import { UrlDependency } from '$lib/types/UrlDependency';
 	import { CUSTOMER_ROLE_ID, POS_ROLE_ID } from '$lib/types/User.js';
 	import { differenceInMinutes } from 'date-fns';
 	import { onMount } from 'svelte';
 	import IconSumupWide from '$lib/components/icons/IconSumupWide.svelte';
 	import CmsDesign from '$lib/components/CmsDesign.svelte';
-	import { bitcoinPaymentQrCodeString } from '$lib/utils/bitcoinPaymentQr.js';
 	import Picture from '$lib/components/Picture.svelte';
 	import IconStripe from '$lib/components/icons/IconStripe.svelte';
 
@@ -276,11 +280,19 @@
 
 						{#if payment.status === 'pending'}
 							{#if payment.method === 'lightning' || payment.method === 'card'}
-								<img
-									src="{$page.url.pathname}/payment/{payment.id}/qrcode"
-									class="w-96 h-96"
-									alt="QR code"
-								/>
+								<a
+									href={lightningPaymentQrCodeString(
+										payment.address ?? '',
+										payment.price.amount,
+										payment.price.currency
+									)}
+								>
+									<img
+										src="{$page.url.pathname}/payment/{payment.id}/qrcode"
+										class="w-96 h-96"
+										alt="QR code"
+									/></a
+								>
 							{/if}
 							{#if payment.method === 'bitcoin' && payment.address}
 								<span class="body-hyperlink font-light italic">{t('order.clickQR')}</span>

diff --git a/src/routes/(app)/order/[id]/payment/[paymentId]/qrcode/+server.ts b/src/routes/(app)/order/[id]/payment/[paymentId]/qrcode/+server.ts
@@ -1,5 +1,5 @@
 import { collections } from '$lib/server/database';
-import { bitcoinPaymentQrCodeString } from '$lib/utils/bitcoinPaymentQr';
+import { bitcoinPaymentQrCodeString } from '$lib/types/Order';
 import { error } from '@sveltejs/kit';
 import qrcode from 'qrcode';