Handle invoice expiry, display timer, minor design improvments

Author: shesek

README.md

@@ -19,7 +19,7 @@ That's it! The "Bitcoin Lightning" payment option should now be available in you
 
 <img src="https://i.imgur.com/Q67y5l2.png" width="45%"></img>
 <img src="https://i.imgur.com/958Bm64.png" width="45%"></img>
-<img src="https://i.imgur.com/I6zP72M.png" width="45%"></img>
+<img src="https://i.imgur.com/QbWiks1.png" width="45%"></img>
 <a href="https://i.imgur.com/UBCdmLR.png"><img src="https://i.imgur.com/JgwuFSl.png" width="45%"></img></a>
 
 ## License

build.sh

@@ -1,4 +1,4 @@
 #!/bin/sh
 composer install --no-dev
-zip -r woocommerce-gateway-lightning.zip composer.json woocommerce-gateway-lightning.php vendor templates css --exclude='vendor/bacon/bacon-qr-code/tests/*'
+zip -r woocommerce-gateway-lightning.zip composer.json woocommerce-gateway-lightning.php vendor templates css img --exclude='vendor/bacon/bacon-qr-code/tests/*'
 

css/payment.css

@@ -1,5 +1,10 @@
-.order_details {
-  display: none; /* Hide WooCommerce default payment details */
+/* Hide WooCommerce default title payment details */
+header.entry-header, .order_details {
+  display: none;
+}
+
+.woocommerce-breadcrumb {
+  margin-bottom: 0;
 }
 
 .ln-pay { margin-bottom: 2em; }
@@ -28,6 +33,14 @@
   padding: 0.75em;
 }
 
