# CartCheckoutButton

> Primary checkout CTA button for cart profiles. Navigates to Shopify checkout URL on click.

Canonical URL: https://fa7e86e3d553:3005/islands/cart/cart-checkout-button

> Primary checkout CTA button for cart profiles. Navigates to Shopify checkout URL on click.

The effective Cart V2 profile creates this module. The examples describe its
runtime contract; do not add it to storefront page source.

## Preview

**Category**: Commerce (Cart Profiles)

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| text | string | No | "Checkout" | Button label |
| style | "filled" \| "outline" | No | "filled" | Button style variant |
| secondaryCta | `{ label: string; url: string }` | No | - | Secondary link below button (e.g., "Continue Shopping") |
| showCartCount | boolean | No | false | Show item count badge |
| paymentProviders | string[] | No | `[]` | Provider logos or accessible text fallbacks |
| paymentPlacement | `"inside_checkout" \| "below_checkout"` | No | `"below_checkout"` | Payment-mark placement |

## Profile module example

```json
{
  "text": "Secure checkout",
  "style": "filled",
  "showCartCount": true,
  "paymentProviders": ["visa", "mastercard", "shop_pay"],
  "paymentPlacement": "below_checkout",
  "secondaryCta": {
    "label": "Continue shopping",
    "url": "/collections/all"
  }
}
```

## Events

| Event | Direction | Payload |
|-------|-----------|---------|
| - | - | None. Navigates directly to the checkout URL from cart state on click. |

## Tips

- Required inside [DrawerShell](/islands/cart/drawer-shell) for a valid cart-profile page
- Navigates to the `$checkoutUrl` from Shopify cart state (no custom URL needed)
- Button disables automatically when cart is empty
- `showCartCount` displays a badge like "Checkout (3)" with current item count
- Place as the last island inside DrawerShell for natural bottom positioning
- `secondaryCta` renders as a text link below the primary button

## Stylable Parts

| Part | Description |
|------|-------------|
| `root` | Outermost container |
| `cta` | Primary checkout button |
| `button`, `text` | Button surface and label |
| `secondary-cta` | Secondary CTA link |
| `payment-logos`, `icons-row` | Payment-provider group |
| `provider`, `provider-logo`, `provider-fallback` | Provider wrapper, image, or accessible fallback |

```css
/* Example: gradient CTA with rounded corners */
[data-lx-cart-profile] [data-part='cta'] {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 9999px;
  padding: 1rem 2rem;
  font-weight: 600;
}
```

## Related Islands

- [DrawerShell](/islands/cart/drawer-shell) -- Required parent container
- [CartLines](/islands/cart/cart-lines) -- Line items above the button
- [CartSummary](/islands/cart/cart-summary) -- Totals display above the button