To successfully enable embedded mode, you will need an HTML element on your page that will serve the container for the widget.
This HTML element needs the ventrata-embedded-widget attribute to activate the functionality.
Integrate Ventrata Checkout
To enabled embedded mode you need to add the <script> and <aside> tags to your page.
The
<script>tag loads the checkout configuration.The
<aside>tag specifies the widget's location and is where you add theproductIDto open the widget for a specific product.
Locate apiKey
In your Ventrata dashboard, go to Web Checkouts > Checkouts.
Select one of your existing checkouts.
Your apiKey is located on the Checkout Details tab of the selected checkout.
API Key
Add <script> tag
To integrate Ventrata checkout, add the below <script> tag to the HTML pages of your website.
Live
The script will load the configuration for your specific account with the production gateway, therefore all payments and orders will be recorded as if they were orders made by customers.
<script
src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js"
type="module"
data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "live", "embedded": true }'>
</script>
Test
The script will load the configuration for your specific account in a test environment.
<script
src="https://cdn.checkout.ventrata.com/v3/production/ventrata-checkout.min.js"
type="module"
data-config='{"apiKey":"<YOUR_API_TOKEN>", "env": "test", "embedded": true }'>
</script>
Attribute | Description |
| replace |
|
📗 TIP If the "env" attribute is not specified in the
|
| Allows the usage of embedded mode.
The page requires the presence of an HTML element with the |
Specify Widget Location and Size
To integrate the checkout in embedded mode, include a few additional lines of code where the widget will be displayed.
Add the Add the below
<aside>tag to the HTML of a page where the embedded widget will appear.Use the
classattribute to specify the widget'swidthandheight.Include the
ventrata-embedded-widgetanddata-configattributes within the<aside>tag.Inside the
data-configattribute, add"embedded": true.Specify product ID using
"productID" : "<product_ID>".
<aside
class="h-[50rem] w-[31.25rem]"
ventrata-embedded-widget
data-config='{"productID":"5789d12f-029c-42f3-80af-8223379d1816" }'
>
</aside>
📒 NOTE
Please note that the height and width values used in class="h-[50rem] w-[31.25rem]" may not be applicable for your web page. Please replace these values with ones that fit your web page.
📗 TIP
You can use the widget in both embedded and pop-up modes at the same time. For more details, read our FAQ article.