diff --git a/.env.template b/.env.template
index 1f0fe0536..b24458b80 100644
--- a/.env.template
+++ b/.env.template
@@ -1,4 +1,4 @@
-# Available providers: bigcommerce, shopify, swell
+# Available providers: local, bigcommerce, shopify, swell, saleor
 COMMERCE_PROVIDER=
 
 BIGCOMMERCE_STOREFRONT_API_URL=
diff --git a/README.md b/README.md
index d53c5ed86..2eeea375b 100644
--- a/README.md
+++ b/README.md
@@ -79,7 +79,7 @@ For example: Turning `cart` off will disable Cart capabilities.
 
 > NOTE: The selected provider should support the feature that you are toggling. (This means that you can't turn wishlist on if the provider doesn't support this functionality out the box)
 
-- Open `commerce.config.json` 
+- Open `commerce.config.json`
 - You'll see a config file like this:
   ```json
   {
diff --git a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
index fb562e7af..13a523288 100644
--- a/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
+++ b/components/checkout/CheckoutSidebarView/CheckoutSidebarView.tsx
@@ -1,30 +1,39 @@
-import cn from 'classnames'
 import Link from 'next/link'
 import { FC } from 'react'
 import CartItem from '@components/cart/CartItem'
 import { Button, Text } from '@components/ui'
 import { useUI } from '@components/ui/context'
+import SidebarLayout from '@components/common/SidebarLayout'
 import useCart from '@framework/cart/use-cart'
 import usePrice from '@framework/product/use-price'
+import useCheckout from '@framework/checkout/use-checkout'
 import ShippingWidget from '../ShippingWidget'
 import PaymentWidget from '../PaymentWidget'
-import SidebarLayout from '@components/common/SidebarLayout'
 import s from './CheckoutSidebarView.module.css'
 
 const CheckoutSidebarView: FC = () => {
-  const { setSidebarView } = useUI()
-  const { data } = useCart()
+  const { setSidebarView, closeSidebar } = useUI()
+  const { data: cartData } = useCart()
+  const { data: checkoutData, submit: onCheckout } = useCheckout()
+
+  async function handleSubmit(event: React.ChangeEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    await onCheckout()
+
+    closeSidebar()
+  }
 
   const { price: subTotal } = usePrice(
-    data && {
-      amount: Number(data.subtotalPrice),
-      currencyCode: data.currency.code,
+    cartData && {
+      amount: Number(cartData.subtotalPrice),
+      currencyCode: cartData.currency.code,
     }
   )
   const { price: total } = usePrice(
-    data && {
-      amount: Number(data.totalPrice),
-      currencyCode: data.currency.code,
+    cartData && {
+      amount: Number(cartData.totalPrice),
+      currencyCode: cartData.currency.code,
     }
   )
 
@@ -38,22 +47,31 @@ const CheckoutSidebarView: FC = () => {
           <Text variant="sectionHeading">Checkout</Text>
         </Link>
 
-        <PaymentWidget onClick={() => setSidebarView('PAYMENT_VIEW')} />
-        <ShippingWidget onClick={() => setSidebarView('SHIPPING_VIEW')} />
+        <PaymentWidget
+          isValid={checkoutData?.hasPayment}
+          onClick={() => setSidebarView('PAYMENT_VIEW')}
+        />
+        <ShippingWidget
+          isValid={checkoutData?.hasShipping}
+          onClick={() => setSidebarView('SHIPPING_VIEW')}
+        />
 
         <ul className={s.lineItemsList}>
-          {data!.lineItems.map((item: any) => (
+          {cartData!.lineItems.map((item: any) => (
             <CartItem
               key={item.id}
               item={item}
-              currencyCode={data!.currency.code}
+              currencyCode={cartData!.currency.code}
               variant="display"
             />
           ))}
         </ul>
       </div>
 
-      <div className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm">
+      <form
+        onSubmit={handleSubmit}
+        className="flex-shrink-0 px-6 py-6 sm:px-6 sticky z-20 bottom-0 w-full right-0 left-0 bg-accent-0 border-t text-sm"
+      >
         <ul className="pb-2">
           <li className="flex justify-between py-1">
             <span>Subtotal</span>
@@ -74,14 +92,15 @@ const CheckoutSidebarView: FC = () => {
         </div>
         <div>
           {/* Once data is correcly filled */}
-          {/* <Button Component="a" width="100%">
-                Confirm Purchase
-              </Button> */}
-          <Button Component="a" width="100%" variant="ghost" disabled>
-            Continue
+          <Button
+            type="submit"
+            width="100%"
+            disabled={!checkoutData?.hasPayment || !checkoutData?.hasShipping}
+          >
+            Confirm Purchase
           </Button>
         </div>
-      </div>
+      </form>
     </SidebarLayout>
   )
 }
diff --git a/components/checkout/PaymentMethodView/PaymentMethodView.tsx b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
index a5f6f4b51..972073756 100644
--- a/components/checkout/PaymentMethodView/PaymentMethodView.tsx
+++ b/components/checkout/PaymentMethodView/PaymentMethodView.tsx
@@ -1,83 +1,129 @@
 import { FC } from 'react'
 import cn from 'classnames'
+
+import useAddCard from '@framework/customer/card/use-add-item'
 import { Button, Text } from '@components/ui'
 import { useUI } from '@components/ui/context'
-import s from './PaymentMethodView.module.css'
 import SidebarLayout from '@components/common/SidebarLayout'
 
+import s from './PaymentMethodView.module.css'
+
+interface Form extends HTMLFormElement {
+  cardHolder: HTMLInputElement
+  cardNumber: HTMLInputElement
+  cardExpireDate: HTMLInputElement
+  cardCvc: HTMLInputElement
+  firstName: HTMLInputElement
+  lastName: HTMLInputElement
+  company: HTMLInputElement
+  streetNumber: HTMLInputElement
+  zipCode: HTMLInputElement
+  city: HTMLInputElement
+  country: HTMLSelectElement
+}
+
 const PaymentMethodView: FC = () => {
   const { setSidebarView } = useUI()
+  const addCard = useAddCard()
+
+  async function handleSubmit(event: React.ChangeEvent<Form>) {
+    event.preventDefault()
+
+    await addCard({
+      cardHolder: event.target.cardHolder.value,
+      cardNumber: event.target.cardNumber.value,
+      cardExpireDate: event.target.cardExpireDate.value,
+      cardCvc: event.target.cardCvc.value,
+      firstName: event.target.firstName.value,
+      lastName: event.target.lastName.value,
+      company: event.target.company.value,
+      streetNumber: event.target.streetNumber.value,
+      zipCode: event.target.zipCode.value,
+      city: event.target.city.value,
+      country: event.target.country.value,
+    })
+
+    setSidebarView('CHECKOUT_VIEW')
+  }
 
   return (
-    <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
-      <div className="px-4 sm:px-6 flex-1">
-        <Text variant="sectionHeading"> Payment Method</Text>
-        <div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Cardholder Name</label>
-            <input className={s.input} />
-          </div>
-          <div className="grid gap-3 grid-flow-row grid-cols-12">
-            <div className={cn(s.fieldset, 'col-span-7')}>
-              <label className={s.label}>Card Number</label>
-              <input className={s.input} />
+    <form className="h-full" onSubmit={handleSubmit}>
+      <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
+        <div className="px-4 sm:px-6 flex-1">
+          <Text variant="sectionHeading"> Payment Method</Text>
+          <div>
+            <div className={s.fieldset}>
+              <label className={s.label}>Cardholder Name</label>
+              <input name="cardHolder" className={s.input} />
             </div>
-            <div className={cn(s.fieldset, 'col-span-3')}>
-              <label className={s.label}>Expires</label>
-              <input className={s.input} placeholder="MM/YY" />
+            <div className="grid gap-3 grid-flow-row grid-cols-12">
+              <div className={cn(s.fieldset, 'col-span-7')}>
+                <label className={s.label}>Card Number</label>
+                <input name="cardNumber" className={s.input} />
+              </div>
+              <div className={cn(s.fieldset, 'col-span-3')}>
+                <label className={s.label}>Expires</label>
+                <input
+                  name="cardExpireDate"
+                  className={s.input}
+                  placeholder="MM/YY"
+                />
+              </div>
+              <div className={cn(s.fieldset, 'col-span-2')}>
+                <label className={s.label}>CVC</label>
+                <input name="cardCvc" className={s.input} />
+              </div>
             </div>
-            <div className={cn(s.fieldset, 'col-span-2')}>
-              <label className={s.label}>CVC</label>
-              <input className={s.input} />
+            <hr className="border-accent-2 my-6" />
+            <div className="grid gap-3 grid-flow-row grid-cols-12">
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>First Name</label>
+                <input name="firstName" className={s.input} />
+              </div>
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>Last Name</label>
+                <input name="lastName" className={s.input} />
+              </div>
             </div>
-          </div>
-          <hr className="border-accent-2 my-6" />
-          <div className="grid gap-3 grid-flow-row grid-cols-12">
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>First Name</label>
-              <input className={s.input} />
+            <div className={s.fieldset}>
+              <label className={s.label}>Company (Optional)</label>
+              <input name="company" className={s.input} />
             </div>
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>Last Name</label>
-              <input className={s.input} />
+            <div className={s.fieldset}>
+              <label className={s.label}>Street and House Number</label>
+              <input name="streetNumber" className={s.input} />
             </div>
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Company (Optional)</label>
-            <input className={s.input} />
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Street and House Number</label>
-            <input className={s.input} />
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
-            <input className={s.input} />
-          </div>
-          <div className="grid gap-3 grid-flow-row grid-cols-12">
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>Postal Code</label>
-              <input className={s.input} />
+            <div className={s.fieldset}>
+              <label className={s.label}>
+                Apartment, Suite, Etc. (Optional)
+              </label>
+              <input className={s.input} name="apartment" />
             </div>
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>City</label>
-              <input className={s.input} />
+            <div className="grid gap-3 grid-flow-row grid-cols-12">
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>Postal Code</label>
+                <input name="zipCode" className={s.input} />
+              </div>
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>City</label>
+                <input name="city" className={s.input} />
+              </div>
+            </div>
+            <div className={s.fieldset}>
+              <label className={s.label}>Country/Region</label>
+              <select name="country" className={s.select}>
+                <option>Hong Kong</option>
+              </select>
             </div>
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Country/Region</label>
-            <select className={s.select}>
-              <option>Hong Kong</option>
-            </select>
           </div>
         </div>
-      </div>
-      <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
-        <Button Component="a" width="100%" variant="ghost">
-          Continue
-        </Button>
-      </div>
-    </SidebarLayout>
+        <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
+          <Button type="submit" width="100%" variant="ghost">
+            Continue
+          </Button>
+        </div>
+      </SidebarLayout>
+    </form>
   )
 }
 
diff --git a/components/checkout/PaymentWidget/PaymentWidget.tsx b/components/checkout/PaymentWidget/PaymentWidget.tsx
index e1892934e..9b496bb44 100644
--- a/components/checkout/PaymentWidget/PaymentWidget.tsx
+++ b/components/checkout/PaymentWidget/PaymentWidget.tsx
@@ -1,14 +1,15 @@
 import { FC } from 'react'
 import s from './PaymentWidget.module.css'
-import { ChevronRight, CreditCard } from '@components/icons'
+import { ChevronRight, CreditCard, Check } from '@components/icons'
 
 interface ComponentProps {
   onClick?: () => any
+  isValid?: boolean
 }
 
-const PaymentWidget: FC<ComponentProps> = ({ onClick }) => {
-  /* Shipping Address 
-  Only available with checkout set to true - 
+const PaymentWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
+  /* Shipping Address
+  Only available with checkout set to true -
   This means that the provider does offer checkout functionality. */
   return (
     <div onClick={onClick} className={s.root}>
@@ -19,9 +20,7 @@ const PaymentWidget: FC<ComponentProps> = ({ onClick }) => {
         </span>
         {/* <span>VISA #### #### #### 2345</span> */}
       </div>
-      <div>
-        <ChevronRight />
-      </div>
+      <div>{isValid ? <Check /> : <ChevronRight />}</div>
     </div>
   )
 }
diff --git a/components/checkout/ShippingView/ShippingView.tsx b/components/checkout/ShippingView/ShippingView.tsx
index 1d03a2aac..ed82bc8a2 100644
--- a/components/checkout/ShippingView/ShippingView.tsx
+++ b/components/checkout/ShippingView/ShippingView.tsx
@@ -1,77 +1,117 @@
 import { FC } from 'react'
 import cn from 'classnames'
-import s from './ShippingView.module.css'
+
 import Button from '@components/ui/Button'
 import { useUI } from '@components/ui/context'
 import SidebarLayout from '@components/common/SidebarLayout'
+import useAddAddress from '@framework/customer/address/use-add-item'
+
+import s from './ShippingView.module.css'
+
+interface Form extends HTMLFormElement {
+  cardHolder: HTMLInputElement
+  cardNumber: HTMLInputElement
+  cardExpireDate: HTMLInputElement
+  cardCvc: HTMLInputElement
+  firstName: HTMLInputElement
+  lastName: HTMLInputElement
+  company: HTMLInputElement
+  streetNumber: HTMLInputElement
+  zipCode: HTMLInputElement
+  city: HTMLInputElement
+  country: HTMLSelectElement
+}
 
 const PaymentMethodView: FC = () => {
   const { setSidebarView } = useUI()
+  const addAddress = useAddAddress()
+
+  async function handleSubmit(event: React.ChangeEvent<Form>) {
+    event.preventDefault()
+
+    await addAddress({
+      type: event.target.type.value,
+      firstName: event.target.firstName.value,
+      lastName: event.target.lastName.value,
+      company: event.target.company.value,
+      streetNumber: event.target.streetNumber.value,
+      apartments: event.target.streetNumber.value,
+      zipCode: event.target.zipCode.value,
+      city: event.target.city.value,
+      country: event.target.country.value,
+    })
+
+    setSidebarView('CHECKOUT_VIEW')
+  }
 
   return (
-    <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
-      <div className="px-4 sm:px-6 flex-1">
-        <h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
-          Shipping
-        </h2>
-        <div>
-          <div className="flex flex-row my-3 items-center">
-            <input className={s.radio} type="radio" />
-            <span className="ml-3 text-sm">Same as billing address</span>
-          </div>
-          <div className="flex flex-row my-3 items-center">
-            <input className={s.radio} type="radio" />
-            <span className="ml-3 text-sm">
-              Use a different shipping address
-            </span>
-          </div>
-          <hr className="border-accent-2 my-6" />
-          <div className="grid gap-3 grid-flow-row grid-cols-12">
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>First Name</label>
-              <input className={s.input} />
+    <form className="h-full" onSubmit={handleSubmit}>
+      <SidebarLayout handleBack={() => setSidebarView('CHECKOUT_VIEW')}>
+        <div className="px-4 sm:px-6 flex-1">
+          <h2 className="pt-1 pb-8 text-2xl font-semibold tracking-wide cursor-pointer inline-block">
+            Shipping
+          </h2>
+          <div>
+            <div className="flex flex-row my-3 items-center">
+              <input name="type" className={s.radio} type="radio" />
+              <span className="ml-3 text-sm">Same as billing address</span>
             </div>
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>Last Name</label>
-              <input className={s.input} />
+            <div className="flex flex-row my-3 items-center">
+              <input name="type" className={s.radio} type="radio" />
+              <span className="ml-3 text-sm">
+                Use a different shipping address
+              </span>
             </div>
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Company (Optional)</label>
-            <input className={s.input} />
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Street and House Number</label>
-            <input className={s.input} />
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Apartment, Suite, Etc. (Optional)</label>
-            <input className={s.input} />
-          </div>
-          <div className="grid gap-3 grid-flow-row grid-cols-12">
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>Postal Code</label>
-              <input className={s.input} />
+            <hr className="border-accent-2 my-6" />
+            <div className="grid gap-3 grid-flow-row grid-cols-12">
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>First Name</label>
+                <input name="firstName" className={s.input} />
+              </div>
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>Last Name</label>
+                <input name="lastName" className={s.input} />
+              </div>
             </div>
-            <div className={cn(s.fieldset, 'col-span-6')}>
-              <label className={s.label}>City</label>
-              <input className={s.input} />
+            <div className={s.fieldset}>
+              <label className={s.label}>Company (Optional)</label>
+              <input name="company" className={s.input} />
+            </div>
+            <div className={s.fieldset}>
+              <label className={s.label}>Street and House Number</label>
+              <input name="streetNumber" className={s.input} />
+            </div>
+            <div className={s.fieldset}>
+              <label className={s.label}>
+                Apartment, Suite, Etc. (Optional)
+              </label>
+              <input name="apartments" className={s.input} />
+            </div>
+            <div className="grid gap-3 grid-flow-row grid-cols-12">
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>Postal Code</label>
+                <input name="zipCode" className={s.input} />
+              </div>
+              <div className={cn(s.fieldset, 'col-span-6')}>
+                <label className={s.label}>City</label>
+                <input name="city" className={s.input} />
+              </div>
+            </div>
+            <div className={s.fieldset}>
+              <label className={s.label}>Country/Region</label>
+              <select name="country" className={s.select}>
+                <option>Hong Kong</option>
+              </select>
             </div>
-          </div>
-          <div className={s.fieldset}>
-            <label className={s.label}>Country/Region</label>
-            <select className={s.select}>
-              <option>Hong Kong</option>
-            </select>
           </div>
         </div>
-      </div>
-      <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
-        <Button Component="a" width="100%" variant="ghost">
-          Continue
-        </Button>
-      </div>
-    </SidebarLayout>
+        <div className="sticky z-20 bottom-0 w-full right-0 left-0 py-12 bg-accent-0 border-t border-accent-2 px-6">
+          <Button type="submit" width="100%" variant="ghost">
+            Continue
+          </Button>
+        </div>
+      </SidebarLayout>
+    </form>
   )
 }
 
diff --git a/components/checkout/ShippingWidget/ShippingWidget.tsx b/components/checkout/ShippingWidget/ShippingWidget.tsx
index b072178b0..557a69a8b 100644
--- a/components/checkout/ShippingWidget/ShippingWidget.tsx
+++ b/components/checkout/ShippingWidget/ShippingWidget.tsx
@@ -1,15 +1,16 @@
 import { FC } from 'react'
 import s from './ShippingWidget.module.css'
-import { ChevronRight, MapPin } from '@components/icons'
+import { ChevronRight, MapPin, Check } from '@components/icons'
 import cn from 'classnames'
 
 interface ComponentProps {
   onClick?: () => any
+  isValid?: boolean
 }
 
-const ShippingWidget: FC<ComponentProps> = ({ onClick }) => {
-  /* Shipping Address 
-  Only available with checkout set to true - 
+const ShippingWidget: FC<ComponentProps> = ({ onClick, isValid }) => {
+  /* Shipping Address
+  Only available with checkout set to true -
   This means that the provider does offer checkout functionality. */
   return (
     <div onClick={onClick} className={s.root}>
@@ -23,9 +24,7 @@ const ShippingWidget: FC<ComponentProps> = ({ onClick }) => {
           San Franssisco, California
         </span> */}
       </div>
-      <div>
-        <ChevronRight />
-      </div>
+      <div>{isValid ? <Check /> : <ChevronRight />}</div>
     </div>
   )
 }
diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx
index 5d7d28df3..92df48fc2 100644
--- a/components/common/UserNav/UserNav.tsx
+++ b/components/common/UserNav/UserNav.tsx
@@ -7,6 +7,7 @@ import useCustomer from '@framework/customer/use-customer'
 import { Avatar } from '@components/common'
 import { Heart, Bag } from '@components/icons'
 import { useUI } from '@components/ui/context'
+import Button from '@components/ui/Button'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'
 
@@ -26,9 +27,11 @@ const UserNav: FC<Props> = ({ className }) => {
     <nav className={cn(s.root, className)}>
       <ul className={s.list}>
         {process.env.COMMERCE_CART_ENABLED && (
-          <li className={s.item} onClick={toggleSidebar}>
-            <Bag />
-            {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+          <li className={s.item}>
+            <Button className={s.item} variant="naked" onClick={toggleSidebar} aria-label="Cart">
+              <Bag />
+              {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
+            </Button>
           </li>
         )}
         {process.env.COMMERCE_WISHLIST_ENABLED && (
diff --git a/components/ui/Button/Button.module.css b/components/ui/Button/Button.module.css
index 2ac7544f7..34bdea107 100644
--- a/components/ui/Button/Button.module.css
+++ b/components/ui/Button/Button.module.css
@@ -35,6 +35,15 @@
   @apply border-accent-9 bg-accent-9 text-accent-0;
 }
 
+.naked {
+  @apply bg-transparent font-semibold border-none shadow-none outline-none py-0 px-0;
+}
+
+.naked:hover,
+.naked:focus {
+  @apply bg-transparent border-none;
+}
+
 .disabled,
 .disabled:hover {
   @apply text-accent-4 border-accent-2 bg-accent-1 cursor-not-allowed;
diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx
index b29fb432a..ed99a96ee 100644
--- a/components/ui/Button/Button.tsx
+++ b/components/ui/Button/Button.tsx
@@ -12,7 +12,7 @@ import { LoadingDots } from '@components/ui'
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
-  variant?: 'flat' | 'slim' | 'ghost'
+  variant?: 'flat' | 'slim' | 'ghost' | 'naked'
   active?: boolean
   type?: 'submit' | 'reset' | 'button'
   Component?: string | JSXElementConstructor<any>
@@ -41,6 +41,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     {
       [s.ghost]: variant === 'ghost',
       [s.slim]: variant === 'slim',
+      [s.naked]: variant === 'naked',
       [s.loading]: loading,
       [s.disabled]: disabled,
     },
diff --git a/components/ui/Sidebar/Sidebar.module.css b/components/ui/Sidebar/Sidebar.module.css
index f6a49387f..71a85995e 100644
--- a/components/ui/Sidebar/Sidebar.module.css
+++ b/components/ui/Sidebar/Sidebar.module.css
@@ -1,5 +1,5 @@
 .root {
-  @apply fixed inset-0 h-full z-50 box-border;
+  @apply fixed inset-0 h-full z-50 box-border outline-none;
 }
 
 .sidebar {
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 700bb681a..40698aec9 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -13,28 +13,44 @@ interface SidebarProps {
 }
 
 const Sidebar: FC<SidebarProps> = ({ children, onClose }) => {
-  const ref = useRef() as React.MutableRefObject<HTMLDivElement>
+  const sidebarRef = useRef() as React.MutableRefObject<HTMLDivElement>
+  const contentRef = useRef() as React.MutableRefObject<HTMLDivElement>
+
+  const onKeyDownSidebar = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.code === 'Escape') {
+      onClose()
+    }
+  }
 
   useEffect(() => {
-    const sidebar = ref.current
+    if (sidebarRef.current) {
+      sidebarRef.current.focus()
+    }
 
-    if (sidebar) {
-      disableBodyScroll(sidebar, { reserveScrollBarGap: true })
+    const contentElement = contentRef.current
+  
+    if (contentElement) {
+      disableBodyScroll(contentElement, { reserveScrollBarGap: true })
     }
 
     return () => {
-      if (sidebar) enableBodyScroll(sidebar)
+      if (contentElement) enableBodyScroll(contentElement)
       clearAllBodyScrollLocks()
     }
   }, [])
 
   return (
-    <div className={cn(s.root)}>
+    <div
+      className={cn(s.root)}
+      ref={sidebarRef}
+      onKeyDown={onKeyDownSidebar}
+      tabIndex={1}
+    >
       <div className="absolute inset-0 overflow-hidden">
         <div className={s.backdrop} onClick={onClose} />
         <section className="absolute inset-y-0 right-0 max-w-full flex outline-none pl-10">
           <div className="h-full w-full md:w-screen md:max-w-md">
-            <div className={s.sidebar} ref={ref}>
+            <div className={s.sidebar} ref={contentRef}>
               {children}
             </div>
           </div>
diff --git a/components/ui/Text/Text.module.css b/components/ui/Text/Text.module.css
index f572fdf18..b3bc8342b 100644
--- a/components/ui/Text/Text.module.css
+++ b/components/ui/Text/Text.module.css
@@ -13,3 +13,64 @@
 .sectionHeading {
   @apply pt-1 pb-2 text-2xl font-bold tracking-wide cursor-pointer mb-2;
 }
+
+
+/* Apply base font sizes and styles for typography markup (h2, h2, ul, p, etc.).
+   A helpful addition for whenn page content is consumed from a source managed through a wysiwyg editor. */
+
+.body :is(h1, h2, h3, h4, h5, h6, p, ul, ol) {
+  @apply mb-4;
+}
+
+.body :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
+  @apply mt-8;
+}
+
+.body :is(h1, h2, h3, h4, h5, h6) {
+  @apply font-semibold tracking-wide;
+}
+
+.body h1 {
+  @apply text-5xl;
+}
+
+.body h2 {
+  @apply text-4xl;
+}
+
+.body h3 {
+  @apply text-3xl;
+}
+
+.body h4 {
+  @apply text-2xl;
+}
+
+.body h5 {
+  @apply text-xl;
+}
+
+.body h6 {
+  @apply text-lg;
+}
+
+.body ul,
+.body ol {
+  @apply pl-6;
+}
+
+.body ul {
+  @apply list-disc;
+}
+
+.body ol {
+  @apply list-decimal;
+}
+
+.body a {
+  @apply underline;
+}
+
+.body a:hover {
+  @apply no-underline;
+}
diff --git a/framework/bigcommerce/api/endpoints/checkout/index.ts b/framework/bigcommerce/api/endpoints/checkout/index.ts
index eaba32e47..99263bdb7 100644
--- a/framework/bigcommerce/api/endpoints/checkout/index.ts
+++ b/framework/bigcommerce/api/endpoints/checkout/index.ts
@@ -2,13 +2,13 @@ import { GetAPISchema, createEndpoint } from '@commerce/api'
 import checkoutEndpoint from '@commerce/api/endpoints/checkout'
 import type { CheckoutSchema } from '../../../types/checkout'
 import type { BigcommerceAPI } from '../..'
-import checkout from './checkout'
+import submitCheckout from './submit-checkout'
 
 export type CheckoutAPI = GetAPISchema<BigcommerceAPI, CheckoutSchema>
 
 export type CheckoutEndpoint = CheckoutAPI['endpoint']
 
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
 
 const checkoutApi = createEndpoint<CheckoutAPI>({
   handler: checkoutEndpoint,
diff --git a/framework/bigcommerce/api/endpoints/checkout/checkout.ts b/framework/bigcommerce/api/endpoints/checkout/submit-checkout.ts
similarity index 95%
rename from framework/bigcommerce/api/endpoints/checkout/checkout.ts
rename to framework/bigcommerce/api/endpoints/checkout/submit-checkout.ts
index 15c834557..5c135df36 100644
--- a/framework/bigcommerce/api/endpoints/checkout/checkout.ts
+++ b/framework/bigcommerce/api/endpoints/checkout/submit-checkout.ts
@@ -5,7 +5,7 @@ import { uuid } from 'uuidv4'
 
 const fullCheckout = true
 
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
   req,
   res,
   config,
@@ -87,4 +87,4 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
   res.end()
 }
 
-export default checkout
+export default submitCheckout
diff --git a/framework/bigcommerce/api/endpoints/customer/address.ts b/framework/bigcommerce/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/bigcommerce/api/endpoints/customer/address.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/bigcommerce/api/endpoints/customer/card.ts b/framework/bigcommerce/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/bigcommerce/api/endpoints/customer/card.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/bigcommerce/checkout/use-checkout.tsx b/framework/bigcommerce/checkout/use-checkout.tsx
new file mode 100644
index 000000000..942f85b83
--- /dev/null
+++ b/framework/bigcommerce/checkout/use-checkout.tsx
@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+
+export default useCheckout as UseCheckout<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
+}
diff --git a/framework/bigcommerce/customer/address/use-add-item.tsx b/framework/bigcommerce/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..ac9dcd5cf
--- /dev/null
+++ b/framework/bigcommerce/customer/address/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/bigcommerce/customer/card/use-add-item.tsx b/framework/bigcommerce/customer/card/use-add-item.tsx
new file mode 100644
index 000000000..7e3afa9c5
--- /dev/null
+++ b/framework/bigcommerce/customer/card/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/bigcommerce/index.tsx b/framework/bigcommerce/index.tsx
index 024e54b56..3259836b9 100644
--- a/framework/bigcommerce/index.tsx
+++ b/framework/bigcommerce/index.tsx
@@ -1,36 +1,9 @@
-import type { ReactNode } from 'react'
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-import { bigcommerceProvider } from './provider'
-import type { BigcommerceProvider } from './provider'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { bigcommerceProvider, BigcommerceProvider } from './provider'
 
 export { bigcommerceProvider }
 export type { BigcommerceProvider }
 
-export const bigcommerceConfig: CommerceConfig = {
-  locale: 'en-us',
-  cartCookie: 'bc_cartId',
-}
-
-export type BigcommerceConfig = Partial<CommerceConfig>
-
-export type BigcommerceProps = {
-  children?: ReactNode
-  locale: string
-} & BigcommerceConfig
-
-export function CommerceProvider({ children, ...config }: BigcommerceProps) {
-  return (
-    <CoreCommerceProvider
-      provider={bigcommerceProvider}
-      config={{ ...bigcommerceConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
+export const CommerceProvider = getCommerceProvider(bigcommerceProvider)
 
 export const useCommerce = () => useCoreCommerce<BigcommerceProvider>()
diff --git a/framework/bigcommerce/lib/normalize.ts b/framework/bigcommerce/lib/normalize.ts
index 82a22de00..fee1fbcc3 100644
--- a/framework/bigcommerce/lib/normalize.ts
+++ b/framework/bigcommerce/lib/normalize.ts
@@ -91,7 +91,10 @@ export function normalizeCart(data: BigcommerceCart): Cart {
     createdAt: data.created_time,
     currency: data.currency,
     taxesIncluded: data.tax_included,
-    lineItems: data.line_items.physical_items.map(normalizeLineItem),
+    lineItems: [
+      ...data.line_items.physical_items.map(normalizeLineItem),
+      ...data.line_items.digital_items.map(normalizeLineItem),
+    ],
     lineItemsSubtotalPrice: data.base_amount,
     subtotalPrice: data.base_amount + data.discount_amount,
     totalPrice: data.cart_amount,
diff --git a/framework/commerce/api/endpoints/checkout.ts b/framework/commerce/api/endpoints/checkout.ts
index b39239a6a..b00bce284 100644
--- a/framework/commerce/api/endpoints/checkout.ts
+++ b/framework/commerce/api/endpoints/checkout.ts
@@ -1,25 +1,39 @@
 import type { CheckoutSchema } from '../../types/checkout'
+import type { GetAPISchema } from '..'
+
 import { CommerceAPIError } from '../utils/errors'
 import isAllowedOperation from '../utils/is-allowed-operation'
-import type { GetAPISchema } from '..'
 
 const checkoutEndpoint: GetAPISchema<
   any,
   CheckoutSchema
 >['endpoint']['handler'] = async (ctx) => {
-  const { req, res, handlers } = ctx
+  const { req, res, handlers, config } = ctx
 
   if (
     !isAllowedOperation(req, res, {
-      GET: handlers['checkout'],
+      GET: handlers['getCheckout'],
+      POST: handlers['submitCheckout'],
     })
   ) {
     return
   }
 
+  const { cookies } = req
+  const cartId = cookies[config.cartCookie]
+
   try {
-    const body = null
-    return await handlers['checkout']({ ...ctx, body })
+    // Create checkout
+    if (req.method === 'GET') {
+      const body = { ...req.body, cartId }
+      return await handlers['getCheckout']?.({ ...ctx, body })
+    }
+
+    // Create checkout
+    if (req.method === 'POST') {
+      const body = { ...req.body, cartId }
+      return await handlers['submitCheckout']({ ...ctx, body })
+    }
   } catch (error) {
     console.error(error)
 
diff --git a/framework/commerce/api/endpoints/customer/address.ts b/framework/commerce/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..d5ede697a
--- /dev/null
+++ b/framework/commerce/api/endpoints/customer/address.ts
@@ -0,0 +1,65 @@
+import type { CustomerAddressSchema } from '../../../types/customer/address'
+import type { GetAPISchema } from '../..'
+
+import { CommerceAPIError } from '../../utils/errors'
+import isAllowedOperation from '../../utils/is-allowed-operation'
+
+const customerShippingEndpoint: GetAPISchema<
+  any,
+  CustomerAddressSchema
+>['endpoint']['handler'] = async (ctx) => {
+  const { req, res, handlers, config } = ctx
+
+  if (
+    !isAllowedOperation(req, res, {
+      GET: handlers['getAddresses'],
+      POST: handlers['addItem'],
+      PUT: handlers['updateItem'],
+      DELETE: handlers['removeItem'],
+    })
+  ) {
+    return
+  }
+
+  const { cookies } = req
+
+  // Cart id might be usefull for anonymous shopping
+  const cartId = cookies[config.cartCookie]
+
+  try {
+    // Return customer addresses
+    if (req.method === 'GET') {
+      const body = { cartId }
+      return await handlers['getAddresses']({ ...ctx, body })
+    }
+
+    // Create or add an item to customer addresses list
+    if (req.method === 'POST') {
+      const body = { ...req.body, cartId }
+      return await handlers['addItem']({ ...ctx, body })
+    }
+
+    // Update item in customer addresses list
+    if (req.method === 'PUT') {
+      const body = { ...req.body, cartId }
+      return await handlers['updateItem']({ ...ctx, body })
+    }
+
+    // Remove an item from customer addresses list
+    if (req.method === 'DELETE') {
+      const body = { ...req.body, cartId }
+      return await handlers['removeItem']({ ...ctx, body })
+    }
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof CommerceAPIError
+        ? 'An unexpected error ocurred with the Commerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+export default customerShippingEndpoint
diff --git a/framework/commerce/api/endpoints/customer/card.ts b/framework/commerce/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..ad268cbb9
--- /dev/null
+++ b/framework/commerce/api/endpoints/customer/card.ts
@@ -0,0 +1,65 @@
+import type { CustomerCardSchema } from '../../../types/customer/card'
+import type { GetAPISchema } from '../..'
+
+import { CommerceAPIError } from '../../utils/errors'
+import isAllowedOperation from '../../utils/is-allowed-operation'
+
+const customerCardEndpoint: GetAPISchema<
+  any,
+  CustomerCardSchema
+>['endpoint']['handler'] = async (ctx) => {
+  const { req, res, handlers, config } = ctx
+
+  if (
+    !isAllowedOperation(req, res, {
+      GET: handlers['getCards'],
+      POST: handlers['addItem'],
+      PUT: handlers['updateItem'],
+      DELETE: handlers['removeItem'],
+    })
+  ) {
+    return
+  }
+
+  const { cookies } = req
+
+  // Cart id might be usefull for anonymous shopping
+  const cartId = cookies[config.cartCookie]
+
+  try {
+    // Create or add a card
+    if (req.method === 'GET') {
+      const body = { ...req.body }
+      return await handlers['getCards']({ ...ctx, body })
+    }
+
+    // Create or add an item to customer cards
+    if (req.method === 'POST') {
+      const body = { ...req.body, cartId }
+      return await handlers['addItem']({ ...ctx, body })
+    }
+
+    // Update item in customer cards
+    if (req.method === 'PUT') {
+      const body = { ...req.body, cartId }
+      return await handlers['updateItem']({ ...ctx, body })
+    }
+
+    // Remove an item from customer cards
+    if (req.method === 'DELETE') {
+      const body = { ...req.body, cartId }
+      return await handlers['removeItem']({ ...ctx, body })
+    }
+  } catch (error) {
+    console.error(error)
+
+    const message =
+      error instanceof CommerceAPIError
+        ? 'An unexpected error ocurred with the Commerce API'
+        : 'An unexpected error ocurred'
+
+    res.status(500).json({ data: null, errors: [{ message }] })
+  }
+}
+
+export default customerCardEndpoint
diff --git a/framework/commerce/api/endpoints/customer.ts b/framework/commerce/api/endpoints/customer/index.ts
similarity index 75%
rename from framework/commerce/api/endpoints/customer.ts
rename to framework/commerce/api/endpoints/customer/index.ts
index 6372c494f..eb2a048b7 100644
--- a/framework/commerce/api/endpoints/customer.ts
+++ b/framework/commerce/api/endpoints/customer/index.ts
@@ -1,7 +1,8 @@
-import type { CustomerSchema } from '../../types/customer'
-import { CommerceAPIError } from '../utils/errors'
-import isAllowedOperation from '../utils/is-allowed-operation'
-import type { GetAPISchema } from '..'
+import type { CustomerSchema } from '../../../types/customer'
+import type { GetAPISchema } from '../..'
+
+import { CommerceAPIError } from '../../utils/errors'
+import isAllowedOperation from '../../utils/is-allowed-operation'
 
 const customerEndpoint: GetAPISchema<
   any,
diff --git a/framework/commerce/api/index.ts b/framework/commerce/api/index.ts
index 32fe8cf80..716c11ed5 100644
--- a/framework/commerce/api/index.ts
+++ b/framework/commerce/api/index.ts
@@ -9,6 +9,8 @@ import type { SignupSchema } from '../types/signup'
 import type { ProductsSchema } from '../types/product'
 import type { WishlistSchema } from '../types/wishlist'
 import type { CheckoutSchema } from '../types/checkout'
+import type { CustomerCardSchema } from '../types/customer/card'
+import type { CustomerAddressSchema } from '../types/customer/address'
 import {
   defaultOperations,
   OPERATIONS,
@@ -25,6 +27,8 @@ export type APISchemas =
   | ProductsSchema
   | WishlistSchema
   | CheckoutSchema
+  | CustomerCardSchema
+  | CustomerAddressSchema
 
 export type GetAPISchema<
   C extends CommerceAPI<any>,
diff --git a/framework/commerce/checkout/use-checkout.ts b/framework/commerce/checkout/use-checkout.ts
new file mode 100644
index 000000000..0fe74cb28
--- /dev/null
+++ b/framework/commerce/checkout/use-checkout.ts
@@ -0,0 +1,34 @@
+import type { SWRHook, HookFetcherFn } from '../utils/types'
+import type { GetCheckoutHook } from '../types/checkout'
+
+import Cookies from 'js-cookie'
+
+import { useHook, useSWRHook } from '../utils/use-hook'
+import { Provider, useCommerce } from '..'
+
+export type UseCheckout<
+  H extends SWRHook<GetCheckoutHook<any>> = SWRHook<GetCheckoutHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<GetCheckoutHook> = async ({
+  options,
+  input: { cartId },
+  fetch,
+}) => {
+  return cartId ? await fetch(options) : null
+}
+
+const fn = (provider: Provider) => provider.checkout?.useCheckout!
+
+const useCheckout: UseCheckout = (input) => {
+  const hook = useHook(fn)
+  const { cartCookie } = useCommerce()
+  const fetcherFn = hook.fetcher ?? fetcher
+  const wrapper: typeof fetcher = (context) => {
+    context.input.cartId = Cookies.get(cartCookie)
+    return fetcherFn(context)
+  }
+  return useSWRHook({ ...hook, fetcher: wrapper })(input)
+}
+
+export default useCheckout
diff --git a/framework/commerce/checkout/use-submit-checkout.tsx b/framework/commerce/checkout/use-submit-checkout.tsx
new file mode 100644
index 000000000..a5d865002
--- /dev/null
+++ b/framework/commerce/checkout/use-submit-checkout.tsx
@@ -0,0 +1,23 @@
+import type { HookFetcherFn, MutationHook } from '../utils/types'
+import type { SubmitCheckoutHook } from '../types/checkout'
+import type { Provider } from '..'
+
+import { useHook, useMutationHook } from '../utils/use-hook'
+import { mutationFetcher } from '../utils/default-fetcher'
+
+export type UseSubmitCheckout<
+  H extends MutationHook<
+    SubmitCheckoutHook<any>
+  > = MutationHook<SubmitCheckoutHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<SubmitCheckoutHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.checkout?.useSubmitCheckout!
+
+const useSubmitCheckout: UseSubmitCheckout = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
+}
+
+export default useSubmitCheckout
diff --git a/framework/commerce/config.js b/framework/commerce/config.js
index 28502a04e..019c59a51 100644
--- a/framework/commerce/config.js
+++ b/framework/commerce/config.js
@@ -8,12 +8,12 @@ const merge = require('deepmerge')
 const prettier = require('prettier')
 
 const PROVIDERS = [
+  'local',
   'bigcommerce',
   'saleor',
   'shopify',
   'swell',
   'vendure',
-  'local',
 ]
 
 function getProviderName() {
diff --git a/framework/commerce/customer/address/use-add-item.tsx b/framework/commerce/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..94c45142e
--- /dev/null
+++ b/framework/commerce/customer/address/use-add-item.tsx
@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { AddItemHook } from '../../types/customer/address'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseAddItem<
+  H extends MutationHook<AddItemHook<any>> = MutationHook<AddItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<AddItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.customer?.address?.useAddItem!
+
+const useAddItem: UseAddItem = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
+}
+
+export default useAddItem
diff --git a/framework/commerce/customer/address/use-addresses.tsx b/framework/commerce/customer/address/use-addresses.tsx
new file mode 100644
index 000000000..7fc12924c
--- /dev/null
+++ b/framework/commerce/customer/address/use-addresses.tsx
@@ -0,0 +1,34 @@
+import type { SWRHook, HookFetcherFn } from '../../utils/types'
+import type { GetAddressesHook } from '../../types/customer/address'
+
+import Cookies from 'js-cookie'
+
+import { useHook, useSWRHook } from '../../utils/use-hook'
+import { Provider, useCommerce } from '../..'
+
+export type UseAddresses<
+  H extends SWRHook<GetAddressesHook<any>> = SWRHook<GetAddressesHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<GetAddressesHook> = async ({
+  options,
+  input: { cartId },
+  fetch,
+}) => {
+  return cartId ? await fetch(options) : null
+}
+
+const fn = (provider: Provider) => provider.customer?.address?.useAddresses!
+
+const useAddresses: UseAddresses = (input) => {
+  const hook = useHook(fn)
+  const { cartCookie } = useCommerce()
+  const fetcherFn = hook.fetcher ?? fetcher
+  const wrapper: typeof fetcher = (context) => {
+    context.input.cartId = Cookies.get(cartCookie)
+    return fetcherFn(context)
+  }
+  return useSWRHook({ ...hook, fetcher: wrapper })(input)
+}
+
+export default useAddresses
diff --git a/framework/commerce/customer/address/use-remove-item.tsx b/framework/commerce/customer/address/use-remove-item.tsx
new file mode 100644
index 000000000..820a65dad
--- /dev/null
+++ b/framework/commerce/customer/address/use-remove-item.tsx
@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { RemoveItemHook } from '../../types/customer/address'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseRemoveItem<
+  H extends MutationHook<RemoveItemHook<any>> = MutationHook<RemoveItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<RemoveItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.customer?.address?.useRemoveItem!
+
+const useRemoveItem: UseRemoveItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}
+
+export default useRemoveItem
diff --git a/framework/commerce/customer/address/use-update-item.tsx b/framework/commerce/customer/address/use-update-item.tsx
new file mode 100644
index 000000000..d05882296
--- /dev/null
+++ b/framework/commerce/customer/address/use-update-item.tsx
@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { UpdateItemHook } from '../../types/customer/address'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseUpdateItem<
+  H extends MutationHook<UpdateItemHook<any>> = MutationHook<UpdateItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<UpdateItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.customer?.address?.useUpdateItem!
+
+const useUpdateItem: UseUpdateItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}
+
+export default useUpdateItem
diff --git a/framework/commerce/customer/card/use-add-item.tsx b/framework/commerce/customer/card/use-add-item.tsx
new file mode 100644
index 000000000..7b4ffdb17
--- /dev/null
+++ b/framework/commerce/customer/card/use-add-item.tsx
@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { AddItemHook } from '../../types/customer/card'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseAddItem<
+  H extends MutationHook<AddItemHook<any>> = MutationHook<AddItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<AddItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.customer?.card?.useAddItem!
+
+const useAddItem: UseAddItem = (...args) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(...args)
+}
+
+export default useAddItem
diff --git a/framework/commerce/customer/card/use-cards.tsx b/framework/commerce/customer/card/use-cards.tsx
new file mode 100644
index 000000000..57099504f
--- /dev/null
+++ b/framework/commerce/customer/card/use-cards.tsx
@@ -0,0 +1,34 @@
+import type { SWRHook, HookFetcherFn } from '../../utils/types'
+import type { GetCardsHook } from '../../types/customer/card'
+
+import Cookies from 'js-cookie'
+
+import { useHook, useSWRHook } from '../../utils/use-hook'
+import { Provider, useCommerce } from '../..'
+
+export type UseCards<
+  H extends SWRHook<GetCardsHook<any>> = SWRHook<GetCardsHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<GetCardsHook> = async ({
+  options,
+  input: { cartId },
+  fetch,
+}) => {
+  return cartId ? await fetch(options) : null
+}
+
+const fn = (provider: Provider) => provider.customer?.card?.useCards!
+
+const useCards: UseCards = (input) => {
+  const hook = useHook(fn)
+  const { cartCookie } = useCommerce()
+  const fetcherFn = hook.fetcher ?? fetcher
+  const wrapper: typeof fetcher = (context) => {
+    context.input.cartId = Cookies.get(cartCookie)
+    return fetcherFn(context)
+  }
+  return useSWRHook({ ...hook, fetcher: wrapper })(input)
+}
+
+export default useCards
diff --git a/framework/commerce/customer/card/use-remove-item.tsx b/framework/commerce/customer/card/use-remove-item.tsx
new file mode 100644
index 000000000..1d85fa636
--- /dev/null
+++ b/framework/commerce/customer/card/use-remove-item.tsx
@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { RemoveItemHook } from '../../types/customer/card'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseRemoveItem<
+  H extends MutationHook<RemoveItemHook<any>> = MutationHook<RemoveItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<RemoveItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider.customer?.card?.useRemoveItem!
+
+const useRemoveItem: UseRemoveItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}
+
+export default useRemoveItem
diff --git a/framework/commerce/customer/card/use-update-item.tsx b/framework/commerce/customer/card/use-update-item.tsx
new file mode 100644
index 000000000..cd8837d7f
--- /dev/null
+++ b/framework/commerce/customer/card/use-update-item.tsx
@@ -0,0 +1,21 @@
+import type { HookFetcherFn, MutationHook } from '../../utils/types'
+import type { UpdateItemHook } from '../../types/customer/card'
+import type { Provider } from '../..'
+
+import { useHook, useMutationHook } from '../../utils/use-hook'
+import { mutationFetcher } from '../../utils/default-fetcher'
+
+export type UseUpdateItem<
+  H extends MutationHook<UpdateItemHook<any>> = MutationHook<UpdateItemHook>
+> = ReturnType<H['useHook']>
+
+export const fetcher: HookFetcherFn<UpdateItemHook> = mutationFetcher
+
+const fn = (provider: Provider) => provider?.customer?.card?.useUpdateItem!
+
+const useUpdateItem: UseUpdateItem = (input) => {
+  const hook = useHook(fn)
+  return useMutationHook({ fetcher, ...hook })(input)
+}
+
+export default useUpdateItem
diff --git a/framework/commerce/index.tsx b/framework/commerce/index.tsx
index 7ecb44dc1..eaa878a9e 100644
--- a/framework/commerce/index.tsx
+++ b/framework/commerce/index.tsx
@@ -15,6 +15,7 @@ import type {
   Signup,
   Login,
   Logout,
+  Checkout,
 } from '@commerce/types'
 
 import type { Fetcher, SWRHook, MutationHook } from './utils/types'
@@ -29,6 +30,10 @@ export type Provider = CommerceConfig & {
     useUpdateItem?: MutationHook<Cart.UpdateItemHook>
     useRemoveItem?: MutationHook<Cart.RemoveItemHook>
   }
+  checkout?: {
+    useCheckout?: SWRHook<Checkout.GetCheckoutHook>
+    useSubmitCheckout?: MutationHook<Checkout.SubmitCheckoutHook>
+  }
   wishlist?: {
     useWishlist?: SWRHook<Wishlist.GetWishlistHook>
     useAddItem?: MutationHook<Wishlist.AddItemHook>
@@ -36,6 +41,18 @@ export type Provider = CommerceConfig & {
   }
   customer?: {
     useCustomer?: SWRHook<Customer.CustomerHook>
+    card?: {
+      useCards?: SWRHook<Customer.Card.GetCardsHook>
+      useAddItem?: MutationHook<Customer.Card.AddItemHook>
+      useUpdateItem?: MutationHook<Customer.Card.UpdateItemHook>
+      useRemoveItem?: MutationHook<Customer.Card.RemoveItemHook>
+    }
+    address?: {
+      useAddresses?: SWRHook<Customer.Address.GetAddressesHook>
+      useAddItem?: MutationHook<Customer.Address.AddItemHook>
+      useUpdateItem?: MutationHook<Customer.Address.UpdateItemHook>
+      useRemoveItem?: MutationHook<Customer.Address.RemoveItemHook>
+    }
   }
   products?: {
     useSearch?: SWRHook<Product.SearchProductsHook>
@@ -47,51 +64,60 @@ export type Provider = CommerceConfig & {
   }
 }
 
-export type CommerceProps<P extends Provider> = {
-  children?: ReactNode
-  provider: P
-  config: CommerceConfig
-}
-
-export type CommerceConfig = Omit<
-  CommerceContextValue<any>,
-  'providerRef' | 'fetcherRef'
->
-
-export type CommerceContextValue<P extends Provider> = {
-  providerRef: MutableRefObject<P>
-  fetcherRef: MutableRefObject<Fetcher>
+export type CommerceConfig = {
   locale: string
   cartCookie: string
 }
 
-export function CommerceProvider<P extends Provider>({
+export type CommerceContextValue<P extends Provider> = {
+  providerRef: MutableRefObject<P>
+  fetcherRef: MutableRefObject<Fetcher>
+} & CommerceConfig
+
+export type CommerceProps<P extends Provider> = {
+  children?: ReactNode
+  provider: P
+}
+
+/**
+ * These are the properties every provider should allow when implementing
+ * the core commerce provider
+ */
+export type CommerceProviderProps = {
+  children?: ReactNode
+} & Partial<CommerceConfig>
+
+export function CoreCommerceProvider<P extends Provider>({
   provider,
   children,
-  config,
 }: CommerceProps<P>) {
-  if (!config) {
-    throw new Error('CommerceProvider requires a valid config object')
-  }
-
   const providerRef = useRef(provider)
   // TODO: Remove the fetcherRef
   const fetcherRef = useRef(provider.fetcher)
-  // Because the config is an object, if the parent re-renders this provider
-  // will re-render every consumer unless we memoize the config
+  // If the parent re-renders this provider will re-render every
+  // consumer unless we memoize the config
+  const { locale, cartCookie } = providerRef.current
   const cfg = useMemo(
-    () => ({
-      providerRef,
-      fetcherRef,
-      locale: config.locale,
-      cartCookie: config.cartCookie,
-    }),
-    [config.locale, config.cartCookie]
+    () => ({ providerRef, fetcherRef, locale, cartCookie }),
+    [locale, cartCookie]
   )
 
   return <Commerce.Provider value={cfg}>{children}</Commerce.Provider>
 }
 
+export function getCommerceProvider<P extends Provider>(provider: P) {
+  return function CommerceProvider({
+    children,
+    ...props
+  }: CommerceProviderProps) {
+    return (
+      <CoreCommerceProvider provider={{ ...provider, ...props }}>
+        {children}
+      </CoreCommerceProvider>
+    )
+  }
+}
+
 export function useCommerce<P extends Provider>() {
   return useContext(Commerce) as CommerceContextValue<P>
 }
diff --git a/framework/commerce/new-provider.md b/framework/commerce/new-provider.md
index 8c2feeab2..6e149a7d4 100644
--- a/framework/commerce/new-provider.md
+++ b/framework/commerce/new-provider.md
@@ -47,6 +47,12 @@ The app imports from the provider directly instead of the core commerce folder (
 
 The provider folder should only depend on `framework/commerce` and dependencies in the main `package.json`. In the future we'll move the `framework` folder to a package that can be shared easily for multiple apps.
 
+## Updating the list of known providers
+
+Open [./config.js](./config.js) and add the provider name to the list in `PROVIDERS`.
+
+Then, open [/.env.template](/.env.template) and add the provider name in the first line.
+
 ## Adding the provider hooks
 
 Using BigCommerce as an example. The first thing to do is export a `CommerceProvider` component that includes a `provider` object with all the handlers that can be used for hooks:
diff --git a/framework/commerce/types/checkout.ts b/framework/commerce/types/checkout.ts
index 9e3c7ecfa..ea28926a8 100644
--- a/framework/commerce/types/checkout.ts
+++ b/framework/commerce/types/checkout.ts
@@ -1,10 +1,57 @@
-export type CheckoutSchema = {
+import type { UseSubmitCheckout } from '../checkout/use-submit-checkout'
+import type { Address } from './customer/address'
+import type { Card } from './customer/card'
+
+// Index
+export type Checkout = unknown;
+
+export type CheckoutTypes = {
+  card?: Card
+  address?: Address
+  checkout?: Checkout
+  hasPayment?: boolean
+  hasShipping?: boolean
+}
+
+export type SubmitCheckoutHook<T extends CheckoutTypes = CheckoutTypes> = {
+  data: T
+  input?: T
+  fetcherInput: T
+  body: { item: T }
+  actionInput: T
+}
+
+export type GetCheckoutHook<T extends CheckoutTypes = CheckoutTypes> = {
+  data: T['checkout'] | null
+  input: {}
+  fetcherInput: { cartId?: string }
+  swrState: { isEmpty: boolean }
+  mutations: { submit: UseSubmitCheckout }
+}
+
+export type CheckoutHooks<T extends CheckoutTypes = CheckoutTypes> = {
+  submitCheckout: SubmitCheckoutHook<T>
+  getCheckout: GetCheckoutHook<T>
+}
+
+export type GetCheckoutHandler<T extends CheckoutTypes = CheckoutTypes> =
+  GetCheckoutHook<T> & {
+    body: { cartId: string }
+  }
+
+export type SubmitCheckoutHandler<T extends CheckoutTypes = CheckoutTypes> =
+  SubmitCheckoutHook<T> & {
+    body: { cartId: string }
+  }
+
+export type CheckoutHandlers<T extends CheckoutTypes = CheckoutTypes> = {
+  getCheckout?: GetCheckoutHandler<T>
+  submitCheckout: SubmitCheckoutHandler<T>
+}
+
+export type CheckoutSchema<T extends CheckoutTypes = CheckoutTypes> = {
   endpoint: {
     options: {}
-    handlers: {
-      checkout: {
-        data: null
-      }
-    }
+    handlers: CheckoutHandlers<T>
   }
 }
diff --git a/framework/commerce/types/customer/address.ts b/framework/commerce/types/customer/address.ts
new file mode 100644
index 000000000..5b6ca4b49
--- /dev/null
+++ b/framework/commerce/types/customer/address.ts
@@ -0,0 +1,93 @@
+export interface Address {
+  id: string;
+  mask: string;
+}
+
+export interface AddressFields {
+  type: string;
+  firstName: string;
+  lastName: string;
+  company: string;
+  streetNumber: string;
+  apartments: string;
+  zipCode: string;
+  city: string;
+  country: string;
+}
+
+export type CustomerAddressTypes = {
+  address?: Address;
+  fields: AddressFields;
+}
+
+export type GetAddressesHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  data: T['address'] | null
+  input: {}
+  fetcherInput: { cartId?: string }
+  swrState: { isEmpty: boolean }
+}
+
+export type AddItemHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  data: T['address']
+  input?: T['fields']
+  fetcherInput: T['fields']
+  body: { item: T['fields'] }
+  actionInput: T['fields']
+}
+
+export type UpdateItemHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  data: T['address'] | null
+  input: { item?: T['fields']; wait?: number }
+  fetcherInput: { itemId: string; item: T['fields'] }
+  body: { itemId: string; item: T['fields'] }
+  actionInput: T['fields'] & { id: string }
+}
+
+export type RemoveItemHook<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  data: T['address'] | null
+  input: { item?: T['fields'] }
+  fetcherInput: { itemId: string }
+  body: { itemId: string }
+  actionInput: { id: string }
+}
+
+export type CustomerAddressHooks<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  getAddresses: GetAddressesHook<T>
+  addItem: AddItemHook<T>
+  updateItem: UpdateItemHook<T>
+  removeItem: RemoveItemHook<T>
+}
+
+export type AddresssHandler<T extends CustomerAddressTypes = CustomerAddressTypes> = GetAddressesHook<T> & {
+  body: { cartId?: string }
+}
+
+export type AddItemHandler<T extends CustomerAddressTypes = CustomerAddressTypes> = AddItemHook<T> & {
+  body: { cartId: string }
+}
+
+export type UpdateItemHandler<T extends CustomerAddressTypes = CustomerAddressTypes> =
+  UpdateItemHook<T> & {
+    data: T['address']
+    body: { cartId: string }
+  }
+
+export type RemoveItemHandler<T extends CustomerAddressTypes = CustomerAddressTypes> =
+  RemoveItemHook<T> & {
+    body: { cartId: string }
+  }
+
+
+export type CustomerAddressHandlers<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  getAddresses: GetAddressesHook<T>
+  addItem: AddItemHandler<T>
+  updateItem: UpdateItemHandler<T>
+  removeItem: RemoveItemHandler<T>
+}
+
+export type CustomerAddressSchema<T extends CustomerAddressTypes = CustomerAddressTypes> = {
+  endpoint: {
+    options: {}
+    handlers: CustomerAddressHandlers<T>
+  }
+}
diff --git a/framework/commerce/types/customer/card.ts b/framework/commerce/types/customer/card.ts
new file mode 100644
index 000000000..a8731411f
--- /dev/null
+++ b/framework/commerce/types/customer/card.ts
@@ -0,0 +1,96 @@
+export interface Card {
+  id: string;
+  mask: string;
+  provider: string;
+}
+
+export interface CardFields {
+  cardHolder: string;
+  cardNumber: string;
+  cardExpireDate: string;
+  cardCvc: string;
+  firstName: string;
+  lastName: string;
+  company: string;
+  streetNumber: string;
+  zipCode: string;
+  city: string;
+  country: string;
+}
+
+export type CustomerCardTypes = {
+  card?: Card;
+  fields: CardFields;
+}
+
+export type GetCardsHook<T extends CustomerCardTypes = CustomerCardTypes> = {
+  data: T['card'] | null
+  input: {}
+  fetcherInput: { cartId?: string }
+  swrState: { isEmpty: boolean }
+}
+
+export type AddItemHook<T extends CustomerCardTypes = CustomerCardTypes> = {
+  data: T['card']
+  input?: T['fields']
+  fetcherInput: T['fields']
+  body: { item: T['fields'] }
+  actionInput: T['fields']
+}
+
+export type UpdateItemHook<T extends CustomerCardTypes = CustomerCardTypes> = {
+  data: T['card'] | null
+  input: { item?: T['fields']; wait?: number }
+  fetcherInput: { itemId: string; item: T['fields'] }
+  body: { itemId: string; item: T['fields'] }
+  actionInput: T['fields'] & { id: string }
+}
+
+export type RemoveItemHook<T extends CustomerCardTypes = CustomerCardTypes> = {
+  data: T['card'] | null
+  input: { item?: T['fields'] }
+  fetcherInput: { itemId: string }
+  body: { itemId: string }
+  actionInput: { id: string }
+}
+
+export type CustomerCardHooks<T extends CustomerCardTypes = CustomerCardTypes> = {
+  getCards: GetCardsHook<T>
+  addItem: AddItemHook<T>
+  updateItem: UpdateItemHook<T>
+  removeItem: RemoveItemHook<T>
+}
+
+export type CardsHandler<T extends CustomerCardTypes = CustomerCardTypes> = GetCardsHook<T> & {
+  body: { cartId?: string }
+}
+
+export type AddItemHandler<T extends CustomerCardTypes = CustomerCardTypes> = AddItemHook<T> & {
+  body: { cartId: string }
+}
+
+export type UpdateItemHandler<T extends CustomerCardTypes = CustomerCardTypes> =
+  UpdateItemHook<T> & {
+    data: T['card']
+    body: { cartId: string }
+  }
+
+export type RemoveItemHandler<T extends CustomerCardTypes = CustomerCardTypes> =
+  RemoveItemHook<T> & {
+    body: { cartId: string }
+  }
+
+
+export type CustomerCardHandlers<T extends CustomerCardTypes = CustomerCardTypes> = {
+  getCards: GetCardsHook<T>
+  addItem: AddItemHandler<T>
+  updateItem: UpdateItemHandler<T>
+  removeItem: RemoveItemHandler<T>
+}
+
+export type CustomerCardSchema<T extends CustomerCardTypes = CustomerCardTypes> = {
+  endpoint: {
+    options: {}
+    handlers: CustomerCardHandlers<T>
+  }
+}
diff --git a/framework/commerce/types/customer.ts b/framework/commerce/types/customer/index.ts
similarity index 87%
rename from framework/commerce/types/customer.ts
rename to framework/commerce/types/customer/index.ts
index ba90acdf4..70c437c29 100644
--- a/framework/commerce/types/customer.ts
+++ b/framework/commerce/types/customer/index.ts
@@ -1,3 +1,6 @@
+export * as Card from "./card"
+export * as Address from "./address"
+
 // TODO: define this type
 export type Customer = any
 
diff --git a/framework/commerce/utils/types.ts b/framework/commerce/utils/types.ts
index 751cea4a5..2bca30852 100644
--- a/framework/commerce/utils/types.ts
+++ b/framework/commerce/utils/types.ts
@@ -87,6 +87,8 @@ export type HookSchemaBase = {
 export type SWRHookSchemaBase = HookSchemaBase & {
   // Custom state added to the response object of SWR
   swrState?: {}
+  // Instances of MutationSchemaBase that the hook returns for better DX
+  mutations?: Record<string, ReturnType<MutationHook<any>['useHook']>>
 }
 
 export type MutationSchemaBase = HookSchemaBase & {
@@ -102,7 +104,7 @@ export type SWRHook<H extends SWRHookSchemaBase> = {
     context: SWRHookContext<H>
   ): HookFunction<
     H['input'] & { swrOptions?: SwrOptions<H['data'], H['fetcherInput']> },
-    ResponseState<H['data']> & H['swrState']
+    ResponseState<H['data']> & H['swrState'] & H['mutations']
   >
   fetchOptions: HookFetcherOptions
   fetcher?: HookFetcherFn<H>
diff --git a/framework/local/api/endpoints/customer/address.ts b/framework/local/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/local/api/endpoints/customer/address.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/local/api/endpoints/customer/card.ts b/framework/local/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/local/api/endpoints/customer/card.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/local/checkout/use-checkout.tsx b/framework/local/checkout/use-checkout.tsx
new file mode 100644
index 000000000..942f85b83
--- /dev/null
+++ b/framework/local/checkout/use-checkout.tsx
@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+
+export default useCheckout as UseCheckout<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
+}
diff --git a/framework/local/customer/address/use-add-item.tsx b/framework/local/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..ac9dcd5cf
--- /dev/null
+++ b/framework/local/customer/address/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/local/customer/card/use-add-item.tsx b/framework/local/customer/card/use-add-item.tsx
new file mode 100644
index 000000000..7e3afa9c5
--- /dev/null
+++ b/framework/local/customer/card/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/local/index.tsx b/framework/local/index.tsx
index 2ec304f63..dcc713e69 100644
--- a/framework/local/index.tsx
+++ b/framework/local/index.tsx
@@ -1,32 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-import { localProvider } from './provider'
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { localProvider, LocalProvider } from './provider'
 
-export const localConfig: CommerceConfig = {
-  locale: 'en-us',
-  cartCookie: 'session',
-}
+export { localProvider }
+export type { LocalProvider }
 
-export function CommerceProvider({
-  children,
-  ...config
-}: {
-  children?: ReactNode
-  locale: string
-} & Partial<CommerceConfig>) {
-  return (
-    <CoreCommerceProvider
-      provider={localProvider}
-      config={{ ...localConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
+export const CommerceProvider = getCommerceProvider(localProvider)
 
-export const useCommerce = () => useCoreCommerce()
+export const useCommerce = () => useCoreCommerce<LocalProvider>()
diff --git a/framework/local/provider.ts b/framework/local/provider.ts
index e6a2b0a21..53dc7f574 100644
--- a/framework/local/provider.ts
+++ b/framework/local/provider.ts
@@ -9,7 +9,6 @@ import { handler as useLogin } from './auth/use-login'
 import { handler as useLogout } from './auth/use-logout'
 import { handler as useSignup } from './auth/use-signup'
 
-export type Provider = typeof localProvider
 export const localProvider = {
   locale: 'en-us',
   cartCookie: 'session',
@@ -19,3 +18,5 @@ export const localProvider = {
   products: { useSearch },
   auth: { useLogin, useLogout, useSignup },
 }
+
+export type LocalProvider = typeof localProvider
diff --git a/framework/saleor/api/endpoints/checkout/index.ts b/framework/saleor/api/endpoints/checkout/index.ts
index f15672435..385283ea7 100644
--- a/framework/saleor/api/endpoints/checkout/index.ts
+++ b/framework/saleor/api/endpoints/checkout/index.ts
@@ -6,11 +6,7 @@ export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
 
 export type CheckoutEndpoint = CheckoutAPI['endpoint']
 
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
-  req,
-  res,
-  config,
-}) => {
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({ req, res, config }) => {
   try {
     const html = `
       <!DOCTYPE html>
