Clearway Elements

Clearway Elements let you embed product cards and subscription modals on any website while keeping your API key on the server.

Requirements

1. A Widget / Checkout API key on your server only
2. A checkout proxy route (same URL for checkout and embed display)
3. Origin allowlist on your widget API key
4. Scripts: /widget/v1/widget.js and /elements/v1/elements.js

Single proxy, two intents

Your proxy forwards JSON to GCF:

• { "intent": "checkout", ... } — creates checkout sessions (existing widget flow)
• { "intent": "embed_display", "catalogProductId": "..." } — resolves signed display payloads for cards

Product card

Code
<script src="https://app-dev.clearway.to/widget/v1/widget.js" defer></script>
<script src="https://app-dev.clearway.to/elements/v1/elements.js" defer></script>
<link rel="stylesheet" href="https://app-dev.clearway.to/elements/v1/elements.css" />

<clearway-product-card catalog-product-id="prod_..." theme="minimal"></clearway-product-card>

<script defer>
  ClearwayWidget.init({ checkoutProxyUrl: '/api/your-store/clearway/checkout' });
  ClearwayElements.init({ checkoutProxyUrl: '/api/your-store/clearway/checkout' });
</script>

Subscription modal

Code
ClearwayElements.openSubscriptionModal({ planGroupId: 'pg_...' });

The cadence picker destroys itself before opening the Clearway checkout modal (STE handoff).

CSP

• script-src: your dashboard/asset Clearway host
• connect-src: your merchant proxy origin
• frame-src: pay-dev.clearway.to or your custom checkout domain

Dashboard

Configure snippets under Integrations → Elements.