Add To Cart Dialog #

Add To Cart Dialog is a component that displays the summary of the shopping cart. It is normally triggered automatically by the Add To Cart Button component. But in some cases since the Add to Cart Button component opens inside an <iframe> you may want to trigger the Add To Cart Dialog manually.

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 Dialog #

Once the SDK is initialized, you can trigger the Add To Cart Dialog by adding the following line to your website:

QSPay.AddToCartDialog({
  createCartRequest: async function(actions) {
    const {data} = await yourProductRetrievalLogic()
    return actions.create(data)
  },
  onClick: () => {
    window.location.href = `https://checkout.domain.com`
  },
}).render('body')

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
}

createCartRequest #

The createCartRequest parameter sets up the details of the transaction. It's called when the Add To Cart Dialog component mounted.

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.AddToCartDialog({
  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('body')

See also : Product Object

onClick #

The onClick parameter defines what to do after clicking proceed to checkout button in Cart Dialog Component.

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 when the user clicks the proceed to checkout button.

QSPay.AddToCartDialog({
  onClick: function() {
    window.location = "checkout.yourstore.com"
  },
}).render(body)

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