Skip to main content
openbridge.cart.checkout()
openbridge.cart.checkout({ redirectTo: 'https://your-site.com/cart' })
Redirects the user to Shopify’s hosted checkout page.

​
Parameters

ParameterTypeDescription
optionsobjectOptional configuration
options.redirectTostringCustom 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
This method redirects the browser. Any code after checkout() will not execute.

​
Examples

​
Checkout button

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

​
Checkout with validation

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

// 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

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

​
Checkout with confirmation

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

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
After checkout completion, Shopify will redirect the user based on your store’s settings (typically to an order confirmation page).