---
# System prepended metadata

title: Storefront SDK
tags: [XShop]

---

# Storefront SDK

Storefront SDK (the SDK), currently, consists of `Buy It now` and `Checkout` buttons. They are accessible through declarative web components.

The SDK does not use [shadow dom](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM). Therefore, the styling of the web components can be customized throught ordinary CSS in the hosted page.

## Proxy path for checkout
`https://{{shop_domain}}/a/checkout` <=> `https://{checkout_host}/a/checkout`
Testing: `https://xshopsit.intercart.app/a/checkout`
Live: `https://checkout.xsfshop.com/a/checkout`


## SDK path
Testing: `https://xshopsit.intercart.app/sdk/itccheckoutbtn.js`
Live: `https://cdn.xsfshop.com/cassets/sdk/itccheckoutbtn.js`

## Checkout button `<itc-checkout-btn></<itc-checkout-btn>`
This web component is customizable with `itc-checkout-btn` CSS class.

##### Attribute list

| Name        | Remarks                                            |
| ----------- | -------------------------------------------------- |
| org         | Organization ID                                    |
| shop        | Shop ID (cookie: _shop)                            |
| clientid    | Client ID (cookie: _cid)                           |
| sessionid   | Session ID (cookie: _sid)                          |
| domain      | Current domain of this shop (e.g. www.example.com) |
| fbc         | Facebook `fbc` tracking value                      |
| ip          | Client IP address                                  |
| referrer    | Referrer (e.g. `https://m.facebook.com/...`)       |
| utmsource   | UTM Source (`utm_source`)                          |
| utmmedium   | UTM Medium (`utm_medium`)                          |
| utmcampaign | UTM Campaign (`utm_campaign`)                      |
| utmterm     | UTM Term (`utm_term`)                              |
| utmcontent  | UTM Content (`utm_content`)                        |
| text        | Text (e.g. `Checkout`)                             |

## Buy It now button `<itc-buy-it-now-btn></<itc-buy-it-now-btn>`
This web component is customizable with `itc-buy-it-now-btn` CSS class.
This Web component will create a `type 2` XShoppy cart with `getProducts.getAttributes()` API data.

If the `disable` attribute is set to `true`, `itc-buy-it-now-btn-disabled` CSS class will be added to the web component.

##### Attribute list

| Name        | Remarks                                            |
| ----------- | -------------------------------------------------- |
| org         | Organization ID                                    |
| shop        | Shop ID (cookie: _shop)                            |
| clientid    | Client ID (cookie: _cid)                           |
| sessionid   | Session ID (cookie: _sid)                          |
| domain      | Current domain of this shop (e.g. www.example.com) |
| fbc         | Facebook `fbc` tracking value                      |
| ip          | Client IP address                                  |
| referrer    | Referrer (e.g. `https://m.facebook.com/...`)       |
| utmsource   | UTM Source (`utm_source`)                          |
| utmmedium   | UTM Medium (`utm_medium`)                          |
| utmcampaign | UTM Campaign (`utm_campaign`)                      |
| utmterm     | UTM Term (`utm_term`)                              |
| utmcontent  | UTM Content (`utm_content`)                        |
| text        | Text (e.g. `Buy it now`)                           |
| disable     | `false` or `true` (default: `false`)               |

## PayPal Checkout button `<itc-paypal-btn></<itc-paypal-btn>`
This web component is customizable with `borderradius` and `height` attributes.

##### Attribute list

| Name          | Remarks                                            |
| ------------- | -------------------------------------------------- |
| org           | Organization ID                                    |
| shop          | Shop ID (cookie: _shop)                            |
| clientid      | Client ID (cookie: _cid)                           |
| sessionid     | Session ID (cookie: _sid)                          |
| domain        | Current domain of this shop (e.g. www.example.com) |
| fbc           | Facebook `fbc` tracking value                      |
| ip            | Client IP address                                  |
| referrer      | Referrer (e.g. `https://m.facebook.com/...`)       |
| utmsource     | UTM Source (`utm_source`)                          |
| utmmedium     | UTM Medium (`utm_medium`)                          |
| utmcampaign   | UTM Campaign (`utm_campaign`)                      |
| utmterm       | UTM Term (`utm_term`)                              |
| utmcontent    | UTM Content (`utm_content`)                        |
| text          | Text (e.g. `Pay with`)                             |
| borderradius  | Border Radius of the button (default: `5px`)       |
| height        | Height of the button (default: `55px`)             |

## PayPal Buy It now button `<itc-paypal-buy-it-now-btn></<itc-paypal-buy-it-now-btn>`
This web component is customizable with `borderradius` and `height` attributes.
This Web component will create a `type 2` XShoppy cart with `getProducts.getAttributes()` API data.

##### Attribute list

