# Add the JavaScript Library
source: https://developer.mastercard.com/mastercard-checkout-solutions/tutorial/integrate_apis/step2/index.md

## Step 2. Add the JavaScript Library {#step-2-add-the-javascript-library}

## Before You Start {#before-you-start}

Before you start integrating the JavaScript library, ensure you update your content security policy as per the following guidelines.
`Content-Security-Policy` is a layer of security implemented by browsers to detect and mitigate malicious attacks, including Cross-Site Scripting (XSS) and data injection attacks.

* Use the Content-Security-Policy HTTP header to specify your policy, like this:

    Content-Security-Policy: policy

For more information refer to: [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)

* Through the HTTP Content-Security-Policy response header, website administrators are able to control resources that a user is allowed to load for a given web page.   

* The server from which the resource is delivered, determines the policies that are applied to the given page.

## Adding the JS Library {#adding-the-js-library}

As an integrator, implement the JavaScript library into your application using one of these URLs (for either Sandbox or Production environments):

* The `mastercard.js` is provided as JavaScript code. Use a script tag in the `<head>` of the HTML page.

| Environment |                             Script tag containing the URL                             |                                                                                         Description                                                                                          |
|-------------|---------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Sandbox     | `<script src="https://sandbox.src.mastercard.com/sdk/srcsdk.mastercard.js"></script>` | Sandbox credentials available in Mastercard Connect are useful for testing the integration. Checkouts made in this environment are simulated and do not reflect your Production records.     |
| Production  | `<script src="https://src.mastercard.com/sdk/srcsdk.mastercard.js"></script> `        | Upon successful integration testing, you can then request for Production credentials. You can change your initialization to use Production environment to start accepting live transactions. |

* Host this page on a webserver. When a browser loads a page containing this JavaScript library and it calls the [init()](https://developer.mastercard.com/mastercard-checkout-solutions/documentation/sdk-reference/init/index.md) method, a hidden iFrame will be created with a `WindowRef` reference to ensure content is rendered to the correct window.