+.ln-pay p {
+  margin: 1em 0;
+}
+
+.ln-pay .loader {
+  display: inline;
+}
+
 @media (max-width: 550px) {
   .ln-pay { text-align: center; }
   .ln-pay .qr { float: none; margin: 0 auto; }

img/loader.gif

@@ -1,20 +1,23 @@
 <link rel="stylesheet" href="<?php echo plugins_url('css/payment.css', dirname(__FILE__))?>" type="text/css">
+<noscript><style>.yesscript{display:none}</style></noscript>
+
+<?php $expiry_datestr = date('r', $invoice->expires_at); ?>
 
 <div class="ln-pay">
-  <h4>
-    <strong>Pay <?php echo $order->get_formatted_order_total() ?> with Lightning</strong>
-    (<?php echo number_format($invoice->msatoshi/100000000, 8) ?> mBTC)
-  </h4>
+  <h1>Pay with Lightning</h1>
+  <h3><?php echo $order->get_formatted_order_total() ?> = <?php echo number_format($invoice->msatoshi/100000000, 8) ?> mBTC</h3>
   <img class="qr" src="<?php echo $qr_uri ?>">
-  <div class="payreq">
-    <code><?php echo $invoice->payreq ?></code>
-    <a class="checkout-button button alt" href="lightning:<?php echo $invoice->payreq ?>">Pay with Lightning</a>
-  </div>
-
+  <code class="payreq"><?php echo $invoice->payreq ?></code>
+  <p>
+    <noscript>Your browser has JavaScript turned off. Please refresh the page manually after making the payment.</noscript>
+    <span class="yesscript"><img src="<?php echo plugins_url( '../img/loader.gif', __FILE__ ) ?>" class="loader" alt="loading"> Awaiting payment.</span>
+    The invoice expires <span id="expiry-timer" title="<?php echo $expiry_datestr ?>"><?php echo $expiry_datestr ?></span>.
+  </p>
+  <a class="checkout-button button alt" href="lightning:<?php echo $invoice->payreq ?>">Pay with Lightning</a>
 </div>
 
 <script>
-(function($, ajax_url, invoice_id, redir_url){
+(function($, ajax_url, invoice_id, redir_url, expires_at){
   $(function poll() {
     $.post(ajax_url, { action: 'ln_wait_invoice', invoice_id: invoice_id })
       .success((code, state, res) => {
@@ -24,16 +27,30 @@
         throw new Error('succesful response, but not the expected one')
       })
       .fail(res => {
-        // immediatly re-poll on 402 Payment Required
+        // 402 Payment Required: timeout reached without payment, invoice is still payable
         if (res.status === 402) return poll()
+        // 410 Gone: invoice expired and can not longer be paid
+        if (res.status === 410) return location.reload()
 
         // for unknown errors, wait for a little while, then try again
         setTimeout(poll, 10000);
         throw new Error('unexpected status code '+res.status)
       })
   })
+
+  ;(function updateExpiry() {
+    var left = expires_at - (+new Date()/1000|0)
+    if (left <= 0) return location.reload()
+    $('#expiry-timer').text('in '+formatDur(left))
+    setTimeout(updateExpiry, 1000)
+  })()
+
+  function formatDur(x) {
+    var h=x/3600|0, m=x%3600/60|0, s=x%60
+    return ''+(h>0?h+':':'')+(m<10&&h>0?'0':'')+m+':'+(s<10?'0':'')+s
+  }
 })(jQuery, <?php echo json_encode(admin_url( 'admin-ajax.php' )) ?>, <?php echo json_encode($invoice->id) ?>,
-           <?php echo json_encode($order->get_checkout_order_received_url()) ?>)
+           <?php echo json_encode($order->get_checkout_order_received_url()) ?>, <?php echo $invoice->expires_at ?>)
 
 </script>
 

templates/payment.php

@@ -146,13 +146,14 @@ public function webhook_callback() {
        * JSON endpoint for long polling payment updates.
        */
       public function wait_invoice() {
-        $invoice = $this->charge->wait($_POST['invoice_id'], LIGHTNING_LONGPOLL_TIMEOUT);
-        if ($invoice && $invoice->completed) {
-          $order = wc_get_order($invoice->metadata->order_id);
-          $this->update_invoice($order, $invoice);
+        $paid_inv = $this->charge->wait($_POST['invoice_id'], LIGHTNING_LONGPOLL_TIMEOUT);
+
+        if ($paid_inv) {
+          $order = wc_get_order($paid_inv->metadata->order_id);
+          $this->update_invoice($order, $paid_inv);
           wp_send_json(true);
         } else {
-          status_header(402);
+          status_header($paid_inv === false ? 410 : 402);
           wp_send_json(false);
         }
       }
@@ -164,17 +165,29 @@ public function show_payment_info($order_id) {
         global $wp;
 
         $order = wc_get_order($order_id);
-        $invoice = $order->get_meta('_lightning_invoice');
 
         if (!empty($wp->query_vars['order-received']) && $order->needs_payment()) {
+          // thankyou page requested, but order is still unpaid
+          wp_redirect($order->get_checkout_payment_url(true));
+          exit;
+        }
+
+        $invoice = $order->get_meta('_lightning_invoice');
+        if ($invoice->status == 'unpaid') {
+          $invoice = $this->charge->fetch($invoice->id);
+          $this->update_invoice($order, $invoice);
+        }
+
+        if ($order->has_status('cancelled')) {
+          // invoice expired, reload page to display expiry message
           wp_redirect($order->get_checkout_payment_url(true));
           exit;
         }
 
         if ($order->needs_payment()) {
           $qr_uri = self::get_qr_uri($invoice);
           require __DIR__.'/templates/payment.php';
-        } else {
+        } elseif ($order->has_status(array('processing', 'completed'))) {
           require __DIR__.'/templates/completed.php';
         }
       }
@@ -191,8 +204,10 @@ protected function update_invoice($order, $invoice) {
         $order->update_meta_data('_lightning_invoice', $invoice);
         $order->save_meta_data();
 
-        if ($order->needs_payment() && $invoice->completed) {
-          $order->payment_complete();
+        if ($invoice->status == 'paid' && $order->needs_payment()) {
+          $order->payment_complete($invoice->id);
+        } else if ($invoice->status == 'expired' && $order->has_status(array('pending', 'on-hold'))) {
+          $order->update_status('cancelled', 'Lightning invoice expired');
         }
       }