Light
Dark
Bluey
Primary
#241d1c
Secondary Color
#ffffff
Primary Text
#141519
Secondary Text
#6b6f80
Container
#ffffff
Card
#f6f7f9
Primary Button Text
#ffffff
Element Border
0.5 remWidget Border
1 rem<iframe src="https://buy.onramper.com?themeName=light" title="Onramper Widget" height="630px" width="420px" allow="accelerometer; autoplay; camera; gyroscope; payment; microphone" />
<iframe src="https://buy.onramper.com?themeName=light&containerColor=ffffff&primaryColor=241d1c&secondaryColor=ffffff&cardColor=f6f7f9&primaryTextColor=141519&secondaryTextColor=6b6f80&primaryBtnTextColor=ffffff&borderRadius=0.5&wgBorderRadius=1" title="Onramper Widget" height="630px" width="420px" allow="accelerometer; autoplay; camera; gyroscope; payment; microphone" />
Mobile users can also post messages to/from webviews. This will change the properties of the widget without having to reload the iframe.
const iframeRef = useRef<HTMLIFrameElement>(null);
const iframe = iframeRef.current; if (iframe) { iframe.contentWindow.postMessage({ type: "change-theme", id: "change-theme", theme: { primaryColor: '#241d1c', secondaryColor: '#ffffff' primaryTextColor: '#141519', secondaryTextColor: '#6b6f80', containerColor: '#ffffff', cardColor: '#f6f7f9', primaryBtnTextColor: '#ffffff', borderRadius: '0.5rem', widgetBorderRadius: '1rem', }, }, "*"); }