3. Widget display variants

- Redirect to widget.

Direct widget link has this type of structure:

https://widget.lunu.io/#/?token=<confirmation_token>&cancel=<redirect url after cancellation>&success=<redirect url after successfull payment>

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

$widget_url = 'https://widget.lunu.io';
$confirmation_token = $payment['confirmation_token'];
$payment_page_url = $widget_url . '/#/?' . http_build_query(array(
  'token' => $confirmation_token,
  'success' => $success_url, 
  'cancel' => $cancel_url, 
));

- Display widget in iframe on your site

Widget iframe initialization via pure js:

<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/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>

Widget iframe initialization via npm-package:

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.