{"id":27996478,"url":"https://github.com/bold-commerce/checkout-react-components","last_synced_at":"2025-10-13T10:37:32.873Z","repository":{"id":39789882,"uuid":"334265105","full_name":"bold-commerce/checkout-react-components","owner":"bold-commerce","description":"React component library for creating checkout experiences utilizing Bold APIs","archived":false,"fork":false,"pushed_at":"2023-05-12T03:38:08.000Z","size":794,"stargazers_count":4,"open_issues_count":3,"forks_count":2,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-08-19T20:38:34.597Z","etag":null,"topics":["checkout","javascript","library","react","snyk-scan"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bold-commerce.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-01-29T21:18:06.000Z","updated_at":"2024-09-11T14:40:08.000Z","dependencies_parsed_at":"2025-05-08T21:44:28.201Z","dependency_job_id":"857bd84b-c104-4028-9e7d-edb2abdb57c3","html_url":"https://github.com/bold-commerce/checkout-react-components","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/bold-commerce/checkout-react-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bold-commerce%2Fcheckout-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bold-commerce%2Fcheckout-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bold-commerce%2Fcheckout-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bold-commerce%2Fcheckout-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bold-commerce","download_url":"https://codeload.github.com/bold-commerce/checkout-react-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bold-commerce%2Fcheckout-react-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279014651,"owners_count":26085555,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkout","javascript","library","react","snyk-scan"],"created_at":"2025-05-08T21:44:14.134Z","updated_at":"2025-10-13T10:37:32.858Z","avatar_url":"https://github.com/bold-commerce.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Checkout React Components\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bold-commerce/checkout-react-components/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/@boldcommerce/checkout-react-components.svg?style=flat)](https://www.npmjs.com/package/@boldcommerce/checkout-react-components)\n\nA React component and hooks library for creating checkout experiences utilizing [Bold API's](https://developer.boldcommerce.com/default/documentation/checkout).\n\n## Table of Contents\n- [Installation](#installation)\n- [Usage](#usage)\n- [Examples](#examples)\n- [Components](#components)\n- [Hooks](#hooks)\n\n## Installation\nRun the following command\n`npm install @boldcommerce/checkout-react-components --save`\n\nIf you prefer to use yarn, run the following command\n`yarn add @boldcommerce/checkout-react-components`\n\n## Usage\n1. Import components into project\n   ```javascript\n    import { CheckoutProvider } from '@boldcommerce/checkout-react-components';\n   ```\n2. Make a request to [orders/init](https://developer.boldcommerce.com/default/documentation/orders#/Orders/post-init) endpoint in your backend application\n\n3. Setup React to render your components and pass result of [orders/init](https://developer.boldcommerce.com/default/documentation/orders#/Orders/post-init) as props.\n   ```javascript\n   ReactDOM.render(\n     \u003cCheckoutProvider\n       applicationState={applicationState}\n       initialData={initialData}\n       publicOrderId={publicOrderId}\n       token={token}\n       storeIdentifier={storeIdentifier}\n     \u003e\n      \u003ch1\u003eHello World\u003c/h1\u003e\n     \u003c/CheckoutProvider\u003e,\n     document.querySelector('#app'),\n   );\n   ```\n\n## Examples\n- [Single Page](https://github.com/bold-commerce/checkout-react-templates/tree/main/single_page)\n- [Single Page Collapsed](https://github.com/bold-commerce/checkout-react-templates/tree/main/single_page_collapsed)\n- [Quick Checkout](https://github.com/bold-commerce/checkout-react-templates/tree/main/quick_checkout)\n\n## Components\n### CheckoutProvider\nThe provider communicates with the headless checkout api and holds the application state.\n\n```javascript\nimport { CheckoutProvider } from '@boldcommerce/checkout-react-components';\n\nconst App = (token, publicOrderId, applicationState, storeIdentifier, initialData, handleError) =\u003e {\n  return (\n    \u003cCheckoutProvider\n      token={token}\n      publicOrderId={publicOrderId}\n      applicationState={applicationState}\n      storeIdentifier={storeIdentifier}\n      initialData={initialData}\n      onError={handleError}\n    \u003e\n      \u003ch1\u003eHello World\u003c/h1\u003e\n    \u003c/CheckoutProvider\u003e\n  );\n};\n```\n#### Component Props\n- **token (required)**\n  \n  This is the jwt (json web token) that was provided from your server when you made a request to the `orders/init` endpoint\n\n- **publicOrderId (required)**\n  \n  This is the order id of the current order. This is provided from the server when making a request to the `orders/init` endpoint.\n\n- **applicationState (required)**\n  \n  This is the current state of the order that is used to hydrate your react application. This is useful for resuming a checkout that is still in progress. The application state is provided by the `orders/init` endpoint.\n\n- **storeIdentifier (required)**\n  \n  This is the identifier for your shop on a given platform. You can retrieve this by making a request to https://api.boldcommerce.com/shops/v1/info endpoint.\n\n- **initialData (required)**\n  \n  This is all the supporting information for the checkout. (ex: languages, currency, etc.). This is also provided by the `orders/init` endpoint.\n\n- **onError (optional)**\n  \n  Allows your app to manually handle server errors by supplying a callback function.\n\n\n### PaymentIFrame\nDisplays the PIGI payment iframe.\n\n```javascript\nimport { PaymentIframe } from '@boldcommerce/checkout-react-components';\n\nconst App = (props) =\u003e {\n  \u003cCheckoutProvider {...props}\u003e\n    \u003cPaymentIframe /\u003e\n  \u003c/CheckoutProvider\u003e\n}\n```\n\n## Hooks\n\n### useAppHook\nDispatches the `app_hook` plugin event to the plugin with the matching UUID provided in the request (given this plugin is registered for the `app_hook` event).\n\n```javascript\nimport { useAppHook } from '@boldcommerce/checkout-react-components';\n\nconst CustomWidget = () =\u003e {\n  const [loading, setLoading] = useState(false);\n  const [errors, setErrors] = useState(null);\n\n  const { invokeAppHook } = useAppHook();\n\n  const handleAction = async () =\u003e {\n    const hook = 'add_payment';\n    const uuid = 'xxxxxxxx-yyyy-zzzz-1111-111111111111';\n    const data = {\n        \"order\": {\n        \"currency\": \"CAD\",\n        \"order_total\": 2500\n      }\n    };\n\n    setLoading(true);\n    try {\n      setErrors(null);\n      await invokeAppHook(hook, uuid, data);\n    } catch (e) {\n      setErrors(e.body.errors);\n    }\n    setLoading(false);\n  };\n\n  return (\n    \u003cdiv\u003e\n      { errors \u0026\u0026 \u003cp\u003e{errors[0].message}\u003c/p\u003e}\n      \u003cbutton type=\"button\" onClick={handleAction}\u003eAction\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### useApplicationState\nReturns entire application state and allows you to manually update application state.\n\n* updateApplicationState can be used to update the application state of your react application after manipulating the order through the Checkout Order API or the Checkout Storefront API.\n\n```javascript\nimport { useApplicationState } from '@boldcommerce/checkout-react-components';\n\nconst CustomWidget = () =\u003e {\n  const { data, updateApplicationState } = useApplicationState();\n\n  const handleAction = async () =\u003e {\n    const response = await customRequest();\n    await updateApplicationState(response.application_state);\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton type=\"button\" onClick={handleAction}\u003eAction\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### useBillingAddress\nReturns all information and methods related to the billing address. You can pass an array of required fields as an argument to useBillingAddress. The required fields you can add are.\n- first_name\n- last_name\n- business_name\n- address_line_1\n- address_line_2\n- city\n- phone_number\n\n```javascript\nimport { useBillingAddress } from '@boldcommerce/checkout-react-components';\n\nconst BillingAddress = () =\u003e {\n  const {\n    data,\n    submitBillingAddress\n  } = useBillingAddress(['first_name', 'last_name']); // Additional required fields\n\n  const [loading, setLoading] = useState(false);\n  const [errors, setErrors] = useState(null);\n\n  const handleSubmit = async () =\u003e {\n    setLoading(true);\n    try {\n      await submitBillingAddress({\n        first_name: \"Jane\",\n        last_name: \"Doe\",\n        address_line_1: \"123 Fake Street\",\n        address_line_2: \"Unit 10\",\n        country: \"Canada\",\n        country_code: \"CA\",\n        province: \"Manitoba\",\n        province_code: \"MB\",\n        postal_code: \"R5H 3V4\",\n        business_name: \"Fake Business\",\n        phone_name: \"2048885555\"\n      });\n      setErrors(null);\n    } catch(e) {\n      setErrors(e.body.errors);\n    }\n    setLoading(false);\n  };\n\n  return (\n    \u003cdiv\u003e\n      { errors \u0026\u0026 \u003cp\u003e{errors[0].message}\u003c/p\u003e}\n      \u003cbutton type=\"button\" onClick={handleSubmit} disabled={loading}\u003eSubmit Address\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### useBillingSameAsShipping\nReturns all information and methods related to setting the billing address to be same as shipping.\n\n```javascript\n  import { useBillingSameAsShipping } from '@boldcommerce/checkout-react-components';\n\n  const BillingSameAsShipping = () =\u003e {\n    const { data, setBillingSameAsShipping } = useBillingSameAsShipping();\n    const [loading, setLoading] = useState(false);\n    const [errors, setErrors] = useState(null);\n\n    const handleChange = async (e) =\u003e {\n      setLoading(true);\n      try {\n        await setBillingSameAsShipping(e.target.value);\n        setErrors(null);\n      } catch(e) {\n        setErrors(e.body.errors);\n      }\n      setLoading(false);\n    };\n\n    return (\n      \u003cdiv\u003e\n        { errors \u0026\u0026 \u003cp\u003e{errors[0].message}\u003c/p\u003e}\n        \u003clabel htmlFor=\"same_as_shipping\"\u003eSame as Shipping\u003c/label\u003e\n        \u003cinput id=\"same_as_shipping\" type=\"checkbox\" onChange={handleChange} disabled={loading} /\u003e\n      \u003c/div\u003e\n    );\n  };\n```\n\n### useBreakdown\nReturns all information related to order status, totals, discount, taxes, and payments.\n\n```javascript\n  import { useBreakdown } from '@boldcommerce/checkout-react-components';\n  import { Price } from '@boldcommerce/stacks-ui';\n  \n  const Breakdown = () =\u003e {\n    const { data } = useBreakdown();\n    \n    return (\n      \u003cdiv\u003e\n        \u003cPrice amount={data.subTotal} /\u003e\n        \u003cPrice amount={data.shippingTotal} /\u003e\n        \u003cPrice amount={data.taxesTotal} /\u003e\n        \u003cPrice amount={data.total} /\u003e\n      \u003c/div\u003e\n    );\n  };\n```\n\n### useCountryInfo\nTakes an address as an argument and returns available countries, available provinces, and if postal codes are applicable for the selected address.\n\n```javascript\nimport { useCountryInfo } from '@boldcommerce/checkout-react-components';\n\nconst Address = () =\u003e {\n  const { data } = useCountryInfo({\n    address_line_1: \"123 Fake Street\",\n    address_line_2: \"Unit 10\",\n    country: \"Canada\",\n    country_code: \"CA\",\n    province: \"Manitoba\",\n    province_code: \"MB\",\n    postal_code: \"R5H 3V4\",\n  });\n\n  const countryOptions = data.countries.map((country) =\u003e \u003coption value={country.iso_code}\u003e{country.name}\u003c/option\u003e);\n\n  const provinceOptions = data.provinces ? data.provinces.map((province) =\u003e \u003coption value={province.iso_code}\u003e{province.name}\u003c/option\u003e) : null;\n\n  return (\n    \u003cdiv\u003e\n      \u003clabel htmlFor=\"country\"\u003eCountry\u003c/label\u003e\n      \u003cselect id=\"country\"\u003e\n        {countryOptions}\n      \u003c/select\u003e\n      { data.showProvince \u0026\u0026 (\n        \u003clabel htmlFor=\"province\"\u003e{data.provinceLabel}\u003c/label\u003e\n        \u003cselect id=\"province\"\u003e\n          {provinceOptions}\n        \u003c/select\u003e\n      )}\n      { data.showPostalCode \u0026\u0026 (\n        \u003clabel htmlFor=\"postal_code\"\u003ePostal Code\u003c/label\u003e\n        \u003cinput id=\"postal_code\" type=\"text\" value=\"\"\u003e\n      )}\n    \u003c/div\u003e\n  );\n};\n```\n\n### useCustomer\nReturns all information related to the customer.\n\n```javascript\nimport { useCustomer } from '@boldcommerce/checkout-react-components';\n\nconst Customer = () =\u003e {\n  const { data, submitCustomer } = useCustomer();\n  const [loading, setLoading] = useState(false);\n  const [errors, setErrors] = useState(null);\n\n  const handleSubmit = async () =\u003e {\n    setLoading(true);\n    try {\n       await submitCustomer({\n        email_address: 'john.doe@email.com',\n        first_name: 'John',\n        last_name: 'Doe',\n      });\n      setErrors(null);\n    } catch(e) {\n      setErrors(e.body.errors);\n    }\n    setLoading(false);\n  };\n\n  return (\n    \u003cdiv\u003e\n      { errors \u0026\u0026 \u003cp\u003e{errors[0].message}\u003c/p\u003e}\n      \u003clabel htmlFor=\"email\"\u003eEmail\u003c/label\u003e\n      \u003cinput type=\"email\" id=\"email\" value={data.email_address} /\u003e\n      \u003cbutton type=\"button\" onClick={handleSubmit} disabled={loading}\u003eSubmit\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### useDiscount\nReturns all information related to discounts.\n\n```javascript\nimport { useDiscount } from '@boldcommerce/checkout-react-components';\n\nconst Discount = () =\u003e {\n  const { data, errors, loadingStatus, applyDiscount, removeDiscount } = useDiscount();\n  const [loading, setLoading] = useState(false);\n  const [errors, setErrors] = useState(null);\n  const [discount, setDiscount] = useState(data.discountCode);\n\n  const handleSubmit = useCallback(async () =\u003e {\n    setLoading(true);\n    try {\n      await applyDiscount(discount);\n      setErrors(null);\n    } catch(e) {\n      setErrors(e.body.errors);\n    }\n    setLoading(false);\n  }, [discount]);\n\n  return (\n    \u003cdiv\u003e\n      { errors \u0026\u0026 \u003cp\u003e{errors[0].message}\u003c/p\u003e}\n      \u003clabel htmlFor=\"discount\"\u003eDiscount\u003c/label\u003e\n      \u003cinput\n        type=\"text\"\n        id=\"discount\"\n        value={discount} \n        onChange={(e) =\u003e setDiscount(e.target.value)}\n      /\u003e\n      \u003cbutton type=\"button\" onClick={handleSubmit} disabled={loading}\u003eApply Discount\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### useErrors\nReturns all error information.\n\n```javascript\nimport { useErrors } from '@boldcommerce/checkout-react-components';\n\nconst Errors = () =\u003e {\n  const { data } = useErrors();\n\n  console.log({\n    customer: data.customer,\n    shippingAddress: data.shippingAddress,\n    billingAddress: data.billingAddress,\n    shippingLines: data.shippingLines,\n    lineItems: data.lineItems,\n    orderMetadata: data.orderMetadata,\n    discount: data.discount,\n    paymentIframe: data.paymentIframe,\n    order: data.order,\n  });\n\n  return null;\n};\n```\n\n### useLineItems\nReturns all information related to line items.\n\n```javascript\nimport { useLineItems } from '@boldcommerce/checkout-react-components';\n\nconst LineItems = () =\u003e {\n  const { data, addLineItem, updateLineItemQuantity, removeLineItem } = useLineItems();\n  const [loading, setLoading] = useState(false);\n  const [errors, setErrors] = useState(null);\n\n  const handleRemove = async (lineItemKey) =\u003e {\n    setLoading(true);\n    try {\n      await removeLineItems(lineItemKey);\n      setErrors(null);\n    } catch(e) {\n      setErrors(e.body.errors);\n    }\n    setLoading(false);\n  };\n\n  const lineItems = data.map((lineItem) =\u003e (\n    \u003cli\u003e\n      \u003cp\u003e{lineItem.product_data.title}\u003c/p\u003e\n      \u003cp\u003e{lineItem.product_data.quantity}\u003c/p\u003e\n      \u003cbutton type=\"button\" onClick={() =\u003e handleRemove(lineItem.line_item_key)} disabled={loading}\u003eRemove\u003c/button\u003e\n    \u003c/li\u003e\n  ));\n\n  return (\n    \u003cul\u003e\n      { errors \u0026\u0026 \u003cp\u003e{errors[0].message}\u003c/p\u003e}\n      {lineItems}\n    \u003c/ul\u003e\n  );\n};\n```\n\n### useLoadingStatus\nReturns all loading status information. There are 4 different loading statuses.\n* setting (currently making an api request to update a resource)\n* fetching (currently making an api request to get the updated resource)\n* incomplete (submitting the data was stopped due to required data missing)\n* fulfilled (no active api requests for a resource)\n\n```javascript\nimport { useLoadingStatus } from '@boldcommerce/checkout-react-components';\n\nconst LoadingStatus = () =\u003e {\n  const { data } = useLoadingStatus();\n\n  console.log({\n    customer: data.customer,\n    shippingAddress: data.shippingAddress,\n    billingAddress: data.billingAddress,\n    shippingLines: data.shippingLines,\n    paymentIframe: data.paymentIframe,\n    lineItems: data.lineItems,\n    discount: data.discount,\n    orderMetadata: data.orderMetadata,\n    isLoading: data.isLoading,\n  });\n\n  return null;\n};\n```\n\n### useOrderMetadata\nReturns all information related to the order metadata.\n\n```javascript\nimport { useOrderMetadata } from '@boldcommerce/checkout-react-components';\n\nconst OrderMetadata = () =\u003e {\n  const { data, appendOrderMetadata, overwriteOrderMetadata, clearOrderMetadata } = useOrderMetadata();\n  const [loading, setLoading] = useState(false);\n  const [errors, setErrors] = useState(null);\n\n  // This will not overwrite what is currently in cart_paraterms, note_attributes, or tags. This will append to them.\n  const handleAdd = async () =\u003e {\n    setLoading(true);\n    try {\n      await appendOrderMetadata({\n        cart_parameters: {\n          \"cp-key2\": \"Another cart param\",\n        },\n        note_attributes: {\n          \"na-key2\": \"Another note attribute\",\n        },\n        notes: \"A different delivery instruction.\",\n        tags: [\n          \"order-1-other\",\n        ],\n      });\n      setErrors(null);\n    } catch(e) {\n      setErrors(e.body.errors);\n    }\n    setLoading(false);\n  };\n\n  // This will completely remove what is currently in cart parameters and add what was passed into handleOverwrite.\n  const handleOverwrite = async () =\u003e {\n    setLoading(true);\n    try {\n      await overwriteOrderMetadata({\n        tags: [\n          \"order-1-other\",\n        ],\n      });\n      setErrors(null);\n    } catch(e) {\n      setErrors(e.body.errors);\n    }\n    setLoading(false);\n  };\n\n  return (\n    \u003cdiv\u003e\n      { errors \u0026\u0026 \u003cp\u003e{errors[0].message}\u003c/p\u003e}\n      \u003cbutton type=\"button\" onClick={handleAdd} disabled={loading}\u003eAdd Metadata\u003c/button\u003e\n      \u003cbutton type=\"button\" onClick={handleOverwrite} disabled={loading}\u003eOverwrite Metadata\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### useOrderSummary\nReturns all information related to the order summary. This includes customer, shipping address, billing address, selected shipping method, and payments.\n\n```javascript\nimport { useOrderSummary } from '@boldcommerce/checkout-react-components';\n\nconst OrderSummary = () =\u003e {\n  const { data } = useOrderSummary();\n\n  console.log({\n    customer: data.customer,\n    shippingAddress: data.shippingAddress,\n    billingAddress: data.billingAddress,\n    selectedShipping: data.selectedShipping,\n    payments: data.payments,\n  });\n\n  return null;\n};\n```\n\n### useSavedAddresses\nReturns saved addresses for the current customer\n\n```javascript\nimport { useSavedAddresses } from '@boldcommerce/checkout-react-components';\n\nconst SavedAddresses = () =\u003e {\n  const { data } = useSavedAddresses();\n\n  const savedAddresses = data.map((savedAddress) =\u003e {\n    return (\n      \u003cli\u003e\n        \u003cspan\u003e{savedAddress.first_name}\u003c/span\u003e\n        \u003cspan\u003e{savedAddress.last_name}\u003c/span\u003e\n        \u003cspan\u003e{savedAddress.address_line_1}\u003c/span\u003e\n        \u003cspan\u003e{savedAddress.address_line_2}\u003c/span\u003e\n        \u003cspan\u003e{savedAddress.country}\u003c/span\u003e\n        \u003cspan\u003e{savedAddress.city}\u003c/span\u003e\n        \u003cspan\u003e{savedAddress.province}\u003c/span\u003e\n        \u003cspan\u003e{savedAddress.country_code}\u003c/span\u003e\n        \u003cspan\u003e{savedAddress.province_code}\u003c/span\u003e\n        \u003cspan\u003e{savedAddress.business_name}\u003c/span\u003e\n        \u003cspan\u003e{savedAddress.phone_number}\u003c/span\u003e\n      \u003c/li\u003e\n    )\n  });\n};\n```\n\n### useShippingAddress\nReturns all information and methods related to the shipping address. You can pass an array of required fields as an argument to useShippingAddress. The required fields you can add are.\n- first_name\n- last_name\n- business_name\n- address_line_1\n- address_line_2\n- city\n- phone_number\n\n```javascript\nimport { useShippingAddress } from '@boldcommerce/checkout-react-components';\n\nconst ShippingAddress = () =\u003e {\n  const { data, submitShippingAddress } = useShippingAddress(['first_name', 'last_name']); // Additional required fields\n  const [loading, setLoading] = useState(false);\n  const [errors, setErrors] = useState(null);\n\n  const handleSubmit = async () =\u003e {\n    setLoading(true);\n    try {\n      await submitShippingAddress({\n        first_name: \"Jane\",\n        last_name: \"Doe\",\n        address_line_1: \"123 Fake Street\",\n        address_line_2: \"Unit 10\",\n        country: \"Canada\",\n        country_code: \"CA\",\n        province: \"Manitoba\",\n        province_code: \"MB\",\n        postal_code: \"R5H 3V4\",\n        business_name: \"Fake Business\",\n        phone_name: \"2048885555\"\n      });\n      setErrors(null);\n    } catch(e) {\n      setErrors(e.body.errors);\n    }\n    setLoading(false);\n  };\n\n  return (\n    \u003cdiv\u003e\n      { errors \u0026\u0026 \u003cp\u003e{errors[0].message}\u003c/p\u003e}\n      \u003cbutton type=\"button\" onClick={handleSubmit} disabled={loading}\u003eSubmit Address\u003c/button\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n### useShippingLines\nReturns all information related to shipping lines.\n\n```javascript\nimport { useShippingLines } from '@boldcommerce/checkout-react-components';\n\nconst ShippingLines = () =\u003e {\n  const { data, updateShippingLine, getShippingLines } = useShippingLines();\n  const [loading, setLoading] = useState(false);\n  const [errors, setErrors] = useState(null);\n\n  const handleChange = async (id) =\u003e {\n    setLoading(true);\n    try {\n      await updateShippingLine(id);\n      setErrors(null);\n    } catch(e) {\n      setErrors(e.body.errors);\n    }\n    setLoading(false);\n  }\n\n  const shippingLines = data.shippingLines.map((shippingLine) =\u003e {\n    return (\n      \u003cli\u003e\n        \u003cinput type=\"radio\" name=\"shipping_lines\" id=\"shipping_lines\" onChange={() =\u003e handleChange(shippingLine.id)} disabled={loading} /\u003e\n        \u003cp\u003e{ shippingLine.line.description }\u003c/p\u003e\n        \u003cp\u003e{ shippingLine.line.amount }\u003c/p\u003e\n      \u003c/li\u003e\n    );\n  }); \n\n  return (\n    \u003cul\u003e\n      { errors \u0026\u0026 \u003cp\u003e{errors[0].message}\u003c/p\u003e}\n      {shippingLines}\n    \u003c/ul\u003e\n  );\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbold-commerce%2Fcheckout-react-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbold-commerce%2Fcheckout-react-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbold-commerce%2Fcheckout-react-components/lists"}