@@ -47,7 +43,7 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
   }
 }
 
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
 
 const checkoutApi = createEndpoint<CheckoutAPI>({
   handler: checkoutEndpoint,
diff --git a/framework/saleor/api/endpoints/customer.ts b/framework/saleor/api/endpoints/customer.ts
deleted file mode 100644
index d09c976c3..000000000
--- a/framework/saleor/api/endpoints/customer.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default function (_commerce: any) {}
diff --git a/framework/saleor/api/endpoints/customer/address.ts b/framework/saleor/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/saleor/api/endpoints/customer/address.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/saleor/api/endpoints/customer/card.ts b/framework/saleor/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/saleor/api/endpoints/customer/card.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/saleor/api/endpoints/customer/index.ts b/framework/saleor/api/endpoints/customer/index.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/saleor/api/endpoints/customer/index.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/saleor/api/index.ts b/framework/saleor/api/index.ts
index 5ae5f3a8a..074607666 100644
--- a/framework/saleor/api/index.ts
+++ b/framework/saleor/api/index.ts
@@ -1,5 +1,5 @@
-import type { CommerceAPIConfig } from '@commerce/api'
-
+import { CommerceAPI, CommerceAPIConfig, getCommerceApi as commerceApi } from '@commerce/api'
+import * as operations from './operations'
 import * as Const from '../const'
 
 if (!Const.API_URL) {
@@ -27,23 +27,12 @@ const config: SaleorConfig = {
   storeChannel: Const.API_CHANNEL,
 }
 
-import {
-  CommerceAPI,
-  getCommerceApi as commerceApi,
-} from '@commerce/api'
-
-import * as operations from './operations'
-
-export interface ShopifyConfig extends CommerceAPIConfig {}
-
 export const provider = { config, operations }
 
 export type Provider = typeof provider
 
 export type SaleorAPI<P extends Provider = Provider> = CommerceAPI<P>
 
-export function getCommerceApi<P extends Provider>(
-  customProvider: P = provider as any
-): SaleorAPI<P> {
+export function getCommerceApi<P extends Provider>(customProvider: P = provider as any): SaleorAPI<P> {
   return commerceApi(customProvider)
 }
diff --git a/framework/saleor/api/operations/get-all-product-paths.ts b/framework/saleor/api/operations/get-all-product-paths.ts
index 43ce7de94..c04964147 100644
--- a/framework/saleor/api/operations/get-all-product-paths.ts
+++ b/framework/saleor/api/operations/get-all-product-paths.ts
@@ -1,10 +1,6 @@
 import type { OperationContext } from '@commerce/api/operations'
-import {
-  GetAllProductPathsQuery,
-  GetAllProductPathsQueryVariables,
-  ProductCountableEdge,
-} from '../../schema'
-import type { ShopifyConfig, Provider, SaleorConfig } from '..'
+import { ProductCountableEdge } from '../../schema'
+import type { Provider, SaleorConfig } from '..'
 
 import { getAllProductsPathsQuery } from '../../utils/queries'
 import fetchAllProducts from '../utils/fetch-all-products'
@@ -13,10 +9,7 @@ export type GetAllProductPathsResult = {
   products: Array<{ path: string }>
 }
 
-export default function getAllProductPathsOperation({
-  commerce,
-}: OperationContext<Provider>) {
-
+export default function getAllProductPathsOperation({ commerce }: OperationContext<Provider>) {
   async function getAllProductPaths({
     query,
     config,
@@ -24,7 +17,7 @@ export default function getAllProductPathsOperation({
   }: {
     query?: string
     config?: SaleorConfig
-    variables?: any 
+    variables?: any
   } = {}): Promise<GetAllProductPathsResult> {
     config = commerce.getConfig(config)
 
@@ -39,7 +32,6 @@ export default function getAllProductPathsOperation({
         path: `/${slug}`,
       })),
     }
-
   }
 
   return getAllProductPaths
diff --git a/framework/saleor/checkout/use-checkout.tsx b/framework/saleor/checkout/use-checkout.tsx
new file mode 100644
index 000000000..942f85b83
--- /dev/null
+++ b/framework/saleor/checkout/use-checkout.tsx
@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+
+export default useCheckout as UseCheckout<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
+}
diff --git a/framework/saleor/customer/address/use-add-item.tsx b/framework/saleor/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..ac9dcd5cf
--- /dev/null
+++ b/framework/saleor/customer/address/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/saleor/customer/card/use-add-item.tsx b/framework/saleor/customer/card/use-add-item.tsx
new file mode 100644
index 000000000..7e3afa9c5
--- /dev/null
+++ b/framework/saleor/customer/card/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/saleor/index.tsx b/framework/saleor/index.tsx
index 5c9e61ec8..0fa217943 100644
--- a/framework/saleor/index.tsx
+++ b/framework/saleor/index.tsx
@@ -1,32 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-
-import { CommerceConfig, CommerceProvider as CoreCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
-
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
 import { saleorProvider, SaleorProvider } from './provider'
-import * as Const from './const'
 
 export { saleorProvider }
 export type { SaleorProvider }
 
-export const saleorConfig: CommerceConfig = {
-  locale: 'en-us',
-  cartCookie: Const.CHECKOUT_ID_COOKIE,
-}
+export const CommerceProvider = getCommerceProvider(saleorProvider)
 
-export type SaleorConfig = Partial<CommerceConfig>
-
-export type SaleorProps = {
-  children?: ReactNode
-  locale: string
-} & SaleorConfig
-
-export function CommerceProvider({ children, ...config }: SaleorProps) {
-  return (
-    <CoreCommerceProvider provider={saleorProvider} config={{ ...saleorConfig, ...config }}>
-      {children}
-    </CoreCommerceProvider>
-  )
-}
-
-export const useCommerce = () => useCoreCommerce()
+export const useCommerce = () => useCoreCommerce<SaleorProvider>()
diff --git a/framework/saleor/provider.ts b/framework/saleor/provider.ts
index 2ca96475a..becf2998f 100644
--- a/framework/saleor/provider.ts
+++ b/framework/saleor/provider.ts
@@ -1,3 +1,4 @@
+import { CHECKOUT_ID_COOKIE } from './const'
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
 import { handler as useUpdateItem } from './cart/use-update-item'
@@ -14,8 +15,7 @@ import fetcher from './fetcher'
 
 export const saleorProvider = {
   locale: 'en-us',
-  cartCookie: '',
-  cartCookieToken: '',
+  cartCookie: CHECKOUT_ID_COOKIE,
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
   customer: { useCustomer },
diff --git a/framework/shopify/api/endpoints/checkout/index.ts b/framework/shopify/api/endpoints/checkout/index.ts
index 5d78f451b..72b86cae2 100644
--- a/framework/shopify/api/endpoints/checkout/index.ts
+++ b/framework/shopify/api/endpoints/checkout/index.ts
@@ -2,13 +2,13 @@ import { GetAPISchema, createEndpoint } from '@commerce/api'
 import checkoutEndpoint from '@commerce/api/endpoints/checkout'
 import type { CheckoutSchema } from '../../../types/checkout'
 import type { ShopifyAPI } from '../..'
-import checkout from './checkout'
+import submitCheckout from './submit-checkout'
 
 export type CheckoutAPI = GetAPISchema<ShopifyAPI, CheckoutSchema>
 
 export type CheckoutEndpoint = CheckoutAPI['endpoint']
 
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
 
 const checkoutApi = createEndpoint<CheckoutAPI>({
   handler: checkoutEndpoint,
diff --git a/framework/shopify/api/endpoints/checkout/checkout.ts b/framework/shopify/api/endpoints/checkout/submit-checkout.ts
similarity index 88%
rename from framework/shopify/api/endpoints/checkout/checkout.ts
rename to framework/shopify/api/endpoints/checkout/submit-checkout.ts
index 0c340a129..97ac77381 100644
--- a/framework/shopify/api/endpoints/checkout/checkout.ts
+++ b/framework/shopify/api/endpoints/checkout/submit-checkout.ts
@@ -6,7 +6,7 @@ import {
 import associateCustomerWithCheckoutMutation from '../../../utils/mutations/associate-customer-with-checkout'
 import type { CheckoutEndpoint } from '.'
 
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
   req,
   res,
   config,
@@ -35,4 +35,4 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
   }
 }
 
-export default checkout
+export default submitCheckout
diff --git a/framework/shopify/api/endpoints/customer.ts b/framework/shopify/api/endpoints/customer.ts
deleted file mode 100644
index d09c976c3..000000000
--- a/framework/shopify/api/endpoints/customer.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default function (_commerce: any) {}
diff --git a/framework/shopify/api/endpoints/customer/address.ts b/framework/shopify/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/shopify/api/endpoints/customer/address.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/shopify/api/endpoints/customer/card.ts b/framework/shopify/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/shopify/api/endpoints/customer/card.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/shopify/api/endpoints/customer/index.ts b/framework/shopify/api/endpoints/customer/index.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/shopify/api/endpoints/customer/index.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/shopify/checkout/use-checkout.tsx b/framework/shopify/checkout/use-checkout.tsx
new file mode 100644
index 000000000..942f85b83
--- /dev/null
+++ b/framework/shopify/checkout/use-checkout.tsx
@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+
+export default useCheckout as UseCheckout<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
+}
diff --git a/framework/shopify/const.ts b/framework/shopify/const.ts
index 06fbe5054..a8ee70586 100644
--- a/framework/shopify/const.ts
+++ b/framework/shopify/const.ts
@@ -8,6 +8,6 @@ export const STORE_DOMAIN = process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
 
 export const SHOPIFY_COOKIE_EXPIRE = 30
 
-export const API_URL = `https://${STORE_DOMAIN}/api/2021-01/graphql.json`
+export const API_URL = `https://${STORE_DOMAIN}/api/2021-07/graphql.json`
 
 export const API_TOKEN = process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
diff --git a/framework/shopify/customer/address/use-add-item.tsx b/framework/shopify/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..ac9dcd5cf
--- /dev/null
+++ b/framework/shopify/customer/address/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/shopify/customer/card/use-add-item.tsx b/framework/shopify/customer/card/use-add-item.tsx
new file mode 100644
index 000000000..7e3afa9c5
--- /dev/null
+++ b/framework/shopify/customer/card/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/shopify/index.tsx b/framework/shopify/index.tsx
index 46ed106c5..6a8c6aa8b 100644
--- a/framework/shopify/index.tsx
+++ b/framework/shopify/index.tsx
@@ -1,40 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-
-import { shopifyProvider } from './provider'
-import type { ShopifyProvider } from './provider'
-import { SHOPIFY_CHECKOUT_ID_COOKIE } from './const'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { shopifyProvider, ShopifyProvider } from './provider'
 
 export { shopifyProvider }
 export type { ShopifyProvider }
 
-export const shopifyConfig: CommerceConfig = {
-  locale: 'en-us',
-  cartCookie: SHOPIFY_CHECKOUT_ID_COOKIE,
-}
-
-export type ShopifyConfig = Partial<CommerceConfig>
-
-export type ShopifyProps = {
-  children?: ReactNode
-  locale: string
-} & ShopifyConfig
-
-export function CommerceProvider({ children, ...config }: ShopifyProps) {
-  return (
-    <CoreCommerceProvider
-      provider={shopifyProvider}
-      config={{ ...shopifyConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
+export const CommerceProvider = getCommerceProvider(shopifyProvider)
 
 export const useCommerce = () => useCoreCommerce<ShopifyProvider>()
diff --git a/framework/swell/api/endpoints/checkout/index.ts b/framework/swell/api/endpoints/checkout/index.ts
index ab17a3767..9847d8420 100644
--- a/framework/swell/api/endpoints/checkout/index.ts
+++ b/framework/swell/api/endpoints/checkout/index.ts
@@ -3,7 +3,7 @@ import { CheckoutSchema } from '@commerce/types/checkout'
 import { SWELL_CHECKOUT_URL_COOKIE } from '../../../const'
 import checkoutEndpoint from '@commerce/api/endpoints/checkout'
 
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
   req,
   res,
   config,
@@ -17,7 +17,7 @@ const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
     res.redirect('/cart')
   }
 }
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
 
 export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
 export type CheckoutEndpoint = CheckoutAPI['endpoint']
diff --git a/framework/swell/api/endpoints/customer.ts b/framework/swell/api/endpoints/customer.ts
deleted file mode 100644
index d09c976c3..000000000
--- a/framework/swell/api/endpoints/customer.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default function (_commerce: any) {}
diff --git a/framework/swell/api/endpoints/customer/address.ts b/framework/swell/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/swell/api/endpoints/customer/address.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/swell/api/endpoints/customer/card.ts b/framework/swell/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/swell/api/endpoints/customer/card.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/swell/api/endpoints/customer/index.ts b/framework/swell/api/endpoints/customer/index.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/swell/api/endpoints/customer/index.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/swell/api/utils/fetch-swell-api.ts b/framework/swell/api/utils/fetch-swell-api.ts
index 65caed763..83055c5c0 100644
--- a/framework/swell/api/utils/fetch-swell-api.ts
+++ b/framework/swell/api/utils/fetch-swell-api.ts
@@ -1,7 +1,7 @@
-import { swellConfig } from '../..'
+import swell from '../../swell'
 
 const fetchApi = async (query: string, method: string, variables: [] = []) => {
-  const { swell } = swellConfig
   return swell[query][method](...variables)
 }
+
 export default fetchApi
diff --git a/framework/swell/checkout/use-checkout.tsx b/framework/swell/checkout/use-checkout.tsx
new file mode 100644
index 000000000..942f85b83
--- /dev/null
+++ b/framework/swell/checkout/use-checkout.tsx
@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+
+export default useCheckout as UseCheckout<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
+}
diff --git a/framework/swell/const.ts b/framework/swell/const.ts
index 669194298..16d493896 100644
--- a/framework/swell/const.ts
+++ b/framework/swell/const.ts
@@ -4,8 +4,6 @@ export const SWELL_CHECKOUT_URL_COOKIE = 'swell_checkoutUrl'
 
 export const SWELL_CUSTOMER_TOKEN_COOKIE = 'swell_customerToken'
 
-export const STORE_DOMAIN = process.env.NEXT_PUBLIC_SWELL_STORE_DOMAIN
-
 export const SWELL_COOKIE_EXPIRE = 30
 
 export const SWELL_STORE_ID = process.env.NEXT_PUBLIC_SWELL_STORE_ID
diff --git a/framework/swell/customer/address/use-add-item.tsx b/framework/swell/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..ac9dcd5cf
--- /dev/null
+++ b/framework/swell/customer/address/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/swell/customer/card/use-add-item.tsx b/framework/swell/customer/card/use-add-item.tsx
new file mode 100644
index 000000000..7e3afa9c5
--- /dev/null
+++ b/framework/swell/customer/card/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/swell/fetcher.ts b/framework/swell/fetcher.ts
index f18dcf667..655e4da25 100644
--- a/framework/swell/fetcher.ts
+++ b/framework/swell/fetcher.ts
@@ -1,11 +1,9 @@
 import { Fetcher } from '@commerce/utils/types'
-import { handleFetchResponse } from './utils'
-import { swellConfig } from './index'
 import { CommerceError } from '@commerce/utils/errors'
+import { handleFetchResponse } from './utils'
+import swell from './swell'
 
 const fetcher: Fetcher = async ({ method = 'get', variables, query }) => {
-  const { swell } = swellConfig
-
   async function callSwell() {
     if (Array.isArray(variables)) {
       const arg1 = variables[0]
diff --git a/framework/swell/index.tsx b/framework/swell/index.tsx
index 28f60b394..b64df6d48 100644
--- a/framework/swell/index.tsx
+++ b/framework/swell/index.tsx
@@ -1,47 +1,9 @@
-import * as React from 'react'
-import swell from 'swell-js'
-import { ReactNode } from 'react'
-
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
 import { swellProvider, SwellProvider } from './provider'
-import {
-  SWELL_CHECKOUT_ID_COOKIE,
-  SWELL_STORE_ID,
-  SWELL_PUBLIC_KEY,
-} from './const'
-swell.init(SWELL_STORE_ID, SWELL_PUBLIC_KEY)
 
 export { swellProvider }
 export type { SwellProvider }
 
-export const swellConfig: any = {
-  locale: 'en-us',
-  cartCookie: SWELL_CHECKOUT_ID_COOKIE,
-  swell,
-}
+export const CommerceProvider = getCommerceProvider(swellProvider)
 
-export type SwellConfig = Partial<CommerceConfig>
-
-export type SwellProps = {
-  children?: ReactNode
-  locale: string
-} & SwellConfig
-
-export function CommerceProvider({ children, ...config }: SwellProps) {
-  return (
-    <CoreCommerceProvider
-      // TODO: Fix this type
-      provider={swellProvider as any}
-      config={{ ...swellConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
-
-export const useCommerce = () => useCoreCommerce()
+export const useCommerce = () => useCoreCommerce<SwellProvider>()
diff --git a/framework/swell/provider.ts b/framework/swell/provider.ts
index aa7be31d4..062f1c32c 100644
--- a/framework/swell/provider.ts
+++ b/framework/swell/provider.ts
@@ -1,6 +1,5 @@
 import { Provider } from '@commerce'
-
-import { SWELL_CHECKOUT_URL_COOKIE, STORE_DOMAIN } from './const'
+import { SWELL_CHECKOUT_ID_COOKIE } from './const'
 
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
@@ -15,11 +14,12 @@ import { handler as useLogout } from './auth/use-logout'
 import { handler as useSignup } from './auth/use-signup'
 
 import fetcher from './fetcher'
+import swell from './swell'
 
-export const swellProvider: Provider = {
+export const swellProvider: Provider & { swell: any } = {
   locale: 'en-us',
-  cartCookie: SWELL_CHECKOUT_URL_COOKIE,
-  // storeDomain: STORE_DOMAIN,
+  cartCookie: SWELL_CHECKOUT_ID_COOKIE,
+  swell,
   fetcher,
   cart: { useCart, useAddItem, useUpdateItem, useRemoveItem },
   customer: { useCustomer },
diff --git a/framework/swell/swell.ts b/framework/swell/swell.ts
new file mode 100644
index 000000000..d73bceb72
--- /dev/null
+++ b/framework/swell/swell.ts
@@ -0,0 +1,6 @@
+import swell from 'swell-js'
+import { SWELL_STORE_ID, SWELL_PUBLIC_KEY } from './const'
+
+swell.init(SWELL_STORE_ID, SWELL_PUBLIC_KEY)
+
+export default swell
diff --git a/framework/vendure/api/endpoints/checkout/index.ts b/framework/vendure/api/endpoints/checkout/index.ts
index 00c17f993..f138af6be 100644
--- a/framework/vendure/api/endpoints/checkout/index.ts
+++ b/framework/vendure/api/endpoints/checkout/index.ts
@@ -3,7 +3,7 @@ import { CommerceAPI, createEndpoint, GetAPISchema } from '@commerce/api'
 import { CheckoutSchema } from '@commerce/types/checkout'
 import checkoutEndpoint from '@commerce/api/endpoints/checkout'
 
-const checkout: CheckoutEndpoint['handlers']['checkout'] = async ({
+const submitCheckout: CheckoutEndpoint['handlers']['submitCheckout'] = async ({
   req,
   res,
   config,
@@ -48,7 +48,7 @@ export type CheckoutAPI = GetAPISchema<CommerceAPI, CheckoutSchema>
 
 export type CheckoutEndpoint = CheckoutAPI['endpoint']
 
-export const handlers: CheckoutEndpoint['handlers'] = { checkout }
+export const handlers: CheckoutEndpoint['handlers'] = { submitCheckout }
 
 const checkoutApi = createEndpoint<CheckoutAPI>({
   handler: checkoutEndpoint,
diff --git a/framework/vendure/api/endpoints/customer/address.ts b/framework/vendure/api/endpoints/customer/address.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/vendure/api/endpoints/customer/address.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/vendure/api/endpoints/customer/card.ts b/framework/vendure/api/endpoints/customer/card.ts
new file mode 100644
index 000000000..491bf0ac9
--- /dev/null
+++ b/framework/vendure/api/endpoints/customer/card.ts
@@ -0,0 +1 @@
+export default function noopApi(...args: any[]): void {}
diff --git a/framework/vendure/checkout/use-checkout.tsx b/framework/vendure/checkout/use-checkout.tsx
new file mode 100644
index 000000000..942f85b83
--- /dev/null
+++ b/framework/vendure/checkout/use-checkout.tsx
@@ -0,0 +1,14 @@
+import { SWRHook } from '@commerce/utils/types'
+import useCheckout, { UseCheckout } from '@commerce/checkout/use-checkout'
+
+export default useCheckout as UseCheckout<typeof handler>
+
+export const handler: SWRHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ useData }) =>
+    async (input) => ({}),
+}
diff --git a/framework/vendure/customer/address/use-add-item.tsx b/framework/vendure/customer/address/use-add-item.tsx
new file mode 100644
index 000000000..ac9dcd5cf
--- /dev/null
+++ b/framework/vendure/customer/address/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/address/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/vendure/customer/card/use-add-item.tsx b/framework/vendure/customer/card/use-add-item.tsx
new file mode 100644
index 000000000..7e3afa9c5
--- /dev/null
+++ b/framework/vendure/customer/card/use-add-item.tsx
@@ -0,0 +1,15 @@
+import useAddItem, { UseAddItem } from '@commerce/customer/card/use-add-item'
+import { MutationHook } from '@commerce/utils/types'
+
+export default useAddItem as UseAddItem<typeof handler>
+
+export const handler: MutationHook<any> = {
+  fetchOptions: {
+    query: '',
+  },
+  async fetcher({ input, options, fetch }) {},
+  useHook:
+    ({ fetch }) =>
+    () =>
+    async () => ({}),
+}
diff --git a/framework/vendure/fetcher.ts b/framework/vendure/fetcher.ts
index bf8f0dcd8..26e1eec28 100644
--- a/framework/vendure/fetcher.ts
+++ b/framework/vendure/fetcher.ts
@@ -41,11 +41,13 @@ export const fetcher: Fetcher = async ({
     headers,
     credentials: 'include',
   })
-
   if (res.ok) {
-    const { data } = await res.json()
+    const { data, errors } = await res.json()
+    if (errors) {
+      throw await new FetcherError({ status: res.status, errors })
+    }
     return data
   }
-
+  
   throw await getError(res)
 }
diff --git a/framework/vendure/index.tsx b/framework/vendure/index.tsx
index 47e60c7df..086940c54 100644
--- a/framework/vendure/index.tsx
+++ b/framework/vendure/index.tsx
@@ -1,33 +1,9 @@
-import * as React from 'react'
-import { ReactNode } from 'react'
-import {
-  CommerceConfig,
-  CommerceProvider as CoreCommerceProvider,
-  useCommerce as useCoreCommerce,
-} from '@commerce'
-import { vendureProvider } from './provider'
+import { getCommerceProvider, useCommerce as useCoreCommerce } from '@commerce'
+import { vendureProvider, VendureProvider } from './provider'
 
-export const vendureConfig: CommerceConfig = {
-  locale: 'en-us',
-  cartCookie: 'session',
-}
+export { vendureProvider }
+export type { VendureProvider }
 
-export type VendureConfig = Partial<CommerceConfig>
-
-export type VendureProps = {
-  children?: ReactNode
-  locale: string
-} & VendureConfig
-
-export function CommerceProvider({ children, ...config }: VendureProps) {
-  return (
-    <CoreCommerceProvider
-      provider={vendureProvider}
-      config={{ ...vendureConfig, ...config }}
-    >
-      {children}
-    </CoreCommerceProvider>
-  )
-}
+export const CommerceProvider = getCommerceProvider(vendureProvider)
 
 export const useCommerce = () => useCoreCommerce()
diff --git a/framework/vendure/provider.ts b/framework/vendure/provider.ts
index e100c277b..73f7dd5b2 100644
--- a/framework/vendure/provider.ts
+++ b/framework/vendure/provider.ts
@@ -1,4 +1,3 @@
-import { Provider } from '@commerce'
 import { handler as useCart } from './cart/use-cart'
 import { handler as useAddItem } from './cart/use-add-item'
 import { handler as useUpdateItem } from './cart/use-update-item'
@@ -10,7 +9,7 @@ import { handler as useLogout } from './auth/use-logout'
 import { handler as useSignup } from './auth/use-signup'
 import { fetcher } from './fetcher'
 
-export const vendureProvider: Provider = {
+export const vendureProvider = {
   locale: 'en-us',
   cartCookie: 'session',
   fetcher,
@@ -19,3 +18,5 @@ export const vendureProvider: Provider = {
   products: { useSearch },
   auth: { useLogin, useLogout, useSignup },
 }
+
+export type VendureProvider = typeof vendureProvider
diff --git a/pages/api/customer/address.ts b/pages/api/customer/address.ts
new file mode 100644
index 000000000..5815ea462
--- /dev/null
+++ b/pages/api/customer/address.ts
@@ -0,0 +1,4 @@
+import customerAddressApi from '@framework/api/endpoints/customer/address'
+import commerce from '@lib/api/commerce'
+
+export default customerAddressApi(commerce)
diff --git a/pages/api/customer/card.ts b/pages/api/customer/card.ts
new file mode 100644
index 000000000..6f88b8c74
--- /dev/null
+++ b/pages/api/customer/card.ts
@@ -0,0 +1,4 @@
+import customerCardApi from '@framework/api/endpoints/customer/card'
+import commerce from '@lib/api/commerce'
+
+export default customerCardApi(commerce)
diff --git a/pages/api/customer.ts b/pages/api/customer/index.ts
similarity index 100%
rename from pages/api/customer.ts
rename to pages/api/customer/index.ts
diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx
index fd28edff4..93f1c96d3 100644
--- a/pages/wishlist.tsx
+++ b/pages/wishlist.tsx
@@ -2,10 +2,11 @@ import type { GetStaticPropsContext } from 'next'
 import commerce from '@lib/api/commerce'
 import { Heart } from '@components/icons'
 import { Layout } from '@components/common'
-import { Text, Container } from '@components/ui'
+import { Text, Container, Skeleton } from '@components/ui'
 import { useCustomer } from '@framework/customer'
 import { WishlistCard } from '@components/wishlist'
 import useWishlist from '@framework/wishlist/use-wishlist'
+import rangeMap from '@lib/range-map'
 
 export async function getStaticProps({
   preview,
@@ -43,7 +44,15 @@ export default function Wishlist() {
       <div className="mt-3 mb-20">
         <Text variant="pageHeading">My Wishlist</Text>
         <div className="group flex flex-col">
-          {isLoading || isEmpty ? (
+          {isLoading ? (
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {rangeMap(12, (i) => (
+                <Skeleton key={i}>
+                  <div className="w-60 h-60" />
+                </Skeleton>
+              ))}
+            </div>
+          ) : isEmpty ? (
             <div className="flex-1 px-12 py-24 flex flex-col justify-center items-center ">
               <span className="border border-dashed border-secondary flex items-center justify-center w-16 h-16 bg-primary p-12 rounded-lg text-primary">
                 <Heart className="absolute" />
@@ -56,11 +65,13 @@ export default function Wishlist() {
               </p>
             </div>
           ) : (
-            data &&
-            // @ts-ignore Shopify - Fix this types
-            data.items?.map((item) => (
-              <WishlistCard key={item.id} product={item.product! as any} />
-            ))
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {data &&
+                // @ts-ignore Shopify - Fix this types
+                data.items?.map((item) => (
+                  <WishlistCard key={item.id} product={item.product! as any} />
+                ))}
+            </div>
           )}
         </div>
       </div>