JavaScript
Encoding your data before processing
We recommend that you encode any data you receive from us before outputting it in any form like HTML, JavaScript, or in a URL. Output encoding ensures that malicious scripts or any other injected executable cannot be executed on your website.
ESAPI, the Open Web Application Security Project (OWASP) API, provides a free, open-source web application security control library that makes it easier to write lower-risk applications. Use this standard library to encode your output.
The following examples show how to encode data for some of the most common types of output:
- HTML:
String safe = ESAPI.encoder().encodeForHTML( request.getParameter( "input" ) ); - HTML attribute values such as width, name, or value:
String safe = ESAPI.encoder().encodeForHTMLAttribute( request.getParameter( "input" ) ); - URL Parameter values:
String safe = ESAPI.encoder().encodeForURL( request.getParameter( "input" ) ); - JavaScript data values:
String safe = ESAPI.encoder().encodeForJavaScript( request.getParameter( "input" ) );
Adding callback and widget.js code to your webpages
To properly render the embedded widgets on your site, you must provide a handler for the onAmazonLoginReady callback and add a reference to the Amazon Pay JavaScript file, Widgets.js to the source code for your webpage. You must do this from any webpage where you want to render Amazon Pay widgets.
As a best practice, we recommend placing the following code in the <head> section of your webpages that contain button, address, and wallet widgets. In addition, you should not make a local copy or modify the content of the Amazon-provided JavaScript. This can cause unintended consequences, like errors in the rendering or functionality of the widgets.
<head>
<script type='text/javascript'>
window.onAmazonLoginReady = function() {
amazon.Login.setClientId('YOUR_CLIENT_ID_HERE');
};
</script>
<script type='text/javascript'
src='https://static-eu.payments-amazon.com/OffAmazonPayments/eur/
sandbox/lpa/js/Widgets.js'>
</script>
</head>
Asynchronous JavaScript
Amazon Pay provides limited support for asynchronous loading of JavaScript to render webpages more quickly. If you elect to use asynchronous loading, the only method Amazon Pay supports is an async attribute in a script tag.
To load the Amazon Pay button asynchronously:
- In the header of the page, set your clientId in the onAmazonLoginReady callback.
- In the body of the page, place the LoginWithAmazon <div> element before the JavaScript that renders the button or widgets.
- Define a window.onAmazonPaymentsReady function. Move any JavaScript references to OffAmazonPayments into this function.
- Add the Widgets.js script tag, with the async attribute, below the window.onAmazonPaymentsReady function.
To prevent timing issues, the script tags need to be positioned in the order listed above.
The code sample below shows how to load the Amazon Pay button asynchronously:
<div id="PaymentsWidget"></div>
<script>
window.onAmazonLoginReady = function(){
amazon.Login.setClientId('YOUR_CLIENT_ID');
};
window.onAmazonPaymentsReady = function() {
// Render the button here.
};
</script>
<script async='async' type='text/javascript'
src='https://static-eu.payments-amazon.com/OffAmazonPayments/eur/
sandbox/lpa/js/Widgets.js'>
</script>
The example above is for the sandbox environment. When you move your code to production, be sure to change the URL accordingly.
Notes:
- The corresponding div elements have to be placed before the JavaScript to render the buttons or widgets. The buttons and widgets are rendered in the onAmazonPaymentsReady callback, which is called after the widgets.js has been loaded.
- Loading the widgets.js should occur only once, and it needs the async attribute in the <script> tag where the widgets.js is loaded.
For more information about the script tag async attribute, see the Mozilla Developer Network Script Tag Summary.