mirror of
https://github.com/aljazceru/btcpayserver.git
synced 2026-02-20 21:54:23 +01:00
Improve Pay Button View (#3112)
Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
This commit is contained in:
dstrukt
@@ -35,9 +35,8 @@
|
||||
}
|
||||
</template>
|
||||
<script>
|
||||
var srvModel = @Safe.Json(Model);
|
||||
|
||||
var payButtonCtrl = new Vue({
|
||||
const srvModel = @Safe.Json(Model);
|
||||
const payButtonCtrl = new Vue({
|
||||
el: '#payButtonCtrl',
|
||||
data: {
|
||||
srvModel: srvModel,
|
||||
@@ -45,28 +44,27 @@
|
||||
buttonInlineTextMode: false
|
||||
},
|
||||
computed: {
|
||||
imageUrlRequired: function(){
|
||||
imageUrlRequired() {
|
||||
return !this.buttonInlineTextMode;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
inputChanges: function (event, buttonSize) {
|
||||
inputChanges(event, buttonSize) {
|
||||
inputChanges(event, buttonSize);
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
buttonInlineTextMode: function (checked) {
|
||||
if(!checked){
|
||||
this.srvModel.payButtonText = "";
|
||||
this.srvModel.payButtonImageUrl = this.originalButtonImageUrl;
|
||||
}else {
|
||||
this.srvModel.payButtonText = "Pay with";
|
||||
this.srvModel.payButtonImageUrl = this.srvModel.urlRoot + "img/logo.svg";
|
||||
}
|
||||
this.inputChanges();
|
||||
buttonInlineTextMode(checked) {
|
||||
if (!checked) {
|
||||
this.srvModel.payButtonText = '';
|
||||
this.srvModel.payButtonImageUrl = this.originalButtonImageUrl;
|
||||
} else {
|
||||
this.srvModel.payButtonText = 'Pay with';
|
||||
this.srvModel.payButtonImageUrl = `${this.srvModel.urlRoot}img/logo.svg`;
|
||||
}
|
||||
this.inputChanges();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
}
|
||||
@@ -74,44 +72,38 @@
|
||||
<div id="payButtonCtrl">
|
||||
<div class="row">
|
||||
<div class="col-lg-7">
|
||||
<h4 class="mb-3">@ViewData["PageTitle"]</h4>
|
||||
<h3 class="mb-3">@ViewData["PageTitle"]</h3>
|
||||
<div class="row">
|
||||
<p>Configure your Pay Button, and the generated code will be displayed at the bottom of the page to copy into your project.</p>
|
||||
<h4 class="mt-3 mb-3">General Settings</h4>
|
||||
<div class="form-group col-md-8">
|
||||
<label class="form-label">Price</label>
|
||||
<input name="price" type="text" class="form-control" placeholder="(optional)"
|
||||
<label class="form-label" for="price">Price</label>
|
||||
<input name="price" type="text" class="form-control" id="price"
|
||||
v-model="srvModel.price" v-on:change="inputChanges"
|
||||
v-validate="'decimal|min_value:0'" :class="{'is-invalid': errors.has('price') }">
|
||||
<small class="text-danger">{{ errors.first('price') }}</small>
|
||||
</div>
|
||||
<div class="form-group col-md-4" v-if="!srvModel.appIdEndpoint">
|
||||
<label class="form-label"> </label>
|
||||
<input name="currency" type="text" class="form-control"
|
||||
<div class="form-group col-md-4" v-if="!srvModel.appIdEndpoint">
|
||||
<label class="form-label" for="currency">Currency</label>
|
||||
<input name="currency" type="text" class="form-control" id="currency"
|
||||
v-model="srvModel.currency" v-on:change="inputChanges"
|
||||
:class="{'is-invalid': errors.has('currency') }">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" v-if="!srvModel.appIdEndpoint">
|
||||
<label class="form-label">Checkout Description</label>
|
||||
<input name="checkoutDesc" type="text" class="form-control" placeholder="(optional)"
|
||||
<label class="form-label" for="description">Checkout Description</label>
|
||||
<input name="checkoutDesc" type="text" class="form-control" id="description"
|
||||
v-model="srvModel.checkoutDesc" v-on:change="inputChanges">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Order Id</label>
|
||||
<input name="orderId" type="text" class="form-control" id="inputAddress" placeholder="(optional)"
|
||||
<label class="form-label" for="order-id">Order ID</label>
|
||||
<input name="orderId" type="text" class="form-control" id="order-id"
|
||||
v-model="srvModel.orderId" v-on:change="inputChanges">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<br />
|
||||
Set parameters that define the purchase: price, currency and an optional description of purchase.
|
||||
<br /><br />
|
||||
Generated HTML will be displayed at the bottom of this page and all you need is to paste that HTML into your final page.
|
||||
Clicking on the button will redirect customer to checkout.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-5 mb-3">Pay button display options</h4>
|
||||
|
||||
<h4 class="mt-5 mb-3">Display Options</h4>
|
||||
<div class="row">
|
||||
<div class="col-lg-7">
|
||||
<div class="form-group">
|
||||
@@ -121,38 +113,32 @@
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input id="buttonInlineTextMode" type="checkbox" v-model="buttonInlineTextMode" v-on:change="inputChanges" class="form-check-input"/>
|
||||
<label for="buttonInlineTextMode" class="form-check-label">Customize text in button</label>
|
||||
<label for="buttonInlineTextMode" class="form-check-label">Customize Pay Button Text</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" v-show="buttonInlineTextMode">
|
||||
<label class="form-label">Pay Button Text</label>
|
||||
<input name="payButtonText" type="text" class="form-control" id="inputAddress"
|
||||
<label class="form-label" for="pb-text">Pay Button Text</label>
|
||||
<input name="payButtonText" type="text" class="form-control" id="pb-text"
|
||||
v-model="srvModel.payButtonText" v-on:change="inputChanges">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Pay Button Image Url</label>
|
||||
<input name="payButtonImageUrl" type="text" class="form-control" id="inputAddress"
|
||||
<div class="form-group mb-4">
|
||||
<label class="form-label" for="pb-image-url">Pay Button Image Url</label>
|
||||
<input name="payButtonImageUrl" type="text" class="form-control" id="pb-image-url"
|
||||
v-model="srvModel.payButtonImageUrl" v-on:change="inputChanges"
|
||||
v-validate="{ required: this.imageUrlRequired, url: {require_tld:false} }"
|
||||
:class="{'is-invalid': errors.has('payButtonImageUrl') }">
|
||||
<small class="text-danger">{{ errors.first('payButtonImageUrl') }}</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-group mb-4">
|
||||
<label class="form-label">Image Size</label>
|
||||
<div style="vertical-align:top; font-size:12px; display:flex;">
|
||||
<button class="btn text-nowrap" style="width:146px;height:40px;margin-right:40px;"
|
||||
v-on:click="inputChanges($event, 0)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 0) }">
|
||||
146 x 40 px
|
||||
</button>
|
||||
<button class="btn text-nowrap btn-default" style="width:168px;height:46px;margin-right:40px;"
|
||||
v-on:click="inputChanges($event, 1)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 1) }">
|
||||
168 x 46 px
|
||||
</button>
|
||||
<button class="btn text-nowrap btn-default" style="width:209px;height:57px;"
|
||||
v-on:click="inputChanges($event, 2)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 2) }">
|
||||
209 x 57 px
|
||||
</button>
|
||||
<div class="btn-group d-flex" role="group">
|
||||
<button type="button" class="btn btn-outline-secondary"
|
||||
v-on:click="inputChanges($event, 0)">146 x 40 px</button>
|
||||
<button type="button" class="btn btn-outline-secondary"
|
||||
v-on:click="inputChanges($event, 1)">168 x 46 px</button>
|
||||
<button type="button" class="btn btn-outline-secondary"
|
||||
v-on:click="inputChanges($event, 2)">209 x 57 px</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
@@ -170,30 +156,30 @@
|
||||
<label for="btn-slider" class="form-check-label">Slider</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" v-if="srvModel.buttonType == 1 ||srvModel.buttonType == 2">
|
||||
<div class="row" v-if="srvModel.buttonType === 1 ||srvModel.buttonType === 2">
|
||||
<div class="form-group col-md-4">
|
||||
<label class="form-label">Min</label>
|
||||
<input name="min" type="text" class="form-control"
|
||||
<label class="form-label" for="pb-min">Min</label>
|
||||
<input name="min" type="text" class="form-control" id="pb-min"
|
||||
v-model="srvModel.min" v-on:change="inputChanges"
|
||||
v-validate="'required|decimal|min_value:0'" :class="{'is-invalid': errors.has('min') }">
|
||||
<small class="text-danger">{{ errors.first('min') }}</small>
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label class="form-label">Max</label>
|
||||
<input name="max" type="text" class="form-control"
|
||||
<label class="form-label" for="pb-max">Max</label>
|
||||
<input name="max" type="text" class="form-control" id="pb-max"
|
||||
v-model="srvModel.max" v-on:change="inputChanges"
|
||||
v-validate="'required|decimal'" :class="{'is-invalid': errors.has('max') }">
|
||||
<small class="text-danger">{{ errors.first('max') }}</small>
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label class="form-label">Step</label>
|
||||
<input name="step" type="text" class="form-control"
|
||||
<label class="form-label" for="pb-step">Step</label>
|
||||
<input name="step" type="text" class="form-control" id="pb-step"
|
||||
v-model="srvModel.step" v-on:change="inputChanges"
|
||||
v-validate="'required'" :class="{'is-invalid': errors.has('step') }">
|
||||
<small class="text-danger">{{ errors.first('step') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="srvModel.buttonType == 1">
|
||||
<template v-if="srvModel.buttonType === 1">
|
||||
<div class="form-check">
|
||||
<input name="simpleInput"
|
||||
id="simpleInput"
|
||||
@@ -218,98 +204,92 @@
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<div class="col-lg-4 mt-4 mt-lg-0">
|
||||
<h5 class="mb-3">Preview</h5>
|
||||
<div id="preview"></div>
|
||||
|
||||
<div v-show="!srvModel.appIdEndpoint">
|
||||
<h5 class="mt-4 mb-3">Link</h5>
|
||||
<span>Alternatively, you can share this link or encode it in a QR code</span>
|
||||
<div id="preview-link"></div>
|
||||
<span>Alternatively, you can share <a id="preview-link" href="#">this link</a> or encode it in a QR code.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-5 mb-3">Payment Notifications</h4>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-7">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Server IPN</label>
|
||||
<input name="serverIpn" type="text" class="form-control" placeholder="(optional)"
|
||||
<label class="form-label" for="server-ipn">Server IPN</label>
|
||||
<input name="serverIpn" type="text" class="form-control" id="server-ipn"
|
||||
v-model="srvModel.serverIpn" v-on:change="inputChanges"
|
||||
v-validate="'url'" :class="{'is-invalid': errors.has('serverIpn') }">
|
||||
<small class="text-danger">{{ errors.first('serverIpn') }}</small>
|
||||
<p class="form-text text-muted">
|
||||
The URL to post purchase data.
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-group" v-if="!srvModel.appIdEndpoint">
|
||||
<label class="form-label">Send Email Notifications to</label>
|
||||
<input name="notifyEmail" type="text" class="form-control" placeholder="(optional)"
|
||||
<div class="form-group" v-if="!srvModel.appIdEndpoint">
|
||||
<label class="form-label" for="email-notifications">Email Notifications</label>
|
||||
<input name="notifyEmail" type="text" class="form-control" id="email-notifications"
|
||||
placeholder="name@domain.com"
|
||||
v-model="srvModel.notifyEmail" v-on:change="inputChanges"
|
||||
v-validate="'email'" :class="{'is-invalid': errors.has('notifyEmail') }">
|
||||
<small class="text-danger">{{ errors.first('notifyEmail') }}</small>
|
||||
|
||||
<p class="form-text text-muted">
|
||||
Receive email notification updates.
|
||||
</p>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Browser Redirect</label>
|
||||
<input name="browserRedirect" type="text" class="form-control" placeholder="(optional)"
|
||||
<label class="form-label" for="browser-redirect">Browser Redirect</label>
|
||||
<input name="browserRedirect" type="text" class="form-control" id="browser-redirect"
|
||||
v-model="srvModel.browserRedirect" v-on:change="inputChanges"
|
||||
v-validate="'url'" :class="{'is-invalid': errors.has('browserRedirect') }">
|
||||
<small class="text-danger">{{ errors.first('browserRedirect') }}</small>
|
||||
<p class="form-text text-muted">
|
||||
Where to redirect the customer after payment is complete.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<br />
|
||||
These parameters allow you to influence the process after purchase. <i>Server IPN</i> is the URL to which we'll post purchase data.
|
||||
We can also deliver an email notification to a specified address.
|
||||
<br /><br />
|
||||
Finally, <i>Browser Redirect</i> defines where BTCPayServer will redirect the customer after purchase is completed.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-5 mb-3">Advanced options</h4>
|
||||
|
||||
<h4 class="mt-5 mb-3">Advanced Options</h4>
|
||||
<div class="row" v-if="!srvModel.appIdEndpoint">
|
||||
<div class="col-lg-7">
|
||||
<p>
|
||||
Specify additional query string parameters that should be appended to the checkout page once the invoice is created.
|
||||
For example, <code>lang=da-DK</code> would load the checkout page in Danish by default.
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Checkout Additional Query String</label>
|
||||
<input name="checkoutQueryString" type="text" class="form-control" placeholder="(optional)"
|
||||
<label class="form-label" for="query-string">Checkout Additional Query String</label>
|
||||
<input name="checkoutQueryString" type="text" class="form-control" id="query-string"
|
||||
v-model="srvModel.checkoutQueryString" v-on:change="inputChanges"
|
||||
:class="{'is-invalid': errors.has('checkoutQueryString') }">
|
||||
<small class="text-danger">{{ errors.first('checkoutQueryString') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<br />
|
||||
This parameter allows you to specify additional query string parameters that should be appended to the checkout page once the invoice is created.
|
||||
For example, <code>lang=da-DK</code> would load the checkout page in Danish by default.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-7">
|
||||
<p>Link this Pay Button to an app instead. Some features are disabled due to the different endpoint capabilities. You can set which perk/item this button should be targeting.</p>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Use App as endpoint</label>
|
||||
<select v-model="srvModel.appIdEndpoint" v-on:change="inputChanges" class="form-select">
|
||||
<label class="form-label" for="app-as-endpoint">Use App As Endpoint</label>
|
||||
<select v-model="srvModel.appIdEndpoint" v-on:change="inputChanges" class="form-select" id="app-as-endpoint">
|
||||
<option value="">Use default pay button endpoint</option>
|
||||
<option v-for="app in srvModel.apps" v-bind:value="app.id" >{{app.appName}} ({{app.appType}})</option>
|
||||
</select>
|
||||
<small class="text-danger">{{ errors.first('appIdEndpoint') }}</small>
|
||||
</div>
|
||||
<div class="form-group" v-if="srvModel.appIdEndpoint">
|
||||
<label>App Item/Perk</label>
|
||||
<input name="appChoiceKey" type="text" class="form-control" placeholder="(optional)"
|
||||
<label class="form-label" for="app-item">App Item/Perk</label>
|
||||
<input name="appChoiceKey" type="text" class="form-control" id="app-item"
|
||||
v-model="srvModel.appChoiceKey" v-on:change="inputChanges"
|
||||
:class="{'is-invalid': errors.has('appChoiceKey') }">
|
||||
<small class="text-danger">{{ errors.first('appChoiceKey') }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<br />
|
||||
This allows you to link this pay button to an app instead. Some features are disabled due to the different endpoint capabilities. You can set which perk/item this button should be targeting.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-5 mb-3">Generated code</h4>
|
||||
<h4 class="mt-5 mb-3">Generated Code</h4>
|
||||
|
||||
<div class="row" v-show="!errors.any()">
|
||||
<div class="col-lg-12">
|
||||
|
||||
@@ -191,7 +191,7 @@ function inputChanges(event, buttonSize) {
|
||||
});
|
||||
url = url.href;
|
||||
|
||||
$("#preview-link").empty().append($('<a></a>').text(url).attr('href', url));
|
||||
$("#preview-link").attr('href', url);
|
||||
|
||||
$('pre code').each(function (i, block) {
|
||||
hljs.highlightBlock(block);
|
||||
|
||||
Reference in New Issue
Block a user