Paypage Within an Iframe

you can embed the asperato payment template within an iframe on your existing website, instead of using it as a standalone page asperato supports this functionality, provided your website is served over tls 1 2 or newer requirements and recommendations whitelist your domain before embedding the iframe paypage in your live or test environment, you must contact the asperato team at support\@asperato com to whitelist your domain sizing ensure your \<iframe> element is appropriately sized to display the entire payment form without a scrollbar we recommend a minimum size of 500px width and 1000px height security the parent page hosting the iframe must be served over https (tls 1 2 or newer) so users can verify the security of the payment form, indicated by the browser's security indicators for the parent page non secure pages cannot host the asperato payment page in an iframe postmessage events when the template operates in iframe mode, it sends standard postmessage events to the parent page these events allow the parent page to react to different stages of the payment process the postmessage content is always a simple string the following table describes the postmessage events and their corresponding values text string description asp redir url sent when the payment process redirects to an external authorisation page, such as paypal the string value contains the url of the external page upon receiving this message, the parent page can close the iframe and open the url in a new tab or window asp exit screen sent when the payment success screen is loaded within the iframe asp error value message sent when the payment error screen is loaded within the iframe the string value contains the error message displayed to the user asp error screen sent when the payment error screen is loaded within the iframe asp error sent when the user clicks the close without retry button on the payment error screen asp complete sent when the user clicks the finish button on the payment success screen asp cancel sent when the user clicks the cancel link on the main payment page asp processing sent when the processing animation is displayed, indicating that the user has submitted the payment form and the payment is being processed asp pcdialog sent when the postcode lookup dialog is displayed asp dddialog sent when the direct debit confirmation dialog box is displayed this message allows the parent frame to refocus the iframe using window\ scrollto(0,0) asppagesizemessage sent when the payment page changes size allows the iframe to respond to sizing changes in the payment page content implementing a postmessage listener to handle these postmessage events, you need to implement a listener in the parent html page this listener allows you to execute specific actions based on the received messages for example, to close the iframe when the payment success screen is displayed, you can check for the asp exit screen text content in the postmessage body page size example to dynamically adjust the iframe size based on the payment page content convert the postmessage string ( asppagesizemessage ) to a json object using json parse() access the width and height values from the parsed json object to resize the iframe let size = json parse(asppagesizemessage); // to get the width value as an integer let width = parseint(size asppagesize width); // to get the height value, similarly use // let height = parseint(size asppagesize height); // example of using the size object to set iframe dimensions (assuming you have a function called 'showform') // showform(size asppagesize width, size asppagesize height);