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
}