monei-widget v1.3.0

MONEI Widget

An easy way to accept payments from your customers. Embed this widget on your website, blog or online store.

Install

From CDN

<script src="https://widget.monei.net/widget.js"></script>

From npm

npm install monei-widget

Quick start

Generate the HTML code for your widget in MONEI dashboard

Insert the code where you want your widget to show up.

<div class="monei-widget"
  data-amount="100"
  data-currency="eur"
  data-token="{TOKEN}"
  data-redirect-url="http://yoursite.com/monei-callback"
></div>

If you are using npm module: import 'monei-widget'

Manual setup

You can disable auto-setup and use setupAll() to setup your widgets manually:

// Example (ES2015 and jQuery)
import moneiWidget from 'monei-widget';
moneiWidget.disableAutoSetup();

$(() => {
  moneiWidget.setupAll();
});

Overriding options

You can setup a particular widget with setup(element, options) and override some data- attributes with a JavaScript object:

// Example (ES2015 and jQuery)
import moneiWidget from 'monei-widget';
moneiWidget.disableAutoSetup();

$(() => {
  moneiWidget.setup('widget_element_id', {
    name: 'Gone With the Wind',
    description: 'What a lovely story!',    
    buttonText: 'Pay with Card',
    customer: {
      givenName: 'John',
      surname: 'Doe'
    },
    billing: {
      street1: 'Street 1',
      street2: 'Street 2',
      country: 'ES',
      city: 'Malaga',
      state: 'Malaga',
      postcode: '12345'
    },
    customParameters: {
      foo: 'bar'
    }
  });
});

Use own button styling

Set noEnhance to true to disable default styling:

<a href="#" class="monei-widget" data-no-enhance="true" ...>Donate $100</a>

Subscription mode

To use the subscription mode, you need to specify planId. amount and currency are not needed in this case

<div class="monei-widget"
  data-plan-id="my-plan"
  data-token="{TOKEN}"
  data-redirect-url="http://yoursite.com/monei-callback"
></div>

Demo

https://widget.monei.net/index.html

List of available options

You can either use data-dashed-case HTML attributes or a JavaScript object with camelCase options as setup() second parameter.

More about available fields

Get the payment status

to get the status of the payment, you should make a GET request to the

https://api.monei.net/checkouts/{id}?token={token}

IMPORTANT! If you're using subscription mode, you have to call this endpoint to activate the subscription

https://api.monei.net/plans/{planId}/subscriptions/payment-status?token={token}&checkoutId={id}

you'll get id and token as a query parameters appended to the redirect URL

Read about response structure and avaliable parameters in documentation