Embed Blink in an aggregator

Use the embedded presentation when Blink is one payment method inside your own widget. On desktop, Blink renders inline in an element you provide. On mobile, the same configuration opens Blink’s standard full-screen overlay. The embedded presentation uses the same signer, requestDeposit() request, errors, and result as the standard Deposit SDK integration. You only change how the hosted flow is presented and who owns the surrounding UI.

What the embedded presentation provides

Capability	Behavior
Inline desktop flow	Blink mounts a cross-origin iframe inside your container. It adds no backdrop, page scroll lock, dismissal chrome, card radius, or shadow.
Adaptive height	Blink measures each screen and resizes its iframe. The `resize` event lets your outer panel follow the same height.
Width guidance	Every `resize` event reports a 440px preferred width and a 320px minimum width. A compact panel can expand when Blink is selected.
Height budget	`embedMaxHeightPx` caps the iframe. Taller screens scroll inside Blink instead of growing your page indefinitely.
Brand appearance	Choose light, dark, or system theme and provide up to five brand colors. Blink derives the rest of its internal palette.
Warm startup	The SDK preloads a hidden flow by default. Pass `merchantId` to let Blink prefetch merchant configuration before your signer responds.
Mobile fallback	On phone-sized devices, Blink uses the standard overlay so wallet lists, QR codes, keypads, and passkey screens have enough room.

Integration responsibilities

Your widget owns	Blink owns
Panel width, outer height, radius, background, border, and shadow	The payment flow and its internal layout
Backdrop, focus trap, page scroll lock, Escape behavior, and your back or close button	Wallet connection, authentication, passkeys, and transfer completion
Showing the payment-method list before and after Blink	Resizing its iframe and reporting the size it needs
Calling the signer and handling the result	Communicating securely with the hosted flow

Follow Blink’s size

Add the embedded presentation fields to your standard Deposit configuration. Use the Deposit class so you can subscribe to its resize event.

const maxHeightPx = 640;
const panel = document.getElementById('payment-panel')!;
const panelBody = document.getElementById('blink-panel-body')!;
const slot = document.getElementById('blink-slot')!;

const deposit = new Deposit({
  signer: '/api/sign-payment',
  presentation: 'embedded',
  containerElement: slot,
  embedMaxHeightPx: maxHeightPx,
});

deposit.on('resize', ({ heightPx, preferredWidthPx, minWidthPx }) => {
  panelBody.style.height = `${Math.min(heightPx, maxHeightPx)}px`;

  if (preferredWidthPx !== undefined) {
    panel.style.width = `${preferredWidthPx}px`;
  }

  if (minWidthPx !== undefined && panel.getBoundingClientRect().width < minWidthPx) {
    console.warn(`Blink needs at least ${minWidthPx}px while active.`);
  }
});

The SDK automatically applies each reported height to the Blink iframe. embedMaxHeightPx defaults to 90% of the host viewport; pass an explicit value when your widget has a known height limit.

Apply heightPx without a CSS height transition. Blink animates its own height and reports every frame. A second height animation makes the outer panel lag behind the content. Width can transition because preferredWidthPx is a stable preference, not a live measurement.

Blink currently reports:

preferredWidthPx: 440
minWidthPx: 320
heightPx: the current rendered content height

The iframe fills the width you grant it and cannot widen your panel itself. Your panel may start narrower than 320px while Blink is not active, then expand to the reported preferred width when the resize event arrives. The active Blink flow must receive at least minWidthPx; otherwise fixed-width content can overflow. Make sure parent containers do not prevent the panel from expanding:

.payment-panel {
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  transition: width 160ms ease-out;
}

.blink-panel-body {
  overflow: hidden;
  /* Do not transition height. */
}

.blink-slot,
.blink-slot iframe {
  width: 100%;
}

Match your appearance

Your CSS controls the outer panel. Use appearance to theme the cross-origin Blink UI inside the iframe.

const deposit = new Deposit({
  signer: '/api/sign-payment',
  presentation: 'embedded',
  containerElement: slot,
  appearance: {
    theme: 'dark',
    variables: {
      colorPrimary: '#0f62fe',
      colorBackground: '#101828',
      colorText: '#f7f9fc',
      colorDanger: '#ff5c5c',
      colorBorder: '#22304a',
    },
  },
});

Variable	Controls
`colorPrimary`	Primary buttons, focus rings, and selected states
`colorBackground`	Blink’s internal card surface and light/dark palette basis
`colorText`	Body text and the derived muted text ramp
`colorDanger`	Error text and error surface tint
`colorBorder`	Hairline borders; derived from the background and text when omitted

Use opaque #rgb or #rrggbb values. Unsupported values are ignored and reported in the console. Blink derives the remaining palette and enforces contrast for derived text colors. The following remain fixed to preserve screen fit and payment-state meaning:

Fonts, type scale, weights, internal spacing, and control radii
Blink marks and wordmarks
Success, information, warning, and authorization colors

appearance is fixed for the life of a Deposit instance. To change it, destroy the instance and construct a new one. See the Deposit class, events, and TypeScript types for the full API.

Getting Started

Integration Guide

Embed Blink in an aggregator

What the embedded presentation provides

Integration responsibilities

Follow Blink’s size

Match your appearance

​What the embedded presentation provides

​Integration responsibilities

​Follow Blink’s size

​Match your appearance

What the embedded presentation provides

Integration responsibilities

Follow Blink’s size

Match your appearance