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