Implement Widget as a Bridge
How to implement Widget as a Bridge
In order to use this functionality, every integrator should execute only 3 steps:
- Add payengine.widget.min.js (get it here)
- Call initAsInlineComponentPi() function on PayEngineWidget object to display the payment form
- Handle Widget initialization result in initCallback
Please be aware that this integration option is meant to result in a payment instrument.
Check out all mandatory and optional parameters in Widget as a Bridge Reference.
Widget as a Bridge Reference
Here you can find all needed methods and respective parameters to further enrich your checkout workflow.
All methods should be called on PayEngineWidget object (e.g PayEngineWidget.desiredMethod(parameters)).
Initialize iframe
The initAsInlineComponentPi key contains the information for initializing the iframe with the payment form. Always called on PayEngineWidget object. It's meant to result in a transaction.
Signature
initAsInlineComponentPi(container, publishableKey, optionalParameters, resultCallback)
| Name | Mandatory | Type | Default Value | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| container | YES | String or DOM Element | N/A | The id of container html element or DOM Element, where iframe with payment form/s will be rendered | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| publishableKey | YES | String | N/A | The MerchantID given to every user on registration in Merchant Center (can be found in My Account section) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.initCallback | YES | Function | N/A | Function with following signature - callback (error, result) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| resultCallback | YES | Function | N/A | Function with following signature - callback (error, result) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.products | NO | Array | inherited from order object | Array with all supported payment methods. For this integration option as it is meant to result in a payment instrument only Credit Card and SEPA are supported. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.layout | NO | String | “dropdown” | The layout used for displaying different payment forms. Available options are: dropdown - dropdown with all available payments methods, which shows only one payment form (for the selected payment method) “full-list” - all payment forms for all available payment methods are shown one after another in same view | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.language | NO | String | “en” | The language used throughout the Widget. Available options are: en - English “de” - German | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.customStyleId | NO | String | N/A | Appy custom UI appearance. Custom styles can be defined in the section Styling in the Merchant Center. Every custom style gets unique ID, which should be placeа as value for customStyleId parameter. Found out how it works here (link to Styling) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.hidePayButton | NO | Boolean | false | Only available for dropdown or fulllist with only one payment method. If true default widget pay button will be hidden. ! In this case you should implement your own pay button. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
pay
paytriggers the payment instrument creation process. It will only be relevant if the pay button of the widget is being hidden (please see initAsInlineComponentPi)
Signature
pay(widgetReference)
| Name | Mandatory | Type | Default Value | Description |
|---|---|---|---|---|
| widgetReference | YES | Object | N/A | Reference to the Widget inline component, which is being targeted. It's received on the initCallback as result |
validate
This function will return validation result on the callback provided.
Signature
validate(widgetReference, callback)
| Name | Mandatory | Type | Default Value | Description |
|---|---|---|---|---|
| widgetReference | YES | Object | N/A | Reference to the Widget inline component, which is being targeted. It's received on the initCallback as result |
| callback | YES | Function | N/A | Function with following signature - callback (error, result) |
addValidationListener
Registers validation listener for a certain widget inline component instance.
Signature
addValidationListener(widgetReference, listener)
| Name | Mandatory | Type | Default Value | Description |
|---|---|---|---|---|
| widgetReference | YES | Object | N/A | Reference to the Widget inline component, which is being targeted. It's received on the initCallback as result |
| listener | YES | Function | N/A | As a listener it takes only one parameter, which will be the result of the validation. The function will be triggered each time the widget validates the payment form fields. |
removeValidationListener
Removes validation listener for a certain widget inline component instance.
Signature
removeValidationListener(widgetReference, listener)
| Name | Mandatory | Type | Default Value | Description |
|---|---|---|---|---|
| widgetReference | YES | Object | N/A | Reference to the Widget inline component, which is being targeted. It's received on the initCallback as result |
| listener | YES | Function | N/A | Previously added validation listener |