> ## Documentation Index
> Fetch the complete documentation index at: https://docs.openbridge.shop/llms.txt
> Use this file to discover all available pages before exploring further.

# .checkout()

> Redirect to Shopify checkout

```javascript theme={null}
openbridge.cart.checkout()
openbridge.cart.checkout({ redirectTo: 'https://your-site.com/cart' })
```

Redirects the user to Shopify's hosted checkout page.

## Parameters

| Parameter            | Type     | Description                                                                                                                                            |
| -------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `options`            | `object` | Optional configuration                                                                                                                                 |
| `options.redirectTo` | `string` | Custom URL for the cancel/back button in checkout. Use this to redirect users back to your custom storefront instead of the default Shopify store URL. |

## Returns

`void`

<Warning>
  This method redirects the browser. Any code after `checkout()` will not
  execute.
</Warning>

## Examples

### Checkout button

```javascript theme={null}
document.querySelector('.checkout-button').addEventListener('click', () => {
    openbridge.cart.checkout()
})
```

### Checkout with validation

```javascript theme={null}
document.querySelector('.checkout-button').addEventListener('click', () => {
    if (openbridge.cart.count() === 0) {
        alert('Your cart is empty!')
        return
    }

    openbridge.cart.checkout()
})
```

### Checkout with custom return URL

```javascript theme={null}
// Redirect back to your custom storefront on cancel
document.querySelector('.checkout-button').addEventListener('click', () => {
    openbridge.cart.checkout({
        redirectTo: 'https://your-webflow-site.com/cart'
    })
})
```

### Checkout with dynamic return URL

```javascript theme={null}
// Return to the current page on cancel
document.querySelector('.checkout-button').addEventListener('click', () => {
    openbridge.cart.checkout({
        redirectTo: window.location.href
    })
})
```

### Checkout with confirmation

```javascript theme={null}
function proceedToCheckout() {
    const count = openbridge.cart.count()
    const cart = openbridge.cart.get()

    if (
        confirm(
            `Proceed to checkout with ${count} items (${cart.cost.totalAmount.currencyCode} ${cart.cost.totalAmount.amount})?`
        )
    ) {
        openbridge.cart.checkout()
    }
}
```

### Disable button if cart empty

```javascript theme={null}
openbridge.cart.subscribe((cart) => {
    const button = document.querySelector('.checkout-button')
    button.disabled = !cart || cart.totalQuantity === 0
})
```

## Behavior

1. Gets the checkout URL from the current cart
2. Redirects the browser using `window.location.href`
3. User completes checkout on Shopify's hosted page

<Note>
  After checkout completion, Shopify will redirect the user based on your
  store's settings (typically to an order confirmation page).
</Note>