Direct to Checkout

Direct to Checkout is the most efficient checkout experience for shoppers, offering an optional quick product detail page preview and fast one-click checkout. That's also the most lightweight integration method to date.

Direct to Checkout tag

To render an inline product detail page with one-click checkout, a tag must be inserted:

<div data-tipser-direct-to-checkout data-tipser-product-id="61b3bccfe44b65e46178fd13"></div>

Make sure that data-tipser-product-id is actually an id of Bolt's product.

Inserting a valid tag with product that is in stock, renders as following:

And then, when "Buy now" is pressed, shopper is moved to the checkout page:

Direct to Checkout options

paramDescription
data-tipser-product-idProduct id of the product to be rendered as PDP (product detail page) to allow variant selection. Must follow the same constraints as in the Product API
data-tipser-show-pdpBoolean, defaulting to true. Indicates if PDP should be shown. If false and variant id is provided, the component will render as an instant checkout
data-tipser-variant-idVariant id of the buyable SKU that will be added to cart when in the showPdp=false mode
data-tipser-affiliate-urlAdditional metadata that will be added to the line item when checking out
data-tipser-productBeta - product data that will be imported (no product id is required). More on that in the section: Dynamic Import

Dynamic Import

Minimal product payload that must be provided for the dynamic import is specified below.

πŸ“˜

That functionality is by default disabled for publishers, so please contact our support for more info on how to enable Dynamic Import on your site.

interface ImportableProduct {
  merchantProductUrl: string;
  title: string;
  brandName: string;
  categoryId: string;
  merchantImageUrl: string; 
  price: number; 
  salesPrice: number;
  freightCost: number;
  variantSku: string; 
  productSku?: string;
  attributes: {
    [key: string]: string;
  };  
}

Dynamic import parameters

paramDescription
merchantProductUrl(original) merchant product URL - ex. nike.com/p/pid
titleProduct title
brandNameProduct brand name
categoryIdCategory Id according to Bolt's internal taxonomy (reach out to Bolt for the up-to-date category reference)
merchantImageUrlProduct image URL
priceProduct price, including VAT (for Europe), but excluding sales tax for US, eg. 20.22 is $20.22, given USD is the currency assigned to the merchant
salesPriceProduct sales price, including VAT (for Europe), but excluding sales tax for US
freightCostFreight cost
variantSkuUnique identified of the product SKU
attributesKey-value of attribute name and value, eg. { color: "Black", size: 8.5 }
productSkuOptional, unique identifier of the product group (in case the product has variants)

Direct to Checkout function

If a product page and checkout should render in an overlay modal, a function should be used instead:

tipserScript.goToDirectToCheckout(productId);