# Add the SDK
source: https://developer.mastercard.com/mastercard-checkout-solutions/tutorial/integrate_sdk/step1/index.md

## Step 1. Add the SDK {#step-1-add-the-sdk}

As an integrator, implement the SDK into your application using one of these URLs (for either sandbox or production environments).

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 SDK initialization to use production environment to start accepting live transactions. |

The JavaScript SDK will cause the checkout UI to be presented to the user via a hidden iFrame.

Host this checkout page on a webserver. Ensure that after a consumer loads it into a browser, the SDK adds an inline frame (iFrame) to page which is used to communicate with the Mastercard APIs from a secure context.

The SDK controls the seamless operation of the iFrame and communicates with it via `postMessage`. The [SDK methods](https://developer.mastercard.com/mastercard-checkout-solutions/documentation/sdk-reference/index.md) will be available to the `window.SRCSDK_MASTERCARD` object.

For the context on these SDK methods and how to orchestrate them into a sequence of calls refer to the sequence diagrams in [Use-Cases](https://developer.mastercard.com/mastercard-checkout-solutions/documentation/use-cases/click-to-pay/index.md).