How to Implement
Redirection-based payment methods, such as PayPal and iDEAL, cannot be framed in. The rationale is that
these payment methods are well-known and trusted consumer brands, which don't want to be framed in at
another customer-facing site. For Adyen as a business-to-business brand, this is much less an issue, if the right
security practices are followed.
The goal for the merchant is to keep maximising conversion, even with external payment pages. The following
section explains how more control over the payment flow is realised with external payment pages.
Using JQuery with External Payment Pages
JQuery (http://www.jquery.org) offers an easy way to obtain a little more control over the external pages of a
redirection-based payment method. This is done by replacingthe actions for submit buttons for redirection-
based payment methods. In the following example, we show how this can be done (this is code that you can
insert into your skin):
<script type="text/javascript">
$(".paySubmitpaypal, .idealButton, .paySubmitideal").click(function() {
var paymentWindowReference = window.open('', 'paymentWindow',
'location=no, toolbar=no, directories=no, resizable=yes, status=no,
menubar=no, scrollbars=yes, width=1100, height=652');
paymentWindowReference.focus();
$("#pageform").attr("target", "paymentWindow");
window.location.href = "https://www.merchanturl.com/adyen/extsite";
});
</script>
First, the function defines what happens if a customer clicks on of the buttons for PayPal or iDEAL. A new
window is opened called 'paymentWindow', which shall contain the redirection-based payment screens. This
window is stripped from toolbars and scrollbars.
This example shows furthermore how the target of the form pageform is set to our newly opened window.
This means that the PayPal or iDEAL banking page will be opened in the new window named
paymentWindow.
At the same time when opening this payment page, the contents of the iFrame are replaced by
/adyen/extsite which can hold a message like 'You have been redirected to an external payment site' and
possible further instructions.
In this case, the result url will also be displayed in the paymentWindow.
Dealing with 3D-Secure
If your account uses 3D Secure then you can change a setting in the Adyen backoffice to make sure that the 3D
Secure window is displayed in the iFrame. The setting to use is:
Skins > [skin code] > Skin Options > Use Inline frame for VbV and MSC 3-D Secure interaction
Turn this option on when using iFrames.
Please note that individual issuing banks might prevent their 3D-Secure pages from being framed in.
4 Copyright © Adyen B.V. 2011
