Quickstart
Explore a full, working code sample of an integration with Nemuru. The client and server-side code embeds a prebuilt payment form on your website.
To get you up to speed, we recommend checking out this sample repository. It includes code snippets for embedding the prebuilt payment form on your website.
Installation
Import nemuru.js into your web client. Make sure it is completly loaded.
Always load nemuru.js from cdn.nemuru.com. Don’t include the script in a bundle or host it yourself.
<head>
<script src="https://cdn.nemuru.com/assets/stg/nemuru.stg.js"></script>
</head>
Call Nemuru.init() to initialize the library with your client_id. Make sure to await this promise before proceeding further.
<body>
<script>
const initialize = async () => {
await Nemuru.init({
clientId: "YOUR_CLIENT_ID",
configuration: { currency: "EUR", locale: "es-ES" },
});
};
initialize();
</script>
</body>
Pre-checkout
You can use the Nemuru.availableConditions(), to anticipate which products are available for a specific amount before rendering any widget.
If you prefer to consume the raw data and
present available credit conditions to your customer in whichever way you
choose, you can use Nemuru.calculateConditions() method.
<nemuru-simulation
conditions-amount="87500"
conditions-product="instalments"
style-color="#3E6AE1"
style-variant="select"
style-branding="YOUR_BRANDING"
></nemuru-simulation>
KIVIK 3-seat sofa
A memory foam sofa adapts to your body for comfy support, and it's a place where memories are made.
875.00 €
Checkout
Availability (client-side)
Ensure that financing conditions are available before displaying the BNPL option in your checkout. You can achieve this by using Nemuru.availableConditions() method on the client side.
<html>
<head>
<style>
#checkout-btn {
display: none;
}
</style>
</head>
<body>
<!-- Your Checkout button -->
<button id="checkout-btn">Checkout</button>
<script>
const conditions = Nemuru.availableConditions({ amount: 875 });
if (conditions.length > 0) {
// Display the Checkout button if conditions are available
document.querySelector("#checkout-btn").style.display = "block";
}
</script>
</body>
</html>
Checkout button (client-side)
When the customer clicks on your checkout button, you should prepare a function to mount the checkout widget. For that, you'll neeed an order_id and access_token.
Add an endpoint on your server that authenticates with Nemuru and creates an order, thus obtaining the necessary order_id and access_token.
<body>
<!-- Your Checkout button -->
<button type="button" id="checkout-btn" onclick="checkout();">
<script>
const checkout = async () => {
const response = await fetch("/create-order", { method: "POST" });
const { order_id, access_token } = await response.json();
};
</script>
</body>
Create order (server-side)
Add an endpoint on your server that authenticates with Nemuru and creates an order.
Get the access_token with your username and password.
Use that token to create an order. The order_id is included in the order response headers.
The client uses that order_id and accesst_token to mount the checkout widget. Return these two values in your response.
const express = require("express");
const app = express();
app.use(express.static("public"));
app.post("/create-order", async (req, res) => {
const auth = await fetch(`${API_NEMURU_URL}/auth/login/`, {
method: "POST",
body: JSON.stringify({ username: USERNAME, password: PASSWORD }),
});
const { access_token } = await auth.json();
const order = await fetch(`${API_NEMURU_URL}/order/`, {
method: "POST",
headers: {
Authorization: `Bearer ${access_token}`,
...
},
body: JSON.stringify({
product: "instalments",
merchant: {
order_reference_1: "7QuHQ5WVQQqyWVPW",
notification_url: `${YOUR_DOMAIN}/notification`,
},
cart: {
total_price_with_tax: 875,
currency: "EUR",
items: [
{
article: {
name: "KIVIK 3-seat sofa",
unit_price_with_tax: 875,
...
},
units: 1,
total_price_with_tax: 875,
},
],
},
}),
});
const order_id = order.headers.get("Id");
res.json({ access_token, order_id });
});
app.listen(4000, () => console.log("Running on port 4000"));
Open the checkout widget (client-side)
Mount the checkout widget to the placeholder <div> in your payment form. Checkout is rendered in an iframe that securely sends payment information to Nemuru over an HTTPS connection.
Avoid placing the checkout widget within another iframe because some payment methods require redirecting to another page for payment confirmation.
Set the onClose callback to redirect your customer to the corresponding page on your site. Nemuru supplies the current status to your callback so you can redirect your customer accordingly. Nonetheless, we recommed you to check the order status via server-side call.
<body>
<button type="button" id="checkout-btn" onclick="checkout();">
<div id="nemuru-checkout"></div>
<script>
const checkout = async () => {
document.querySelector("#checkout-btn").setAttribute("disabled", "true");
// Create an order
const response = await fetch("/create-order", { method: "POST" });
const { order_id, access_token } = await response.json();
// Display the Checkout widget
Nemuru.checkout({
container: "nemuru-checkout",
orderId: order_id,
accessToken: access_token,
style: { branding: "default" },
onClose: (status) => console.log(status),
});
};
</script>
</body>
Order confirmation (server-side)
You will receive a server-side callback to your notification_url when the payment method requires confirmation by your side. Nemuru will expect that you respond with specific status codes to determine whether the order should be confirmed or rejected.
If you can guarantee that your order has not been modified since its creation, you can make use of autoconfirm in your response.
{
"order_id": "e60fb9d8-97d4-4653-bc7e-d49b203a6980",
"order_reference_1": "76t7y7sau8y398y",
"event": "order_status_changed",
"triggered_at": "2022-06-30T09:42:15+00.00",
"status": "approved"
}
const express = require("express");
const app = express();
app.use(express.static("public"));
app.use(express.json());
app.post("/notification", async (req, res) => {
const body = req.body;
if (body.status === "approved") {
res.json({ autoconfirm: true });
}
});
app.listen(4000, () => console.log("Running on port 4000"));
Post-checkout
Capture order (server-side)
When physical products are shipped to the customer, partial and total captures trigger disbursements from the lender.
Add an endpoint on your server to capture the order. You can partially or fully capture the order.
This step can be omitted if you want to auto-capture the order when the order is confirmed. To do so, set auto_shipping when creating the order.
app.post("/capture", async (req, res) => {
const orderId = req.body.orderId;
const order = await fetch(`${API_NEMURU_URL}/order/${orderId}/capture/`, {
method: "POST",
headers: {
Authorization: `Bearer ${access_token}`,
...
},
body: JSON.stringify({
transactional: true
}),
});
});