​
1. Create a negotiation session

In your server-side code, create an API route to start a SaleSnip session using the SaleSnip API.

https://api.example.com/negotiate
const config = {
  // TODO: Replace with your project id
  projectId: "[YOUR_PROJECT_ID]",
  currency: "USD", // The currency code for the negotiation.
  products: [
    {
      id: "product_id", // Your internal product ID
      name: "Product Name", // Product name displayed to the user
      description: "Product Description", // Optional, a short product description
      image: "https://example.com/product.png", // Optional, a URL to the product image
      price: {
        initial: 100.0, // The original price of the product per unit
        minimum: 80.0, // The minimum price of the product that can be negotiated per unit
      },
    },
  ],
};

const session = await axios.post(
  "https://api.salesnip.com/v1/sessions",
  config,
  {
    headers: {
      "Content-Type": "application/json",
      "X-Api-Key": process.env.SALESNIP_API_KEY,
    },
  },
);

res.status(200).json({ session: session.data.id });

Ensure this code is run server-side only to protect your API key.

You find the full API reference of this SaleSnip API route here.

​
2. Open the widget

​
2.1. Install the SaleSnip Snippet

Integrate the SaleSnip snippet into your website by adding the following script within the tags, ideally just before the closing tag.

SaleSnip Snippet
<script>
!function(e,n){if(!n.loaded){var t,a,r=n||{};for(r.__queue=[],(n=e.createElement("script")).type="text/javascript",n.async=!0,n.src="https://cdn.salesnip.com/v1/script.min.js",(o=e.getElementsByTagName("script")[0])?o.parentNode.insertBefore(n,o):e.head.appendChild(n),r.__handler=function(e){return function(){r.__queue.push([e].concat(Array.prototype.slice.call(arguments,0)))}},t="open on off".split(" "),a=0;a<t.length;a++){var i=t[a];r[i]=r.__handler(i)}var o=new Proxy(r,{get:function(e,n){return n in e||(e[n]=r.__handler(n)),e[n]}});window.salesnip=o,window.salesnip.loaded=1}}(document,window.salesnip||{});
</script>

​
2.2. Open the widget

Open the SaleSnip widget
// TODO: Replace with your API route from the previous step
const res = await fetch("(YOUR_API_URL)/negotiate", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    // Add information about the product selected by the user if needed
  }),
});

// TODO: Handle the error
if (!res.ok) throw new Error("Failed to start negotiation");
const body = await res.json();

window.salesnip.open(body.session, {
  theme: {
    mode: "dark", // Optional, can be 'dark' or 'light'. Defaults to 'light'
  },
});

​
3. Start the checkout or payment

​
3.1 Create a Checkout API Route

Create an API route that loads the session data from SaleSnip and starts the checkout or payment process.

https://api.example.com/checkout
// Load the SaleSnip session data
const session = await axios.get(
  `https://api.salesnip.com/v1/sessions/${req.body.session}`,
  {
    headers: {
      "X-Api-Key": process.env.SALESNIP_API_KEY,
    },
  },
);

// TODO: Checkout all products in session.products with their negotiated price (data.products[number].price.current)
// Make sure to multiply the unit price by the quantity to get the total price.

Ensure this code is run server-side only to protect your API key.

You find the full API reference of this SaleSnip API route here.

​
3.2 Capture Negotiation Events

Listen to the SaleSnip complete event to start the checkout or payment.

SaleSnip Events
// The complete event is triggered when the user agrees to a negotiated price
window.salesnip.on("complete", onNegotiationComplete);

function onNegotiationComplete(data) {
  // TODO: Replace with your API route from the previous step
  fetch("(YOUR_API_URL)/checkout", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      session: data.id,
    }),
  });

  // TODO: Start the checkout or payment process
}