Using Checkout components within your web page or web app
Getting Started
All Embr components are included from our embeddables library. Before you can start embedding Checkout and other widgets, first include the following snippet in your website's <head> tag.
You can also try out embeddables on any site right now, using your browser console and this inject script. Just copy the script into your console and hit enter/return.
Now that the Embr library is included on your site, it's time to start embedding components on your site. To embed one of these components, just call the EMBR.mount function with a component configuration
There are already a number of components included in the library, each with different options for including within your site. Learn more about components.​
Each component config includes a type attribute and an options object, to configure the specific settings.
Library functions
EMBR.mount(config)
Mounts a component to the page using a valid configuration. This method returns a reference to the mounted component, that can be used for interacting with it later. Each component reference will include the config type and options as well as a unique id for that instance of the component.
const componentOne =EMBR.mount({
type:'CheckoutLaunchButton',
options:{
checkoutId:'XXXXXX',
}
})
/*
{
id: "dc65c06c-ba2c-4d6a-af8e-0de1aef23a6d"
options: {checkoutId: 'XXXXXX'}
type: "CheckoutLaunchButton"
}
*/
EMBR.mount also accepts an array of config objects, to mount multiple components at the same time e.g. EMBR.mount([{...}, {...}])
EMBR.unmount(id)
Removes a single Embr component by ID. This will remove the component from the page immediately.
EMBR.unmount('XXXXXX')
EMBR.unmount also accepts an array of config objects, to mount multiple components at the same time e.g. EMBR.unmount(['xxx', 'yyy'])
EMBR.unmountAll()
Immediately removes all EMBR components from the page.
EMBR.unmountAll()
EMBR.get(ref)
Will retrieve a component instance by id or by type.When getting by type, the first component of that type will be returned.
EMBR.get('xxx')// Where xxx is instance ID
// OR
EMBR.get('CheckoutLaunchButton')
The returned reference may also include any methods available from that component. For example, the CheckoutLaunchButton provides methods to open, close and toggle the popup from JS.