Components

Drop-in web components that let your customers pay with Croissant directly from your site. One script tag, zero dependencies, fully customizable.

Live Preview (Sandbox)

Getting Started

Step 1: Add the Script

Include the Croissant Pay Components script on your checkout or product page. The script registers a custom element globally.

html

<!-- Latest version (recommended for development) -->
<script src="https://cdn.croissant.com/croissant-pay-components/latest/croissant-pay-components.js"></script>

<!-- Pin to a specific version (recommended for production) -->
<script src="https://cdn.croissant.com/croissant-pay-components/v1.0.0/croissant-pay-components.js"></script>

Tip

Use the latest path during development and pin to a specific version in production to avoid unexpected changes.

Step 2: Place the Component

Add the <croissant-pay-card> element where you want the Croissant Pay button to appear — typically near your other payment buttons (Apple Pay, PayPal, etc.).

html

<croissant-pay-card
  retailer-id="your-retailer-id"
  environment="sandbox">
</croissant-pay-card>

Step 3: Provide Cart Data

Before the customer can click the button, call setCartData() with the current checkout URL and line items. This data is sent to Croissant when the customer starts the pay flow.

javascript

const card = document.querySelector('croissant-pay-card');

card.setCartData({
  checkoutUrl: 'https://your-store.com/checkout/abc123',
  lineItems: [
    {
      retailerProductId: 'SKU-001',
      name: 'Leather Tote Bag',
      brand: 'Your Brand',
      quantity: 1,
      totalPrice: 29500,  // in cents ($295.00)
    },
  ],
});

Attributes

Attribute	Required	Description
`retailer-id`	Yes	Your unique merchant identifier provided by Croissant.
`environment`	No	Set to `"sandbox"` for testing. Defaults to production.

JavaScript API

Method	Description
`setCartData(data)`	Provides the checkout URL and line items for the current cart. Must be called before the customer clicks the pay button.

CartData

Property	Type	Description
`checkoutUrl`	string	URL of the customer's current checkout session. The customer is redirected here after completing the Croissant Pay flow.
`lineItems`	LineItem[]	Array of items in the cart.

LineItem

Property	Type	Description
`retailerProductId`	string	Your internal product ID or SKU.
`name`	string	Display name of the product.
`brand`	string	Brand name.
`quantity`	number	Quantity in cart.
`totalPrice`	number	Total price in cents (e.g., 29500 = $295.00).
`unitPrice`	number?	Optional per-unit price. Defaults to totalPrice / quantity.

Events

The component dispatches custom DOM events that bubble up. Use these for analytics and flow tracking.

Event	When	Detail
`croissant:cta-click`	Customer clicks the pay button	—
`croissant:info-open`	Info modal opens	—
`croissant:info-close`	Info modal closes	`{ method: "button" \| "overlay" \| "escape" }`

javascript

const card = document.querySelector('croissant-pay-card');

card.addEventListener('croissant:cta-click', () => {
  console.log('Customer started Croissant Pay flow');
  // Track in your analytics
});

card.addEventListener('croissant:info-close', (e) => {
  console.log('Info modal closed via:', e.detail.method);
});

Technical Details

Web Components — Uses Custom Elements v1 + Shadow DOM for encapsulation. Works in all modern browsers.
Zero dependencies — Single script, no frameworks required. Works with React, Vue, Svelte, vanilla JS, or any stack.
Style isolation — Shadow DOM prevents style leakage. Customize via CSS custom properties (see Styling).
Auto-configuration — The component fetches your merchant config from the Croissant CDN using the retailer-id. If your merchant is not live, the component hides itself.
Lightweight — Under 20 KB minified.

Next: Customize the look & feel →