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.

| Option | Required | Default | Details | |------------- |----------|----------------------------------- |-------------------------------- | | amount | * | | | | currency | * | | | | token | * | | | | planId | | | Subscription plan id to activate subscription mode | | redirectUrl | * | | The transaction id and token will be passed to this URL| | paymentType | | DB | PA (Preauthorization) or DB (Debit)| | name | | empty | Product name in popup header | | description | | empty | Product description in popup header | | descriptor | | empty | Descriptor that will be shown in customer's bank statement | | checkoutButtonText| | Pay {amount} | {amount} will be replaced with amount value with currency | | submitButtonText| | Pay now | {amount} will be replaced with amount value with currency | | brands | | 'VISA MASTER' | String with space as delimiter. Available options: VISA MASTER MAESTRO JCB| | noEnhance | | false | Disables default styling | | showCardHolder| | false | Shows cardholder name input | | testMode | | false | Enables test mode. (You need to pass test mode token)| | customer | | empty | You can pass an information about your customer to a widget. It will be saved in the transaction| | billing | | empty | You can pass an information about customer's billing address to a widget. It will be saved in the transaction | | customParameters| | empty | You can pass any additional information to a widget. It will be saved in the transaction (each key will be prefixed with SHOPPER_) |

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