btcpayserver/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout-v2.cshtml
d11n 753ffd401b
BIP21 + LNURL fix (#4616)
In case of the unified invoice, the LNURL wasn't correct — with this change we are simply reusing th one that was issued on invoice creation instead of generating it anew on the fly.

Also fixes missing uppercasing for the QR code in case of non-unified QR.
And removes the `lightning:` scheme from the LNURL that's displayed to the user (unifies it with what we do for Onchain and Lightning)
2023-02-10 11:23:48 +09:00

55 lines
3.1 KiB
Text

@using BTCPayServer.BIP78.Sender
@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.btcAddress" data-clipboard-confirm-element="QR_Text_@Model.PaymentMethodId">
<div>
<qrcode :value="model.invoiceBitcoinUrlQR" tag="div" :options="qrOptions" />
</div>
<img class="qr-icon" :src="model.cryptoImage" :alt="model.paymentMethodName"/>
<small class="qr-text" id="QR_Text_@Model.PaymentMethodId" v-t="'qr_text'"></small>
</div>
<div v-if="model.btcAddress" class="input-group mt-3">
<div class="form-floating">
<input id="Address_@Model.PaymentMethodId" class="form-control-plaintext" readonly="readonly" :value="model.btcAddress">
<label for="Address_@Model.PaymentMethodId" v-t="{ path: 'address', args: { paymentMethod: model.paymentMethodName }}"></label>
</div>
<button type="button" class="btn btn-link" data-clipboard-target="#Address_@Model.PaymentMethodId" :data-clipboard-confirm="$t('copy_confirm')" v-t="'copy'"></button>
</div>
<div v-if="lightning" class="input-group mt-3">
<div class="form-floating">
<input id="Lightning_@Model.PaymentMethodId" class="form-control-plaintext" readonly="readonly" :value="lightning" />
<label for="Lightning_@Model.PaymentMethodId" v-t="'lightning'"></label>
</div>
<button type="button" class="btn btn-link" data-clipboard-target="#Lightning_@Model.PaymentMethodId" :data-clipboard-confirm="$t('copy_confirm')" v-t="'copy'"></button>
</div>
<a v-if="model.invoiceBitcoinUrl" class="btn btn-primary rounded-pill w-100 mt-4" target="_top"
: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"],
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>