Skip to main content

2. Redirect to payment page.

A link like this can be used to redirect to an individual page:

https://widget.lunu.io/#/?action=select&cancel=https:%2F%2Fwebsite.com%2Fcancel&success=https:%2F%2Fwebsite.com%2Fsuccess&token=922a2f06-6bec-4eee-a55c-76d549f46262

Variant of the static widget page​

Template for generating the URL of a static widget page in PHP:

// $widget_url = 'https://widget.lunu.io';
$widget_url = 'https://widget.testing.lunu.io'; // a variant of the static widget page, in this example "testing"
$confirmation_token = $payment['confirmation_token'];
$payment_page_url = $widget_url . '/#/?' . http_build_query(array(
  'action' => 'select',
  'token' => $confirmation_token, // substitute the time token received when creating the payment
  'success' => $success_url, // setting the address of the page to which the widget will redirect when the payment is successful
  'cancel' => $cancel_url, // setting the address of the page to which the widget will be redirected when it closes without paying
));

Other ways of displaying the payment widget on the page​

The first way.​

To initialize the widget, insert the following code into the body of the html page:

<script>
(function(d, t) {
  var n = d.getElementsByTagName(t)[0], s = d.createElement(t);
  s.type = 'text/javascript';
  s.charset = 'utf-8';
  s.async = true;
  // s.src = 'https://plugins.lunu.io/packages/widget-ui/testing.js?t=' + 1 * new Date(); // testing server
  s.src = 'https://plugins.lunu.io/packages/widget-ui/alpha.js?t=' + 1 * new Date(); // production server
  s.onload = function() {
    const removeWidget = window.Lunu.API.openWidget({
      /*
      Token that must be received from the Processing Service before making a payment
      Required parameter
      */
      confirmation_token: '8cae7ede-944c-49b8-8a55-2a1116f70631',

      callbacks: {
        payment_paid() {
          // Handling a successful payment event
        },
        payment_cancel() {
          // Handling a payment cancellation event
        },
        payment_close() {
          // Handling the event of closing the widget window
        },
      },
    });

    // Cancel the opening of the widget or remove the widget if it is already open.
    // removeWidget();
  };
  n.parentNode.insertBefore(s, n);
})(document, 'script');
</script>

The second way.​

Use NPM package in your front-end application.

const {
  openPaymentWidgetInCurrentWindow,
} = require('lunu-payment');

const removeWidget = openPaymentWidgetInCurrentWindow({
  confirmation_token: '8cae7ede-944c-49b8-8a55-2a1116f70631',

  callbacks: {
    payment_paid: (paymentInfo) => {
      // Handling a successful payment event
    },
    payment_cancel: () => {
      // Handling a payment cancellation event
    },
    payment_close: () => {
      // Handling the event of closing the widget window
    }
  },
});

// Cancel the opening of the widget or remove the widget if it is already open.
// removeWidget();

More about this method here.