diff --git a/components/cart/CartSidebarView/CartSidebarView.tsx b/components/cart/CartSidebarView/CartSidebarView.tsx
index b63471c38..578e3b964 100644
--- a/components/cart/CartSidebarView/CartSidebarView.tsx
+++ b/components/cart/CartSidebarView/CartSidebarView.tsx
@@ -129,7 +129,7 @@ const CartSidebarView: FC = () => {
                 <span>{total}</span>
               </div>
             </div>
-            <Button width="100%" onClick={() => openCheckout()}>
+            <Button href="/checkout" Component="a" width="100%">
               Proceed to Checkout
             </Button>
           </div>
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 2348258df..46614bfa6 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -1,10 +1,9 @@
-import cn from 'classnames'
 import { NextSeo } from 'next-seo'
 import { FC, useState } from 'react'
 import s from './ProductView.module.css'
 import { Colors } from '@components/ui/types'
 import { useUI } from '@components/ui/context'
-import { Button, Container, LoadingDots } from '@components/ui'
+import { Button, Container } from '@components/ui'
 import { Swatch, ProductSlider } from '@components/product'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import type { Product } from '@lib/bigcommerce/api/operations/get-product'
diff --git a/components/ui/Button/Button.tsx b/components/ui/Button/Button.tsx
index c453aaf1d..92fe93eb3 100644
--- a/components/ui/Button/Button.tsx
+++ b/components/ui/Button/Button.tsx
@@ -9,6 +9,7 @@ import mergeRefs from 'react-merge-refs'
 import { useButton } from 'react-aria'
 import s from './Button.module.css'
 import { LoadingDots } from '@components/ui'
+
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   href?: string
   className?: string
@@ -25,7 +26,6 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
     className,
     variant = 'filled',
     children,
-    href,
     active,
     onClick,
     disabled,
@@ -57,7 +57,6 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
   return (
     <Component
       className={rootClassName}
-      href={href}
       aria-pressed={active}
       data-variant={variant}
       ref={mergeRefs([ref, buttonRef])}
diff --git a/lib/bigcommerce/api/checkout.ts b/lib/bigcommerce/api/checkout.ts
index 79405434f..cf9230c72 100644
--- a/lib/bigcommerce/api/checkout.ts
+++ b/lib/bigcommerce/api/checkout.ts
@@ -5,6 +5,7 @@ import createApiHandler, {
 import { BigcommerceApiError } from './utils/errors'
 
 const METHODS = ['GET']
+const fullCheckout = true
 
 // TODO: a complete implementation should have schema validation for `req.body`
 const checkoutApi: BigcommerceApiHandler<any> = async (req, res, config) => {
@@ -24,6 +25,13 @@ const checkoutApi: BigcommerceApiHandler<any> = async (req, res, config) => {
         method: 'POST',
       }
     )
+
+    if (fullCheckout) {
+      res.redirect(data.checkout_url)
+      return
+    }
+
+    // TODO: make the embedded checkout work too!
     const html = `
       <!DOCTYPE html>
         <html lang="en">
@@ -48,7 +56,7 @@ const checkoutApi: BigcommerceApiHandler<any> = async (req, res, config) => {
           <div id="checkout"></div>
         </body>
       </html>
-      `
+    `
 
     res.status(200)
     res.setHeader('Content-Type', 'text/html')
diff --git a/next.config.js b/next.config.js
index 980e7284d..b487800af 100644
--- a/next.config.js
+++ b/next.config.js
@@ -14,6 +14,10 @@ module.exports = {
         source: '/search/:category',
         destination: '/search',
       },
+      {
+        source: '/checkout',
+        destination: '/api/bigcommerce/checkout',
+      },
     ]
   },
 }
