# 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"
}
```
Sign in with Wallet
Connect another wallet