Integrating into the Dynamic Api using the Widget
The dynamic widget is a pure client side solution allowing members to integrate with Protect Group using the Dynamic Api.
The idea behind it is to place our refundable content on your site, and provide actions that will call our api on your behalf in just a few lines of javascript.
Installation & Initialization
This is the installation of the widget.
Just copy and paste this at the bottom of your master layout page if you have one, or at the bottom of each page that needs to use it, if you don't have one.
It should be placed just before the closing </body> tag, within a <script> tag.
This is the initialization of the widget. It should be placed direcly below the installation script inside the same <script> tag.
Please ensure you update the vendorCode value to the one provided to you for the test/prod environments.
When you are ready to move to production, you should remove the environment and debug properties. They are defaulted to production values so you only need them when testing
Important!
Calling any action on the widget will not work until your test/production domains have been configured to access to our api. This is a security measure designed to replace not providing your api keys, like you would when calling our api from your backend code.
When you are ready to integrate the widget we will configure your domain to allow access. Please contact your Commercial Manager, providing your test and production domains.
Content Placement
Once the widget has been installed and initialized, you simply need to add a <div> element to your page with an id of 'pgr-payment-container'. The widget will then place the refundable content inside that element.
Note. This content will only be displayed when an initial call to the 'updateQuoteData' action. See the Actions tab for more information
Init Properties
Below is a description of each property in the widget init action
Actions
Actions allow you to interact with the widget at runtime in just a few lines of javascript
Events
The widget fires events when it is initialized and when any of it's internal state changes.
Demo
This demo file contains basic exampes of how the widget is installed and initialized, and how actions are fired. Feel free to download it and try it out, once you have your test vendor code created by our Commercal Team.
Action Not Available
You see an error in the console that the [actionYouCalled] is not available
Cause: You are calling an action on the widget before the widget has finished it's initialization
This can happen if you attempt to call an action immediately after calling init, in the same script block
Fix: Wrap the action call inside the PgWidgetLoaded event