mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-23 22:46:49 +01:00
89d294524a
* Checkout v2: Clicking QR code copies full payment URI Before it copied only the destination value (Bitcoin address or Lightning BOLT11). This didn't include the BOLT11 in case of the unified QR code. Now it will copy the full payment URI, which is the same as the QR represents: - Unified: `bitcoin:ADDRESS?amount=AMOUNT&lightning=BOLT11` - Bitcoin: `bitcoin:ADDRESS?amount=AMOUNT` - Lightning: `lightning:BOLT11` Fixes #5625. * Test fix
54 lines
2.8 KiB
Text
54 lines
2.8 KiB
Text
@using BTCPayServer.BIP78.Sender
|
|
@using BTCPayServer.Components.TruncateCenter
|
|
@using BTCPayServer.Abstractions.TagHelpers
|
|
@model BTCPayServer.Models.InvoicingModels.PaymentModel
|
|
|
|
<template id="bitcoin-method-checkout-template">
|
|
@await Component.InvokeAsync("UiExtensionPoint", new {location = "checkout-v2-bitcoin-pre-content", model = Model})
|
|
<div class="payment-box">
|
|
<div v-if="model.invoiceBitcoinUrlQR" class="qr-container" :data-qr-value="model.invoiceBitcoinUrlQR" :data-clipboard="model.invoiceBitcoinUrl" data-clipboard-confirm-element="#Address_@Model.PaymentMethodId [data-clipboard]">
|
|
<div>
|
|
<qrcode :value="model.invoiceBitcoinUrlQR" tag="div" :options="qrOptions" />
|
|
</div>
|
|
<img class="qr-icon" :src="model.cryptoImage" :alt="model.paymentMethodName"/>
|
|
</div>
|
|
<div v-if="model.btcAddress" class="input-group mt-3">
|
|
<div class="form-floating" id="Address_@Model.PaymentMethodId">
|
|
<vc:truncate-center text="model.btcAddress" is-vue="true" padding="15" elastic="true" classes="form-control-plaintext" />
|
|
<label v-t="{ path: 'address', args: { paymentMethod: model.paymentMethodName }}"></label>
|
|
</div>
|
|
</div>
|
|
<div v-if="lightning" class="input-group mt-3">
|
|
<div class="form-floating" id="Lightning_@Model.PaymentMethodId">
|
|
<vc:truncate-center text="lightning" is-vue="true" padding="15" elastic="true" classes="form-control-plaintext" />
|
|
<label v-t="'lightning'"></label>
|
|
</div>
|
|
</div>
|
|
<a v-if="model.invoiceBitcoinUrl && model.showPayInWalletButton" class="btn btn-primary rounded-pill w-100 mt-4" id="PayInWallet" target="_blank"
|
|
:href="model.invoiceBitcoinUrl" :title="$t(hasPayjoin ? 'BIP21 payment link with PayJoin support' : 'BIP21 payment link')" v-t="'pay_in_wallet'"></a>
|
|
@await Component.InvokeAsync("UiExtensionPoint", new {location = "checkout-v2-bitcoin-post-content", model = Model})
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
Vue.component('BitcoinLikeMethodCheckout', {
|
|
props: ['model', 'nfcSupported', 'nfcScanning', 'nfcErrorMessage'],
|
|
template: "#bitcoin-method-checkout-template",
|
|
components: {
|
|
qrcode: VueQrcode
|
|
},
|
|
data () {
|
|
// currentTab is needed for backwards-compatibility with old plugin versions
|
|
return { currentTab: undefined };
|
|
},
|
|
computed: {
|
|
hasPayjoin () {
|
|
return this.model.invoiceBitcoinUrl.indexOf('@PayjoinClient.BIP21EndpointKey=') !== -1;
|
|
},
|
|
lightning () {
|
|
const match = this.model.invoiceBitcoinUrl.match(/[&?]lightning=(.*)&?/i);
|
|
return match ? match[1].toLowerCase() : null;
|
|
}
|
|
}
|
|
});
|
|
</script>
|