Open the Checkout widget

The Checkout widget displays available payment options to the customer and collects all the data required to send the request to our lenders. To allow this, you will need to render it on your checkout page alongside any other payment methods you may offer.

Once you have successfully created an Order in Nemuru and obtained the order_id, proceed with the following steps to integrate the widget on your site.

info

Firstly, make sure to load and initialize the nemuru.js JavaScript library if you haven't already.

1. Add a container on your site

Place a div element where you’d like to display the Checkout widget on your site. This element must have an id attribute. Note that the element must be a div and not a span or other non-block element.

<div id="nemuru-checkout"></div>

2. Display the Checkout widget

Next, load the widget using the .checkout() method available in the Nemuru object provided by the JavaScript library, passing the following fields:

Nemuru.checkout({
  container: "nemuru-checkout",
  orderId: "41c325c0-161c-43d6-bb4f-65f6b50b9ba0",
  accessToken: "Q3vDmRUCuTltHvLagKUeny8uVr6CaYHZd4",
  style: {
    color: "#3E6AE1",
    branding: "your_branding",
    variant: "modal",
  },
  behaviour: {
    disableClose: false,
    disableFormEdition: false,
    expirationTimeInMinutes: 120,
  },
  onStatusChange: (status) => {
    if (status === "approved") {
      // do something on approved
    }
    if (status === "denied") {
      // do something on denied
    }
  },
  onClose: (status) => {
    // do something on close
  },
  onError: (error) => {
    // do something on error
  },
});

Parameter details:

Field	Type	Required	Description	Example
container	string	Required	The id attribute of the div element where the Checkout widget will be displayed.	"nemuru-checkout"
orderId	string	Required	The order_id received in the response from the POST Create Order call.	"41c325c0-161c-43d6-..."
accessToken	string	Required	The access_token received in the response from the POST Login call.	"Q3vDmRUCuTltHvLagK..."
style	object	Required	Parameters to configure the appearance of the widget.
style.color	string	Optional	A valid HEX color that will be used to customize the widget, highlighting some elements of it.	"#3E6AE1"
style.branding	string	Required	This value will be provided by Nemuru. Depending on this value, one or another version of the widget will be rendered. This includes: legal texts, different functionalities, UI elements, logos, etc.	"your_branding"
style.variant	string	Optional	The variant allows rendering different visual variants of the checkout widget. Allowed values are: modal, embedded. The default value is modal.	"modal"
behaviour	object	Optional	Parameters to configure the behaviour of the widget.
behaviour.disableClose	boolean	Optional	If true, the close button will be hidden in the widget.Default value is: false.	false
behaviour.disableFormEdition	boolean	Optional	If true, the data you passed within the POST Create Order call will not be editable by the customer. In other words, the form will display the data, but it will be disabled. Default value is: false.	false
behaviour.expirationTimeInMinutes	number	Optional	Amount of time (in miuntes) to complete the checkout process within the widget. The counter starts when the order is created and stops when the credit card form is submitted. If the time is exceeded, Nemuru will cancel the order automatically.	120
onStatusChange	function	Optional	This callback fires every time there is a status change in the installment payment request. The possible received statuses are defined in the following section: initial, confirmed, on_hold, denied, expired, cancelled
onClose	function	Optional	This callback fires when the customer closes the Checkout widget. The possible received statuses are defined in the following section: initial, confirmed, on_hold, denied, expired, cancelled, desisted
onError	function	Optional	This callback fires every time there is an error. For example, the accessToken is not valid because it has already expired.

info

To open the Checkout widget you'll have to previously get an access token through a server-side call, and pass it to the .checkout() function.