| Name          | Remarks                                            |
| ------------- | -------------------------------------------------- |
| org           | Organization ID                                    |
| shop          | Shop ID (cookie: _shop)                            |
| clientid      | Client ID (cookie: _cid)                           |
| sessionid     | Session ID (cookie: _sid)                          |
| domain        | Current domain of this shop (e.g. www.example.com) |
| fbc           | Facebook `fbc` tracking value                      |
| ip            | Client IP address                                  |
| referrer      | Referrer (e.g. `https://m.facebook.com/...`)       |
| utmsource     | UTM Source (`utm_source`)                          |
| utmmedium     | UTM Medium (`utm_medium`)                          |
| utmcampaign   | UTM Campaign (`utm_campaign`)                      |
| utmterm       | UTM Term (`utm_term`)                              |
| utmcontent    | UTM Content (`utm_content`)                        |
| text          | Text (e.g. `Pay with`)                             |
| borderradius  | Border Radius of the button (default: `5px`)       |
| height        | Height of the button (default: `55px`)             |
| disable       | `false` or `true` (default: `false`)               |

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Intershop Checkout UI Product Page - xshoppy integration</title>
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <style>
    .itc-count {
      color: #9400D3;
    }
  </style>
  <script>
  <script defer="defer" src="https://xshopsit.intercart.app/sdk/itccheckoutbtn.js"></script>
</head>
<body>
  <div>
    <div>
      <itc-buy-it-now-btn org="xshoppy-organization-id" shop="xshoppy-shop-id"></itc-but-it-now-btn>
    </div>

    <div>
      <itc-checkout-btn org="xshoppy-organization-id" shop="xshoppy-shop-id"></itc-checkout-btn>
    </div>
  </div>
