1.3.0 • Public • Published

Build Status

MONEI Widget

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


From CDN

<script src=""></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"

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';
$(() => {

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.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"


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{id}?token={token}

IMPORTANT! If you're using subscription mode, you have to call this endpoint to activate the subscription{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




Package Sidebar


npm i monei-widget

Weekly Downloads






Last publish


  • dmitriy.nevzorov
  • ajaxy