Implement a Modal Widget
How to implement a Modal Widget
In order to use this functionality, every integrator should execute only 2 steps:
- Add payengine.widget.min.js (get it here)
- Call initAsModal() function on PayEngineWidget object to display the payment form in modal view Here is snippet how your html could look like:
html - code snippet - example
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge">
Check out all mandatory and optional parameters in Modal Widget Reference.
Modal Widget 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 modal view
The ìnitAsModal key contains the information for initializing modal view with the payment from. Its always called on PayEngineWidget object.
Signature
initAsModal(publishableKey, orderId, optionalParameters, callback)
| Name | Mandatory | Type | Default Value | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| publishableKey | YES | string | N/A | The MerchantID given to every user on registration in Merchant Center (can be found in My Account section) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| orderId | YES | string | N/A | The ID of created order object | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| callback | 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. If paymentMethods is empty, null or undefined, all available payment methods for the widget are the ones, defined in order object. If paymentMethods is an array, it’s assumed that it’s a subset of payment methods array from the order object, so only defined by the integrator payment methods will be used. If there is inconsistency between the two arrays (e.g. integrator set more payment methods than defined in order object), error will be thrown. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.language | NO | string | “en” | The language used throughout the Widget. Available options are: en - English “de” - German | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.redirectUser | NO | Boolean | false | Decides if end customer redirect (e.g. by PayPal payment) is handled by the Widget or manually. If true the Widget handles all redirects. If false redirects are handled manually by the integrator. ! In this case you should use the redirect URL given by the resultCallback ! | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.colorTheme | NO | string | “light” | Basic UI appearance. Available options are: “light” “dark” | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.optionalFields.creditCard.cardHolder | NO | boolean | false | Is the Card Holder field mandatory for Credit Card. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| optionalParameters.optionalFields.sepa.accountHolder | NO | boolean | false | Is the Account Holder field mandatory for SEPA. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||