Compatible with Partbot connected ecommerce stores and synced products.
Please see the LICENSE file for more information.
Add the React component to your project by running:
npm install @cartbot/shipping-calculator
or
yarn add @cartbot/shipping-calculator
Import the React component into your project and pass in the required props.
import ShippingCalculator from "@cartbot/shipping-calculator";
const App = () => {
return (
<ShippingCalculator
apiKey="YOUR_API_KEY"
sku="YOUR_SKU"
brand="YOUR_BRAND"
/>
);
};| Prop | Type | Required | Description |
|---|---|---|---|
| apiKey | string | true | Your Partbot API key. |
| sku | string | true | The SKU of the product you want to calculate shipping for. |
| brand | string | true | The brand of the product you want to calculate shipping for. |
| quantity | number | false | The quantity of the product you want to calculate shipping for. Defaults to 1. |
| weight | number | false | Product weight in kilograms |
| price | number | false | Product price in dollars (AUD) |
| showLabel | boolean | false | Show the label "Calculate Shipping" above the input. Defaults to true. |
| themeColor | string | false | The color of the input border and button. Defaults to #4f46e5. |
The React component can also be used as a Web Component.
Add the following script tag to your project to load the Web Component JavaScript file:
<script src="//unpkg.com/@cartbot/shipping-calculator@latest/dist/shipping-calculator.js" async></script>
Add the following HTML to your project to render the Web Component, passing in the required props as data-* attributes:
<shipping-calculator
data-api-key="YOUR_API_KEY"
data-sku="YOUR_SKU"
data-brand="YOUR_BRAND"
data-quantity="1"
data-theme-color="#4f46e5"
/>Learn more at shipping-calculator.partbot.io