btcpayserver/BTCPayServer/Views/Shared/Bitcoin/BitcoinLikeMethodCheckout-v2.cshtml
Andrew Camilleri 85513aa5c3
Make NFC built in (#4541)
* Make NFC built int

* support checkout v2

* uninstall old plugin

* fix lnurl in unified checkout

* fix tests

* fix tests

* fix old checkout unified qr

* clean up and make nfc submission more sturdy

* support topup invoices for lnurlw

* fix test

* Payment URI fixes

* Fix LNURL exclusion cases

* UI updates

* Adapt test

---------

Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
2023-02-08 15:47:38 +09:00

55 lines
3 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-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>