</body>
</html>
```


## 立即购买需调用添加购物车信息


```json
Request:
POST https://{{default_domain}}/buyer/cart/add
Body:
{
	"cart_data": [
		{
			"sku_id": 126732,  //sku id
			"quantity": "1",  //数量
			"attribute": {},  //属性， 可忽略
			"new_add": 1,  // 默认传1
			"sort_by": 0 //可忽略
		}
	],
	"coupon_code": "12312312", //当前填写的优惠券
	"cart_type": "2",   //1 正常购物   2立即支付  默认传2 立即支付
	"country_id": "",    //可忽略
	"current_sku_id": "",   //当前skuid 可忽略
	"current_product_id": "15956",  //当前商品id 可忽略
	"cod_package_id": "",  //产品套餐ID 可忽略
	"cod_package_num": ""   //产品套餐ID 可忽略
}
Response:
200 (OK)
{
    "code": 0,
    "msg": "success",
    "data": {
        "express": { //运费
            "has_insurance": "0",
            "insurance_select": "1",
            "is_match": 0,
            "error_code": 0,
            "selected": 0,
            "list": []
        },
        "cart": { // 购物车
            "type": "2",  //cart_type
            "token": "4536882545677cd67cc5ccba118d7960", // cart_token
            "weight": "907.00",
            "product_amount": "49.97",
            "product_amount_ceil": 50,
            "has_invalid": false,
            "has_removed": false,
            "has_loweroff": false,
            "weight_gram": 907,
            "remark": "",
            "count": 1,
            "list": [
                {
                    "shop_id": "122",
                    "product_id": "15954",
                    "title": "",
                    "price": "49.97",
                    "compare_at_price": "1.00",
                    "sku_code": "NL-CLOUD-LED",
                    "options": "",
                    "grams": "0",
                    "weight": "907.00",
                    "weight_unit": "",
                    "upc": "",
                    "image_id": "85206",
                    "image_tmp_url": "",
                    "is_set_default_img": "0",
                    "spec": "[]",
                    "sort": 2,
                    "inventory_quantity": "1000",
                    "requires_shipping": "0",
                    "utm": "",
                    "is_checked": "1",
                    "is_show": "0",
                    "is_del": "0",
                    "created_at": "2023-08-21 18:22:29",
                    "updated_at": "2023-08-24 14:14:33",
                    "sku_id": "126730",
                    "is_use_stock": "1",
                    "soldout_policy": "N",
                    "product_stock": "1000",
                    "product_handler": "cloud-led-neon-light",
                    "product_title": "Cloud LED Wall Light",
                    "image": {
                        "file_key": "uploader/7746f80e63f42d942ad5ce99b13315551df1cab0.jpg",
                        "file_preview": "https://mysail-paas-dev.oss-cn-shenzhen.aliyuncs.com/uploader/7746f80e63f42d942ad5ce99b13315551df1cab0.jpg",
                        "file_id": "85206",
                        "file_keys": ",,,uploader/7746f80e63f42d942ad5ce99b13315551df1cab0.jpg",
                        "file_previews": ",,,https://mysail-paas-dev.oss-cn-shenzhen.aliyuncs.com/uploader/7746f80e63f42d942ad5ce99b13315551df1cab0.jpg",
                        "new": {
                            "origin_image": "https://mysail-paas-dev.oss-cn-shenzhen.aliyuncs.com/uploader/7746f80e63f42d942ad5ce99b13315551df1cab0.jpg",
                            "750": "",
                            "900": "",
                            "1080": ""
                        },
                        "file_preview_resize": "https://mysail-paas-dev.oss-cn-shenzhen.aliyuncs.com/uploader/7746f80e63f42d942ad5ce99b13315551df1cab0.jpg?x-oss-process=image/resize,w_120"
                    },
                    "data_price": "49.97",
                    "data_compare_at_price": "0.00",
                    "is_invalid": 0,
                    "is_remove": 0,
                    "is_lower": 0,
                    "new_customize": "",
                    "quantity": 1,
                    "new_add": 1,
                    "properties": "",
                    "item_id": "8e6a0c16616bc26edf95628af0baad92",
                    "attribute": [],
                    "sort_by": 0,
                    "unique_id": "6613b9d10e613",
                    "is_limitoffer": 0,
                    "limitoffer_label": 0,
                    "limitoffer_product_total": 0,
                    "limitoffer_product_discount_total": 0,
                    "coupon_label": "",
                    "product_discount": "1.00",
                    "product_amount": "48.97",
                    "is_discount": 0,
                    "coupon_id": 0,
                    "is_input_number": 1,
                    "is_meet_discount_offer": 0,
                    "meet_discount_offer_text": "",
                    "insurance_amount": 0,
                    "customize_price": 0,
                    "preview_url": "/products/cloud-led-neon-light",
                    "total_quantity": 1,
                    "key": ""
                }
            ],
            "attr": {
                "cod_package_id": "",
                "cod_package_num": 1,
                "is_open_insurance": 1,
                "is_open_tips": 1
            },
            "product_customize_info": [],
            "is_open_tips": 1,
            "is_open_insurance": 1
        },
        "coupon": {
            "ret": 1,
            "is_open": 1,
            "coupon_code": "12312312",
            "is_applicable_match": 0,
            "total_discount": "1.00",
            "goods_discount": "1.00",
            "express_discount": "0.00",
            "coupon_type": "1",
            "is_auto": 1,
            "applicable_type": 0,
            "type": 1,
            "match_list": {
                "6613b9d10e613": {
                    "unique_id": "6613b9d10e613",
                    "shopId": "122",
                    "goodsId": "15954",
                    "skuId": "126730",
                    "catIds": [],
                    "goodsPrice": "49.97",
                    "num": 1,
                    "new_add": 1,
                    "multi_discount": 0,
                    "coupon_detail": [],
                    "coupon_id": 0,
                    "key": "",
                    "goods_amount": "48.97",
                    "goods_discount": "1.00"
                }
            },
            "detail": [
                {
                    "coupon_id": 0,
                    "coupon_code": "",
                    "applicable_range": 0,
                    "is_unlimited": 0,
                    "is_auto": 0,
                    "coupon_type": 0,
                    "coupon_desc": "",
                    "amount_discount": "0.00",
                    "total_discount": "0.00",
                    "goods_discount": "0.00",
                    "express_discount": "0.00",
                    "condition_type": 0,
                    "reached_amount": 0,
                    "coupon": 0,
                    "coupon_label": "",
                    "coupon_list": [
                        {
                            "id": 0,
                            "match": "",
                            "next": "",
                            "ret": 0,
                            "discount": "0.00",
                            "is_top": 0,
                            "match_rule": [],
                            "next_rule": []
                        }
                    ],
                    "type": 2,
                    "desc": ""
                },
                {
                    "ret": 1,
                    "coupon_code": "12312312",
                    "coupon_id": "3296",
                    "coupon_type": "1",
                    "order_number": "",
                    "applicable_range": "1",
                    "total_discount": "1.00",
                    "discount_type": "goods",
                    "coupon": "1.00",
                    "error_code": 0,
                    "condition": "49.97",
                    "is_auto": "0",
                    "is_unlimited": "1",
                    "reached_amount": "0.00",
                    "coupon_desc": "",
                    "desc": "12312312",
                    "field": "orderAmount",
                    "match_list": {
                        "6613b9d10e613": {
                            "key": "12312312",
                            "goods_discount": "1.00",
                            "goods_amount": "48.97"
                        }
                    },
                    "condition_type": 0,
                    "type": 1,
                    "coupon_label": ""
                }
            ],
            "coupon_list": [
                {
                    "id": 0,
                    "match": "",
                    "next": "",
                    "ret": 0,
                    "discount": "0.00",
                    "is_top": 0,
                    "match_rule": [],
                    "next_rule": []
                }
            ],
            "number_discount_goods": [],
            "error_code": 0,
            "next": "",
            "rule": [],
            "matched": "",
            "coupon_gifts_collect": [],
            "has_auto": 1
        },
        "total": {
            "total": "48.97",
            "subtotal": "49.97",
            "shipping": "0.00",
            "discount": [
                {
                    "desc": "12312312",
                    "fee": "-$1.00"
                }
            ],
            "amount": "48.97",
            "product_amount": "49.97",
            "express_amount": "0.00",
            "express_payable_amount": "0.00",
            "product_payable_amount": "48.97",
            "insurance": "0.00",
            "tips_amount": "0.49"
        },
        "purchase_limit": {
            "is_limited": 0,
            "limit_num": 0,
            "limited_product_url": ""
        }
    },
    "now": "2024-04-08 17:33:05"
}
```
