Embedded Checkout
Render a payment link checkout in-page with the Stream Embed SDK. Create a payment link via the API first, then pass the response url into paymentLink. Details on creating links (products, consumers, redirects): Creating a Payment Link.
Prerequisites
- Same setup as payment-link creation: API key pair, and at least one product ID. See Creating a Payment Link.
Example
1. Create a payment link
POST /api/v2/payment_links returns an object whose url field is what you embed (same value you would redirect to).
curl -s -X POST https://stream-app-service.streampay.sa/api/v2/payment_links \
-H "x-api-key: <your-base64-token>" \
-H "Content-Type: application/json" \
-d '{
"name": "Checkout",
"items": [{ "product_id": "your-product-uuid-here", "quantity": 1 }],
"contact_information_type": "PHONE",
"currency": "SAR",
"max_number_of_payments": 100
}'
Example response (trimmed):
{
"url": "https://streampay.sa/ds/..."
}
Use that url as paymentLink in the next step. Build the request body you need (customer-specific links, metadata, redirect URLs, subscriptions, etc.) using the guide and Create payment link.
2. Embed checkout
Load the default SDK, mount a container, call Stream.Checkout with the url from step 1. Inject the URL from your server—do not create payment links or expose API keys in frontend-only code.
<script src="https://stream-embed.streampay.sa/sdk/embed.min.js"></script>
<div id="stream-checkout"></div>
<script>
Stream.Checkout({
paymentLink: "https://streampay.sa/ds/XXXXXX", # the URL should be the created payment link URL
container: "#stream-checkout",
});
</script>
Options
| Option | Type | Required | Description |
|---|---|---|---|
paymentLink | string | Yes | Full payment-link URL from the API (url field) or short ID Stream accepts |
container | string | Element | Yes | CSS selector or DOM element for the iframe |
minHeightPx | number | No | Min iframe height (default 280) |
maxHeightPx | number | No | Max iframe height (default 920) |
vhCapPx | number | No | Viewport-relative height cap (default 800) |
vhFraction | number | No | Viewport fraction for fluid height (default 0.7) |
See also
- Webhooks — confirm payment server-side
- Public API reference