Styling a floating payment window

For information about loading the payment page in an iframe, see Loading the payment page dynamically.

The URL for the floating window is returned from the createPayment Request method, in the DynamicJavascriptUrl element.

Example of the floating window script tag

<script type="text/javascript" src="https://gateway.altapaysecure.com/eCommerce/API/embeddedPaymentWindow?pid=2349494a-6adf-49f7-8096-2125a969e104"></script>

The dynamic javascript tag creates two elements on your page, at the end of the body tag:

A div element,
```
<div class="PensioEmbeddedPaymentWindowBackground"></div>
```
element that takes fills the browser window. You can use it to gray the page.

A iframe element, containing the payment window:

<iframe class="PensioEmbeddedPaymentWindow"></iframe>

To change the styling of these elements, use the !important rule, for example, like this:

.PensioEmbeddedPaymentWindowBackground
{
	background-color: rgba(255,0,0,0.35) !important;
}

Styling the payment page

To make the payment page appear floating on top of the checkout page, the payment page needs a transparent background, and have a width, height, and location to match where you want the floating window to appear.

You can add a "close button", by adding an element with the CSS class CustomAltaPayCloseButton. AltaPay attaches a javascript event handler on that element - letting your customer close the window by clicking that element.

Here is an example of how you can set up the HTML and CSS for a floating payment page:

<body>
	<div class="MyFormContainer">
		<div class="CustomAltaPayCloseButton">Close</div>
		<form id="PensioPaymentForm" >
			All content here will be replaced by the actual payment form
		</form>
	</div>
</body>

.MyFormContainer
{
	width:500px;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	background-color:white;
	border:1px solid black;
	padding:10px;
	position:relative;
}
.CustomAltaPayCloseButton
{
	position:absolute;
	right:0px;
	top:0px;
	background-color:red;
}