Add To Cart Button Introduction #

When injected Add to Cart Button component into your website, it will render a button within an Iframe that can add the product to the shopping cart. All process is done automatically by the SDK

You just need to provide a Product object that has simple fields like name, price, description, etc.

Initialize the SDK #

First thing you should do is initialize the SDK by adding the following line to your website:

<script type='text/javascript' dev-mount-point
        src='./components/sdk/main.js?store-id={STORE_ID}&locale={LOCALE}'></script>

Add To Cart Button #

Once the SDK is initialized, you can add the Add To Cart Button component to your website by adding the following line to your website:

QSPay.AddToCartButton({
  createCartRequest: async function(actions) {

    //await your product retrieval logic here

    return actions.create([
      {
        price: 69.95,
        listPrice: 69.95,
        quantity: 1,
        description: "Comfort Fit, Wool, Blue",
        productId: 391027,
        discountPercent: 0,
        stockAmount: 150,
        name: "OLYMP Luxor Comfort Fit 1128/12/28",
        imageSrc: "//cdn.depauli.com/pimages/391/391027_200.jpg",
        catalog: "Hemden",
        brand: "OLYMP",
        vatRate: 19,
        sku: null
      }
    ])
  },
  onClick: function() {
    window.location = "checkout.yourstore.com"
  },
  style: {
    primaryColor: '#002f5c',
    primaryHoverColor: '#00366a',
    icon: 'icon.svg',
    rounded: false,
  }
}).render('#target-div')

This code will render the Add To Cart Button component into the #target-div element. You can also pass a style object to customize the button.

Properties #

interface AddToCartButton {
  // Create Cart Request has a function that returns a Product object.
  // async operations are supported
  createCartRequest?: (actions: Actions) => Promise<Product[]>;

  // Defines what to do after clicking proceed to checkout button
  // in Cart Dialog Component which is triggered after product insertion complete
  onClick: Function

  // Customizes the add to cart button style
  style?: StyleOptions
}

createCartRequest #

The createCartRequest parameter sets up the details of the transaction. It's called when the buyer clicks the Add To Cart Button, which launches the Add To Cart Dialog after process is complete.

Because this is a client-side call, Qs-Pay calls the Qs-Pay API on your behalf, so you don't need to provide the headers and body.

The Actions object is used to perform asynchronous operations. Exposes the create action for creating or updating the shopping cart

create action takes an array of Product objects

QSPay.AddToCartButton({
  createCartRequest: async function(actions) {
    //fetch your product logic here
    const { ProductObject } = await axios.get('/your-api/product?id=12345')
    
    //return an array of Product objects into the create action
    return actions.create([ProductObject])
  },
}).render('#target-div')

See also : Product Object

onClick #

The onClick parameter defines what to do after clicking proceed to checkout button in Cart Dialog Component which is triggered after product insertion complete

This component (Add To Cart Button) calls Add To Cart Dialog under the hood when the insert/update product is complete Add To Cart Dialog component has 2 actions when displayed:

• proceedToCheckout: This action is triggered when the user clicks the proceed to checkout button
• cancel: This action is triggered when the user clicks the cancel button

proceedToCheckout action calls the onClick function passed from the Add To Cart Button component

QSPay.AddToCartButton({
  onClick: function() {
    window.location = "checkout.yourstore.com"
  },
}).render('#target-div')

This example redirects buyer to the "checkout.yourstore.com" address.

style #

The style parameter defines the style of the add to cart button. It's an object that contains the following properties, and they are all optional:

interface StyleOptions {
  // The primary color of the button. Default is '#6366f1'
  primaryColor? (this: String) : '#6366f1',
  // The primary color of the button when the mouse is over the button. Default is '#813cf8'
  primaryHoverColor? (this: String) : '#818cf8',
  // The icon of the button. Can be a URL or a base64 encoded string. Default is null 
  icon? (this: String) : null,
  // Whether the button is rounded or not. Default is true.
  rounded? (this: Boolean): true,
  // Defines the text color of the button text. Default is '#ffffff'
  fontColor? (this: String) : '#ffffff',
  // Font boldness of the button. Default is 700
  fontWeight? (this: FontWeightOptions) : 700, /* 200 - light | 400 - regular | 600 - medium | 700 - bold */
  // Font size of the button. Default is '1rem' (16px)
  fontSize? (this: String) : '1rem',
}

QSPay.AddToCartButton({
  style: {
      primaryColor: '#22c55e',
      primaryHoverColor: '#4ade80',
      icon: 'https://img.fromcdn.com/icons/add-to-cart.svg',
  },
}).render('#target-div')

This example turns button color to green with a lighter green hover and a shopping cart icon.