Skip to content

    Implement a Modal Widget

    How to implement a Modal Widget

    In order to use this functionality, every integrator should execute only 2 steps:

    1. Add payengine.widget.min.js (get it here)
    2. 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>
      <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.


    initAsModal(publishableKey, orderId, optionalParameters, callback)

    NameMandatoryTypeDefault ValueDescription
    publishableKeyYESstringN/AThe MerchantID given to every user on registration in Merchant Center (can be found in My Account section)
    orderIdYESstringN/AThe ID of created order object
    callbackYESfunctionN/AFunction with following signature - callback (error, result)
    optionalParameters.productsNOArrayinherited from order objectArray 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.languageNOstring“en”The language used throughout the Widget. Available options are: en - English “de” - German
    optionalParameters.redirectUserNOBooleanfalseDecides 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.colorThemeNOstring“light”Basic UI appearance. Available options are: “light” “dark”
    optionalParameters.optionalFields.creditCard.cardHolderNObooleanfalseIs the Card Holder field mandatory for Credit Card.
    optionalParameters.optionalFields.sepa.accountHolderNObooleanfalseIs the Account Holder field mandatory for SEPA.

    Was this helpful?

    What was your feeling about it?