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

# Checkout Elements Overview

> Embed checkout experiences directly in your website or redirect customers to hosted checkout pages.

Checkout Elements allow you to integrate Fungies checkout into your website in two ways:

1. **Embedded Checkout** - Display the checkout directly within your page using an iframe
2. **Hosted Checkout** - Redirect customers to a Fungies-hosted checkout page

Both methods support prefilling customer billing data to streamline the checkout experience.

## Integration Methods

### JavaScript SDK (Embedded)

Use the Fungies JavaScript SDK to embed checkout directly in your website:

```javascript theme={null}
import { Fungies } from "@fungies/fungies-js";

Fungies.Initialize();

Fungies.Checkout.open({
  checkoutUrl: "https://yourstore.fungies.io/checkout-element/your-checkout-id",
  settings: {
    mode: "embed", // or "overlay"
    frameTarget: "checkout-container" // DOM element ID for embed mode
  },
  billingData: {
    email: "customer@example.com",
    firstName: "John",
    lastName: "Doe",
    country: "US",
    state: "CA",
    city: "Los Angeles",
    zipCode: "90001"
  }
});
```

### HTML Data Attributes (Embedded)

For simpler integrations, use HTML data attributes:

```html theme={null}
<button
  data-fungies-checkout-url="https://yourstore.fungies.io/checkout-element/your-checkout-id"
  data-fungies-mode="overlay"
  data-fungies-billing-email="customer@example.com"
  data-fungies-billing-first-name="John"
  data-fungies-billing-country="US">
  Buy Now
</button>

<script
  src="https://cdn.jsdelivr.net/npm/@fungies/fungies-js@latest"
  defer
  data-auto-init>
</script>
```

### Query Parameters (Hosted Checkout)

For hosted checkout pages, pass customer data via URL query parameters:

```
https://yourstore.fungies.io/checkout/offer-id?fngs-customer-email=customer@example.com&fngs-customer-first-name=John&fngs-customer-country=US
```

## When to Use Each Method

| Method               | Best For                                                |
| -------------------- | ------------------------------------------------------- |
| **SDK (Embed)**      | Single-page apps, custom UX, keeping users on your site |
| **SDK (Overlay)**    | Quick integration, modal checkout experience            |
| **HTML Attributes**  | Static sites, no-code solutions                         |
| **Query Parameters** | Email campaigns, external links, redirects              |

## Next Steps

<CardGroup cols={2}>
  <Card title="SDK Reference" icon="code" href="/developers/checkout-elements/sdk">
    Complete SDK options and methods
  </Card>

  <Card title="Billing Data" icon="user" href="/developers/checkout-elements/billing-data">
    All available billing prefill fields
  </Card>
</CardGroup>