mirror of
https://github.com/btcpayserver/btcpayserver.git
synced 2025-02-24 06:47:50 +01:00
3805b7f287
* Opt-in for new checkout * Update wording * Create invoice view update * Remove jQuery from checkout testing code * Checkout v2 basics * WIP * WIP 2 * Updates and fixes * Updates * Design updates * More design updates * Cheating and JS fixes * Use checkout form id whenever invoices get created * Improve email form handling * Cleanups * Payment method exclusion cases for Lightning and LNURL TODO: Cases and implementation need to be discussed * Introduce CheckoutType in API and replace UseNewCheckout in backend Co-authored-by: nicolas.dorier <nicolas.dorier@gmail.com>
83 lines
3.9 KiB
Text
83 lines
3.9 KiB
Text
@model PaymentModel
|
|
|
|
<div id="Checkout-Cheating" class="mt-5" v-cloak>
|
|
<p class="alert alert-success text-break" v-if="successMessage">{{ successMessage }}</p>
|
|
<p class="alert alert-danger text-break" v-if="errorMessage">{{ errorMessage }}</p>
|
|
<form id="test-payment" :action="`/i/${invoiceId}/test-payment`" method="post" class="my-5" v-on:submit.prevent="pay" v-if="!isPaid">
|
|
<input name="CryptoCode" type="hidden" value="@Model.CryptoCode">
|
|
<label for="test-payment-amount" class="control-label form-label">{{$t("Fake a @Model.CryptoCode payment for testing")}}</label>
|
|
<div class="d-flex gap-3 mb-2">
|
|
<div class="input-group">
|
|
<input id="test-payment-amount" name="Amount" type="number" step="0.00000001" min="0" class="form-control" placeholder="Amount" v-model="amountRemaining" :disabled="paying" />
|
|
<div id="test-payment-crypto-code" class="input-group-addon input-group-text">@Model.CryptoCode</div>
|
|
</div>
|
|
<button id="FakePayment" class="btn btn-primary flex-shrink-0" type="submit" :disabled="paying">{{$t("Fake Payment")}}</button>
|
|
</div>
|
|
<small class="text-muted">{{$t("This is the same as running bitcoin-cli.sh sendtoaddress xxx")}}</small>
|
|
</form>
|
|
<form id="mine-block" :action="`/i/${invoiceId}/mine-blocks`" method="post" class="my-5" v-on:submit.prevent="mine">
|
|
<!-- TODO only show when BTC On-chain -->
|
|
<label for="block-count" class="control-label form-label">{{$t("Mine a few blocks to test processing and settlement.")}}</label>
|
|
<div class="d-flex gap-3">
|
|
<div class="input-group">
|
|
<input id="block-count" name="BlockCount" type="number" step="1" min="1" class="form-control" value="1" />
|
|
<div class="input-group-addon input-group-text">{{$t("Blocks")}}</div>
|
|
</div>
|
|
<button class="btn btn-secondary" type="submit">{{$t("Mine")}}</button>
|
|
</div>
|
|
</form>
|
|
<form id="expire-invoice" :action="`/i/${invoiceId}/expire`" method="post" class="my-5" v-on:submit.prevent="expire" v-if="!isPaid">
|
|
<button class="btn btn-secondary" type="submit" :disabled="expiring">{{$t("Expire Invoice Now")}}</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
Vue.component('checkout-cheating', {
|
|
el: '#Checkout-Cheating',
|
|
data () {
|
|
return {
|
|
successMessage: null,
|
|
errorMessage: null,
|
|
paying: false,
|
|
expiring: false,
|
|
amountRemaining: parseFloat(this.btcDue)
|
|
}
|
|
},
|
|
props: {
|
|
invoiceId: String,
|
|
btcDue: Number,
|
|
isPaid: Boolean
|
|
},
|
|
methods: {
|
|
async pay (e) {
|
|
const form = e.target;
|
|
const url = form.getAttribute('action');
|
|
const method = form.getAttribute('method');
|
|
const body = new FormData(form);
|
|
const headers = { 'Accept': 'application/json' }
|
|
|
|
this.paying = true;
|
|
const response = await fetch(url, { method, body, headers });
|
|
const data = await response.json();
|
|
this.successMessage = data.successMessage;
|
|
this.errorMessage = data.errorMessage;
|
|
this.paying = false;
|
|
},
|
|
mine () {
|
|
console.log("TODO")
|
|
},
|
|
async expire (e) {
|
|
const form = e.target;
|
|
const url = form.getAttribute('action');
|
|
const method = form.getAttribute('method');
|
|
|
|
this.expiring = true;
|
|
const response = await fetch(url, { method });
|
|
const data = await response.json();
|
|
this.successMessage = data.successMessage;
|
|
this.errorMessage = data.errorMessage;
|
|
this.expiring = false;
|
|
}
|
|
}
|
|
})
|
|
</script>
|