3.6 Embed Integration

You can embed the widget URL into any part of your web app with iFrame.

<iframe
	id="ycWidgetIframe"
	src="https://sandbox--payments-widget.netlify.app/landing/{yourApiKey}"
	title="Buy crypto with Yellow Card"
  	allow="camera https://sandbox--payments-widget.netlify.app;"
></iframe>

📘

Default widget tab

You can configure which widget tab to display when the widget loads, using a txType query parameter. Accepted values include buy, sell. If no txType query parameter is passed, the widget defaults to the buy tab.

📘

Embed security

You'll need to provide us with the URL to the web app / site where you'll be embedding the widget link so we can allow embed for that URL.

At the end of the flow, the widget will send a message to the embedding web app to signal successful transaction creation on the widget.

Your app can listen for this event with the name YCWidgetEndFlowEvent and respond to this event, for instance, by closing the widget and redirecting the user to a different view.

An example of this event is shown here

{
   "depositMade": true,
   "name": "YCWidgetEndFlowEvent",
   "depositAmount": 10000,
   "origin": "https://widget.yellowcard.io"
}

Here is a link to a demo site that shows how a partner app would embed the widget in an iframe and listen for the YCWidgetEndFlowEvent that is sent when the user has successfully created an order on the widget.
Embed widget in an iframe demo

You can also provide us with a url to redirect to at the end of the flow and once the user has created a transaction on the widget, the user will be redirected to the provided url.