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

Add payengine.widget.min.js (get it here)
Call initAsInlineComponent() function on PayEngineWidget object to display the payment form
Handle Widget initialization result in initCallback

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 Inline 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 iframe

The initAsInlineComponent 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

initAsInlineComponent(container, publishableKey, transactionIntentId, 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)
orderId	YES	String	N/A	The ID of created order object
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. 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.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.
optionalParameters.hideTitleIcons	NO	Boolean	false	If true default widget Product icons will be hidden.
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.optionalFields	NO	ENUM	-	enum of optional fields, see below for the available options.
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.
optionalParameters.optionalFields.sepa.bic	NO	boolean	false	Is the BIC field mandatory for SEPA.
optionalParameters.optionalFields.sepa.bankName	NO	boolean	false	Is the Bank Name field mandatory for SEPA.
optionalParameters.optionalFields.ratepayDirectDebit.accountHolder	NO	boolean	false	Is the Account Holder field mandatory for Ratepay Direct Debit.
optionalParameters.optionalFields.ratepayDirectDebit.bic	NO	boolean	false	Is the BIC field mandatory for Ratepay Direct Debit.
optionalParameters.optionalFields.ratepayInstallment.accountHolder	NO	boolean	false	Is the Account Holder field mandatory for Ratepay Installment.
optionalParameters.optionalFields.ratepayInstallment.bic	NO	boolean	false	Is the BIC field mandatory for Ratepay Installment.
optionalParameters.deviceIdent	NO	boolean	false	Is Device Ident mandatory.
optionalParameters.paypalRecurringBillingAgreement	NO	boolean	false	Is Recurring Billing Agreement field mandatory for Paypal.
optionalParameters.skipFinalResultView	NO	boolean	false	Optional parameter for skipping Final Result. When set to true the widget will just return the callback to the integrator with the proper result without displaying the general success/failure view.

Available values for optionalFields

Field Name	Mandatory	Type	Default Value	Description
autoResizeHeight	NO	Boolean	false	If set to true, Widget inline resizes by adjusting its height automatically.

pay

paytriggers the transaction creation process. It's only relevant if the pay button of the widget is being hidden (please see initAsInlineComponent section.

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

Implement an Inline Widget

How to implement an Inline Widget

html - code snippet - example

Inline Widget Reference

Initialize iframe

Signature

Available values for optionalFields

pay

Signature

validate

Signature

addValidationListener

Signature

removeValidationListener

Signature

What was your feeling about it?