Express Checkout #

Express Checkout is a simplified version of our checkout product. It makes shopping easy with just one button click on a product page. Your customers can easily shop without having to go through an extensive checkout process.

Express Checkout is like our checkout system, but without the subdomain. It works independently of the checkout system that is integrated with the DNS record. They are identical but have different shopping cart instances to operate.

It is a great option for selling without adding shopping cart functionality.

When you use this component, an Express Checkout button is added to your product detail page, similar to the Add to Cart component. However, when the buyer clicks the button, it triggers a checkout process that opens in a pop-up window. Instead of adding a product to the cart, Express Checkout creates another cart instance. This way, the shopping cart is independent of the checkout system.

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>

Express Checkout Button #

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

 QSPay.ExpressCheckoutButton({
  createCartRequest: async (actions) => {
    const { data } = await yourProductRetrievalLogic()
    return actions.create(data)
  },
  onApprove: (orderId) => {
    // you can redirect your customer to our finished order page
    // our you can implement your own logic by using the orderId
    window.location = `https://checkout.yourstore.com/checkout/thank-you?id=${orderId}`
  },
  onCancel: () => {
    // runs when buyer terminates the checkout process.
    // you can implement your own logic.
  },
  style: {
    primaryColor: '#6930c3',
    primaryHoverColor: '#5f2bb3',
    ...
  },
}).render('#target-div');

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.ExpressCheckoutButton({
  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

onApprove #

onApprove event runs when the buyer finishes the checkout process. You can either choose the redirect the buyer to your own order complete page or you can use ours by using the orderId.

onApprove: function(orderId) {
  window.location = `https://checkout.yourstore.com/checkout/thank-you?id=${orderId}`
}

onCancel #

onCancel event runs when the buyer terminates the checkout process. You can implement your own logic.

onCancel: function() {
  // we can simply choose nothing to do here
  return true
}

style #

The style parameter defines the style of the express checkout button. It has the same style interface as Add to Cart component. 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',
}