lnbits-legend/lnbits/extensions/paywall/templates/paywall/display.html

{% extends "public.html" %} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col-12 col-sm-8 col-md-5 col-lg-4">
    <q-card class="q-pa-lg">
      <q-card-section class="q-pa-none">
        <h5 class="text-subtitle1 q-mt-none q-mb-sm">{{ paywall.memo }}</h5>
        {% if paywall.description %}
        <p>{{ paywall.description }}</p>
        {% endif %}
        <div v-if="!this.redirectUrl" class="q-mt-lg">
          <q-form v-if="">
            <q-input
              filled
              v-model.number="userAmount"
              type="number"
              :min="paywallAmount"
              suffix="sat"
              label="Choose an amount *"
              :hint="'Minimum ' + paywallAmount + ' sat'"
            >
              <template v-slot:after>
                <q-btn
                  round
                  dense
                  flat
                  icon="check"
                  color="primary"
                  type="submit"
                  @click="createInvoice"
                  :disabled="userAmount < paywallAmount || paymentReq"
                ></q-btn>
              </template>
            </q-input>
          </q-form>
          <div v-if="paymentReq" class="q-mt-lg">
            <a :href="'lightning:' + paymentReq">
              <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
                <qrcode
                  :value="paymentReq"
                  :options="{width: 800}"
                  class="rounded-borders"
                ></qrcode>
              </q-responsive>
            </a>
            <div class="row q-mt-lg">
              <q-btn outline color="grey" @click="copyText(paymentReq)"
                >Copy invoice</q-btn
              >
              <q-btn @click="cancelPayment" flat color="grey" class="q-ml-auto"
                >Cancel</q-btn
              >
            </div>
          </div>
        </div>
        <div v-else>
          <q-separator class="q-my-lg"></q-separator>
          <p>
            You can access the URL behind this paywall:<br />
            <strong>{% raw %}{{ redirectUrl }}{% endraw %}</strong>
          </p>
          <div class="row q-mt-lg">
            <q-btn outline color="grey" type="a" :href="redirectUrl"
              >Open URL</q-btn
            >
          </div>
        </div>
      </q-card-section>
    </q-card>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    mixins: [windowMixin],
    data: function () {
      return {
        userAmount: '{{ paywall.amount }}',
        paywallAmount: '{{ paywall.amount }}',
        paymentReq: null,
        redirectUrl: null,
        paymentDialog: {
          dismissMsg: null,
          checker: null
        }
      }
    },
    computed: {
      amount: function () {
        return this.paywallAmount > this.userAmount
          ? this.paywallAmount
          : this.userAmount
      }
    },
    methods: {
      cancelPayment: function () {
        this.paymentReq = null
        clearInterval(this.paymentDialog.checker)
        if (this.paymentDialog.dismissMsg) {
          this.paymentDialog.dismissMsg()
        }
      },
      createInvoice: function () {
        var self = this
        LNbits.api
          .request(
            'POST',
            '/paywall/api/v1/paywalls/invoice/{{ paywall.id }}',
            'filler',
            {
              amount: self.amount
            }
          )
          .then(function (response) {
            if (response.data) {
              self.paymentReq = response.data.payment_request.toUpperCase()
              self.paymentDialog.dismissMsg = self.$q.notify({
                timeout: 0,
                message: 'Waiting for payment...'
              })

              self.paymentDialog.checker = setInterval(function () {
                LNbits.api
                  .request(
                    'POST',
                    '/paywall/api/v1/paywalls/check_invoice/{{ paywall.id }}',
                    'filler',
                    {payment_hash: response.data.payment_hash}
                  )
                  .then(function (response) {
                    if (response.data) {
                      if (response.data.paid) {
                        self.cancelPayment()
                        self.redirectUrl = response.data.url
                        if (response.data.remembers) {
                          self.$q.localStorage.set(
                            'lnbits.paywall.{{ paywall.id }}',
                            response.data.url
                          )
                        }
                        self.$q.notify({
                          type: 'positive',
                          message: 'Payment received!',
                          icon: null
                        })
                      }
                    }
                  })
                  .catch(function (error) {
                    LNbits.utils.notifyApiError(error)
                  })
              }, 2000)
            }
          })
          .catch(function (error) {
            LNbits.utils.notifyApiError(error)
          })
      }
    },
    created: function () {
      var url = this.$q.localStorage.getItem('lnbits.paywall.{{ paywall.id }}')

      if (url) {
        this.redirectUrl = url
      }
    }
  })
</script>
{% endblock %}