feat: square integration (#3962)
This commit is contained in:
Vlad Stan
@@ -587,12 +587,544 @@
|
||||
<q-item-section> Square </q-item-section>
|
||||
|
||||
<q-item-section side>
|
||||
<div class="row items-center">Disabled</div>
|
||||
<div class="row items-center">
|
||||
<q-toggle
|
||||
size="md"
|
||||
:label="$t('enabled')"
|
||||
v-model="formData.square_enabled"
|
||||
color="green"
|
||||
unchecked-icon="clear"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</template>
|
||||
|
||||
<q-card>
|
||||
<q-card-section> Coming Soon </q-card-section>
|
||||
<q-card class="q-pb-xl">
|
||||
<q-expansion-item :label="$t('api')" default-opened>
|
||||
<q-card-section class="q-pa-md">
|
||||
<q-input
|
||||
filled
|
||||
type="text"
|
||||
v-model="formData.square_api_endpoint"
|
||||
:label="$t('endpoint')"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
class="q-mt-md"
|
||||
:type="hideInputToggle ? 'password' : 'text'"
|
||||
v-model="formData.square_access_token"
|
||||
:label="$t('access_token')"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
class="q-mt-md"
|
||||
type="text"
|
||||
v-model="formData.square_location_id"
|
||||
:label="$t('location_id')"
|
||||
:hint="$t('square_location_id_hint')"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
class="q-mt-md"
|
||||
type="text"
|
||||
v-model="formData.square_api_version"
|
||||
:label="$t('api_version')"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
class="q-mt-md"
|
||||
type="text"
|
||||
v-model="formData.square_payment_success_url"
|
||||
:label="$t('callback_success_url')"
|
||||
:hint="$t('callback_success_url_hint')"
|
||||
></q-input>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pa-md">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
outline
|
||||
color="grey"
|
||||
class="float-right"
|
||||
:label="$t('check_connection')"
|
||||
@click="checkFiatProvider('square')"
|
||||
></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item :label="$t('webhook')" default-opened>
|
||||
<q-card-section>
|
||||
<span v-text="$t('webhook_square_description')"></span>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row items-center q-gutter-sm q-mt-md">
|
||||
<div class="col">
|
||||
<q-input
|
||||
filled
|
||||
type="text"
|
||||
v-model="formData.square_payment_webhook_url"
|
||||
:label="$t('webhook_url')"
|
||||
:hint="$t('square_webhook_url_hint')"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
outline
|
||||
color="grey"
|
||||
icon="content_copy"
|
||||
@click="
|
||||
copyWebhookUrl(formData.square_payment_webhook_url)
|
||||
"
|
||||
:aria-label="$t('copy_webhook_url')"
|
||||
>
|
||||
<q-tooltip>
|
||||
<span v-text="$t('copy_webhook_url')"></span>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<q-input
|
||||
filled
|
||||
class="q-mt-md"
|
||||
:type="hideInputToggle ? 'password' : 'text'"
|
||||
v-model="formData.square_webhook_signature_key"
|
||||
:label="$t('signing_secret')"
|
||||
:hint="$t('square_webhook_signature_key_hint')"
|
||||
></q-input>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<span v-text="$t('webhook_events_list')"></span>
|
||||
<ul>
|
||||
<li><code>payment.updated</code></li>
|
||||
<li><code>invoice.payment_made</code></li>
|
||||
</ul>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item :label="$t('service_fee')">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="formData.square_limits.service_fee_percent"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('service_fee_label')"
|
||||
:hint="$t('service_fee_hint')"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="formData.square_limits.service_max_fee_sats"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('service_fee_max')"
|
||||
:hint="$t('service_fee_max_hint')"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
type="text"
|
||||
v-model="formData.square_limits.service_fee_wallet_id"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('fee_wallet_label')"
|
||||
:hint="$t('fee_wallet_hint')"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item :label="$t('amount_limits')">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="formData.square_limits.service_min_amount_sats"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('min_incoming_payment_amount')"
|
||||
:hint="$t('min_incoming_payment_amount_desc')"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="formData.square_limits.service_max_amount_sats"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('max_incoming_payment_amount')"
|
||||
:hint="$t('max_incoming_payment_amount_desc')"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
v-model="formData.square_limits.service_faucet_wallet_id"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('faucest_wallet_id')"
|
||||
:hint="$t('faucest_wallet_id_hint')"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label v-text="$t('faucest_wallet')"></q-item-label>
|
||||
<q-item-label caption>
|
||||
<ul>
|
||||
<li>
|
||||
<span
|
||||
v-text="
|
||||
$t('faucest_wallet_desc_1', {
|
||||
provider: 'square'
|
||||
})
|
||||
"
|
||||
></span>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
v-text="
|
||||
$t('faucest_wallet_desc_2', {
|
||||
provider: 'square'
|
||||
})
|
||||
"
|
||||
></span>
|
||||
</li>
|
||||
<li>
|
||||
<span v-text="$t('faucest_wallet_desc_3')"></span>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
v-text="
|
||||
$t('faucest_wallet_desc_4', {
|
||||
provider: 'square'
|
||||
})
|
||||
"
|
||||
></span>
|
||||
</li>
|
||||
<li>
|
||||
<span v-text="$t('faucest_wallet_desc_5')"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
<q-expansion-item :label="$t('allowed_users')">
|
||||
<q-card-section>
|
||||
<q-input
|
||||
filled
|
||||
v-model="formAddSquareUser"
|
||||
@keydown.enter="addSquareAllowedUser"
|
||||
type="text"
|
||||
:label="$t('allowed_users_label')"
|
||||
:hint="
|
||||
$t('allowed_users_hint_feature', {
|
||||
feature: 'Square'
|
||||
})
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
@click="addSquareAllowedUser"
|
||||
dense
|
||||
flat
|
||||
icon="add"
|
||||
></q-btn>
|
||||
</q-input>
|
||||
<div>
|
||||
<q-chip
|
||||
v-for="user in formData.square_limits.allowed_users"
|
||||
@update:model-value="formData.touch = null"
|
||||
:key="user"
|
||||
removable
|
||||
@remove="removeSquareAllowedUser(user)"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
:label="user"
|
||||
class="ellipsis"
|
||||
>
|
||||
</q-chip>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
<q-separator></q-separator>
|
||||
<q-expansion-item header-class="text-primary text-bold">
|
||||
<template v-slot:header>
|
||||
<q-item-section avatar>
|
||||
<q-avatar color="deep-orange-7" text-color="white">R</q-avatar>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section> Revolut </q-item-section>
|
||||
|
||||
<q-item-section side>
|
||||
<div class="row items-center">
|
||||
<q-toggle
|
||||
size="md"
|
||||
:label="$t('enabled')"
|
||||
v-model="formData.revolut_enabled"
|
||||
color="green"
|
||||
unchecked-icon="clear"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</template>
|
||||
|
||||
<q-card class="q-pb-xl">
|
||||
<q-expansion-item :label="$t('api')" default-opened>
|
||||
<q-card-section class="q-pa-md">
|
||||
<q-input
|
||||
filled
|
||||
type="text"
|
||||
v-model="formData.revolut_api_endpoint"
|
||||
:label="$t('endpoint')"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
class="q-mt-md"
|
||||
:type="hideInputToggle ? 'password' : 'text'"
|
||||
v-model="formData.revolut_api_secret_key"
|
||||
label="API secret key"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
class="q-mt-md"
|
||||
type="text"
|
||||
v-model="formData.revolut_api_version"
|
||||
:label="$t('api_version')"
|
||||
></q-input>
|
||||
<q-input
|
||||
filled
|
||||
class="q-mt-md"
|
||||
type="text"
|
||||
v-model="formData.revolut_payment_success_url"
|
||||
:label="$t('callback_success_url')"
|
||||
:hint="$t('callback_success_url_hint')"
|
||||
></q-input>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pa-md">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<q-btn
|
||||
outline
|
||||
color="grey"
|
||||
class="float-right"
|
||||
:label="$t('check_connection')"
|
||||
@click="checkFiatProvider('revolut')"
|
||||
></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item :label="$t('webhook')" default-opened>
|
||||
<q-card-section>
|
||||
Configure a Revolut Merchant webhook that points to your LNbits
|
||||
server. LNbits will create it through the Revolut API and
|
||||
subscribe to <code>ORDER_AUTHORISED</code>,
|
||||
<code>ORDER_COMPLETED</code>, and
|
||||
<code>SUBSCRIPTION_INITIATED</code>.
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row items-center q-gutter-sm q-mt-md">
|
||||
<div class="col">
|
||||
<q-input
|
||||
filled
|
||||
type="text"
|
||||
disable
|
||||
:model-value="revolutWebhookUrl"
|
||||
:label="$t('webhook_url')"
|
||||
readonly
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<q-btn
|
||||
outline
|
||||
color="grey"
|
||||
icon="content_copy"
|
||||
@click="copyWebhookUrl(revolutWebhookUrl)"
|
||||
:aria-label="$t('copy_webhook_url')"
|
||||
>
|
||||
<q-tooltip>
|
||||
<span v-text="$t('copy_webhook_url')"></span>
|
||||
</q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row items-center q-gutter-sm q-mt-md">
|
||||
<q-btn
|
||||
type="button"
|
||||
color="primary"
|
||||
icon="add_link"
|
||||
label="Create webhook"
|
||||
:loading="creatingRevolutWebhook"
|
||||
@click="createRevolutWebhook"
|
||||
></q-btn>
|
||||
<q-chip
|
||||
v-if="formData.revolut_webhook_signing_secret"
|
||||
dense
|
||||
color="positive"
|
||||
text-color="white"
|
||||
icon="verified"
|
||||
>
|
||||
Signing secret saved
|
||||
</q-chip>
|
||||
</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<span v-text="$t('webhook_events_list')"></span>
|
||||
<ul>
|
||||
<li>
|
||||
<code>ORDER_AUTHORISED</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>ORDER_COMPLETED</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>SUBSCRIPTION_INITIATED</code>
|
||||
</li>
|
||||
</ul>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item :label="$t('service_fee')">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="formData.revolut_limits.service_fee_percent"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('service_fee_label')"
|
||||
:hint="$t('service_fee_hint')"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="formData.revolut_limits.service_max_fee_sats"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('service_fee_max')"
|
||||
:hint="$t('service_fee_max_hint')"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
type="text"
|
||||
v-model="formData.revolut_limits.service_fee_wallet_id"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('fee_wallet_label')"
|
||||
:hint="$t('fee_wallet_hint')"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item :label="$t('amount_limits')">
|
||||
<q-card-section>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="formData.revolut_limits.service_min_amount_sats"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('min_incoming_payment_amount')"
|
||||
:hint="$t('min_incoming_payment_amount_desc')"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
type="number"
|
||||
min="0"
|
||||
v-model="formData.revolut_limits.service_max_amount_sats"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('max_incoming_payment_amount')"
|
||||
:hint="$t('max_incoming_payment_amount_desc')"
|
||||
></q-input>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<q-input
|
||||
filled
|
||||
class="q-ma-sm"
|
||||
v-model="formData.revolut_limits.service_faucet_wallet_id"
|
||||
@update:model-value="formData.touch = null"
|
||||
:label="$t('faucest_wallet_id')"
|
||||
:hint="$t('faucest_wallet_id_hint')"
|
||||
></q-input>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
|
||||
<q-expansion-item :label="$t('allowed_users')">
|
||||
<q-card-section>
|
||||
<q-input
|
||||
filled
|
||||
v-model="formAddRevolutUser"
|
||||
@keydown.enter="addRevolutAllowedUser"
|
||||
type="text"
|
||||
:label="$t('allowed_users_label')"
|
||||
:hint="
|
||||
$t('allowed_users_hint_feature', {
|
||||
feature: 'Revolut'
|
||||
})
|
||||
"
|
||||
>
|
||||
<q-btn
|
||||
@click="addRevolutAllowedUser"
|
||||
dense
|
||||
flat
|
||||
icon="add"
|
||||
></q-btn>
|
||||
</q-input>
|
||||
<div>
|
||||
<q-chip
|
||||
v-for="user in formData.revolut_limits.allowed_users"
|
||||
@update:model-value="formData.touch = null"
|
||||
:key="user"
|
||||
removable
|
||||
@remove="removeRevolutAllowedUser(user)"
|
||||
color="primary"
|
||||
text-color="white"
|
||||
:label="user"
|
||||
class="ellipsis"
|
||||
>
|
||||
</q-chip>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-expansion-item>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</q-list>
|
||||
@@ -640,9 +1172,22 @@
|
||||
>
|
||||
</div>
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<div class="text-bold" style="min-width: 140px">
|
||||
Square (coming soon)
|
||||
</div>
|
||||
<div class="text-bold" style="min-width: 140px">Square</div>
|
||||
<q-chip dense color="positive" text-color="white" icon="check"
|
||||
>Checkout</q-chip
|
||||
>
|
||||
<q-chip dense color="warning" text-color="black" icon="schedule"
|
||||
>Subscriptions coming soon</q-chip
|
||||
>
|
||||
<q-chip dense color="negative" text-color="white" icon="close"
|
||||
>Tap-to-pay</q-chip
|
||||
>
|
||||
<q-chip dense color="grey-9" text-color="white" icon="public"
|
||||
>Regions: Square-supported countries</q-chip
|
||||
>
|
||||
</div>
|
||||
<div class="row items-center q-gutter-sm">
|
||||
<div class="text-bold" style="min-width: 140px">Revolut</div>
|
||||
<q-chip dense color="positive" text-color="white" icon="check"
|
||||
>Checkout</q-chip
|
||||
>
|
||||
@@ -653,7 +1198,7 @@
|
||||
>Tap-to-pay</q-chip
|
||||
>
|
||||
<q-chip dense color="grey-9" text-color="white" icon="public"
|
||||
>Regions: Global</q-chip
|
||||
>Regions: Revolut-supported countries</q-chip
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -394,6 +394,44 @@
|
||||
<span v-text="$t('pay_with', {provider: 'PayPal'})"></span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator
|
||||
v-if="g.user.fiat_providers?.includes('square')"
|
||||
></q-separator>
|
||||
<q-item
|
||||
v-if="g.user.fiat_providers?.includes('square')"
|
||||
:active="receive.fiatProvider === 'square'"
|
||||
@click="receive.fiatProvider = 'square'"
|
||||
active-class="bg-teal-1 text-grey-8 text-weight-bold"
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar>
|
||||
<q-img src="/static/images/square_logo.png"></q-img>
|
||||
</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<span v-text="$t('pay_with', {provider: 'Square'})"></span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-separator
|
||||
v-if="g.user.fiat_providers?.includes('revolut')"
|
||||
></q-separator>
|
||||
<q-item
|
||||
v-if="g.user.fiat_providers?.includes('revolut')"
|
||||
:active="receive.fiatProvider === 'revolut'"
|
||||
@click="receive.fiatProvider = 'revolut'"
|
||||
active-class="bg-teal-1 text-grey-8 text-weight-bold"
|
||||
clickable
|
||||
v-ripple
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-avatar color="deep-orange-7" text-color="white">R</q-avatar>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<span v-text="$t('pay_with', {provider: 'Revolut'})"></span>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user