# Using the Web SDK via CDN
source: https://developer.mastercard.com/open-finance-au/documentation/connect/integrating-with-connect/web-sdk/web-sdk-cdn/index.md

This page explains what need to know about implementing our Connect Web SDK in your web application using our CDN (Content Delivery Network, a system of distributed servers that delivers web content to users based on their geographic location).

Using the CDN method means you don't need to install the SDK via a package manager (npm).

The advantages of this are:

* You will not need to manage dependencies and build processes as this will be done for you - the CDN will host up to date versions of the SDK with all the necessary dependencies.

* No package manager access issues - in some cases your development processes may mean that access to npm is restricted which could slow down integration.

* Reduced load times - your application won't need to install the SDK, which if done at run-time could affect the application performance.

## CDN URL Structure {#cdn-url-structure}

Our CDN URLs follow this pattern:

`https://cdn.openbanking.mastercard.com/js/connect-web-sdk@{version}/mastercard-connect-esm.min.js`

We use semantic versioning (semver) for our releases. This means the {version} number follows a pattern of MAJOR.MINOR.PATCH (e.g., 2.1.0), where:

* MAJOR: Changed when we make incompatible API changes
* MINOR: Added when we introduce new features in a backward-compatible manner
* PATCH: Increased when we make backward-compatible bug fixes

Tip: CDN distribution of the SDK is only available from version 2.1.0 onwards. We recommend using 2.2.0 or later.

## Understanding Our Build Types {#understanding-our-build-types}

When you look at our CDN, you'll notice different files with names like `mastercard-connect-esm.min.js` or `mastercard-connect-umd.min.js`. Each build type is minified (compressed) for faster loading.

Let's understand what these different files are and when to use them.

### Our Build Types {#our-build-types}

We provide three different types of builds, each serving a specific purpose:

1. ESM (ECMAScript Modules)
2. UMD (Universal Module Definition)
3. IIFE (Immediately Invoked Function Expression)

#### How to Choose the Right Build {#how-to-choose-the-right-build}

1. For modern web applications:
   * Use the ESM build (`mastercard-connect-esm.min.js`)
   * Benefits: Better tree-shaking, clearer dependency management
2. For maximum compatibility:
   * Use the UMD build (`mastercard-connect-umd.min.js`)
   * Benefits: Works everywhere, fallback support
3. For direct browser usage without build tools:
   * Use the IIFE build (`mastercard-connect-iife.min.js`)
   * Benefits: Simplest to integrate, no module system needed

## Implementation Guides {#implementation-guides}

Click the tabs below based on whichever build you want to implement/integrate in your app.

### What is ESM? {#what-is-esm}

ESM represents the modern approach to JavaScript modules. ESM lets you write code in separate files (modules) that can be combined when needed. Each module can contain variables, functions, or classes that can be shared with other parts of your application.

### Why Use ESM? {#why-use-esm}

ESM offers several compelling advantages that make it the preferred choice for modern web development:

1. Native Browser Support - Modern browsers understand ESM naturally, without needing extra tools.
2. Better Code Organization - ESM lets you split your code into smaller, focused files.
3. Tree Shaking - This is a special feature where the browser only loads the code you actually use. Imagine packing for a trip; instead of taking your entire wardrobe, you only pack what you'll wear. This makes your application faster and more efficient.
4. Clear Dependencies

### Implementation {#implementation}

The CDN URL for the ESM build is as follows:

`https://cdn.openbanking.mastercard.com/js/connect-web-sdk@2.2.0/mastercard-connect-esm.min.js`

You need to add the SDK to your HTML file. With ESM, there are two ways to do this:

* Directly import the SDK from the CDN into your HTML
* Create a separate JavaScript file which imports the SDK from the CDN, then import that file in your HTML

#### Method 1: Using type="module" in HTML (Recommended) {#method-1-using-typemodule-in-html-recommended}

```html
<!DOCTYPE html>
<html>
<head>
  <title>Your Application</title>
</head>
<body>
  <!-- Your other HTML content -->

  <script type="module">
    // Import the Connect object from our CDN
    import { Connect } from
      'https://cdn.openbanking.mastercard.com/js/connect-web-sdk@2.2.0/mastercard-connect-esm.min.js';

    // Now you can use Connect here
    const eventHandlers = {
      onDone: (event) => {
        console.log('Connection successful!', event);
      },
      onCancel: (event) => {
        console.log('User cancelled', event);
      },
      onError: (event) => {
        console.log('Error occurred', event);
      }
    };

    // Function to initialize Connect
    function startConnect() {
      Connect.launch(
        'YOUR_CONNECT_URL',  // Replace with your actual Connect URL eventHandlers,
        { popup: true }      // This will open in a popup window
      );
    }

    // Make the function available globally
    window.startConnect = startConnect;
  </script>
</body>
</html>
```

#### Method 2: Using a Separate JavaScript File {#method-2-using-a-separate-javascript-file}

First, create a file named `connect-integration.js`:

```JavaScript
// connect-integration.js
import { Connect } from
  'https://cdn.openbanking.mastercard.com/js/connect-web-sdk@2.2.0/mastercard-connect-esm.min.js';

// Define your event handlers
const eventHandlers = {
  onDone: (event) => {
    // This function is called when the connection is successful
    console.log('Connection successful!');
  },
  onCancel: (event) => {
    // This function is called if the user cancels the process
    console.log('User cancelled');
  },
  onError: (event) => {
    // This function is called if an error occurs
    console.log('Error occurred');
  }
};

// Function to launch Connect
export function launchConnect() {
  Connect.launch(
    'YOUR_CONNECT_URL',
    eventHandlers,
    {
      popup: true,
      popupOptions: {
        width: 520,  // Width in pixels
        height: 720  // Height in pixels
      }
    }
  );
}
```

Then in your HTML, import your `connect-integration.js` file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Your Application</title>
</head>
<body>
    <!-- Your other HTML content -->

    <!-- Add a button to launch Connect -->
    <button onclick="startConnect()">Launch Connect</button>

    <script type="module">
        // Import your integration file
        import { launchConnect } from './connect-integration.js';

        // Make it available globally
        window.startConnect = launchConnect;
    </script>
</body>
</html>
```

### What is UMD? {#what-is-umd}

Universal Module Definition (UMD) is like a universal translator for JavaScript modules. Think of it as a smart package that can automatically adapt to different environments - whether you're using it in a browser, with Node.js, or with module bundlers like Webpack. It's the "one size fits all" solution in the JavaScript world.

### Why Use UMD? {#why-use-umd}

The UMD build is perfect when:

* You're not sure about the environment where your code will run
* You need maximum compatibility across different systems
* You want one solution that works everywhere
* You're working with older systems or mixed environments

### Implementation {#implementation}

The CDN URL for the UMD build is as follows:

`https://cdn.openbanking.mastercard.com/js/connect-web-sdk@2.2.0/mastercard-connect-umd.min.js`

The following basic integration example shows how you can load the SDK in your code.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Connect SDK - UMD Example</title>
</head>
<body>
    <!-- Your HTML content -->

    <!-- Load the UMD build -->
    <script src="https://cdn.openbanking.mastercard.com/js/connect-web-sdk@2.2.0/mastercard-connect-umd.min.js"></script>

    <script>
        // The Connect object is available globally
        const eventHandlers = {
            onDone: (event) => {
                console.log('Success!', event);
            },
            onCancel: (event) => {
                console.log('Cancelled', event);
            },
            onError: (event) => {
                console.log('Error:', event);
            }
        };

        // Function to start the connection
        function startConnect() {
            window.Connect.launch(
                'YOUR_CONNECT_URL',
                eventHandlers,
                { popup: true }
            );
        }
    </script>

    <button onclick="startConnect()">Connect Account</button>
</body>
</html>
```

### What is IIFE? {#what-is-iife}

IIFE (Immediately Invoked Function Expression) is like a self-contained package that runs as soon as it's loaded. Think of it as a ready-to-use box that immediately puts everything you need into the global scope. It's the simplest way to add our SDK to a webpage with no extra setup required.

### Why Use IIFE? {#why-use-iife}

The IIFE build is best when:

* You want the simplest possible integration
* You're not using any module bundlers or build tools
* You want to add the SDK directly to an HTML page
* You're working on a simple website without complex build processes

#### Implementation {#implementation}

The CDN URL for the IIFE build is as follows:

`https://cdn.openbanking.mastercard.com/js/connect-web-sdk@2.2.0/mastercard-connect-iife.min.js`

The following basic integration example shows how you can load the SDK in your code.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Connect SDK - IIFE Example</title>
</head>
<body>
    <!-- Load the IIFE build -->
    <script src="https://cdn.openbanking.mastercard.com/js/connect-web-sdk@2.2.0/mastercard-connect-iife.min.js"></script>

    <script>
        // Connect is immediately available as a global object
        function launchConnect() {
            window.Connect.launch(
                'YOUR_CONNECT_URL',
                {
                    onDone: (event) => {
                        alert('Connection successful!');
                    },
                    onCancel: (event) => {
                        alert('Connection cancelled');
                    },
                    onError: (event) => {
                        alert('Error occurred');
                    }
                },
                { popup: true }
            );
        }
    </script>

    <button onclick="launchConnect()">Launch Connect</button>
</body>
</html>
```

## Security Best Practices {#security-best-practices}

* Always use HTTPS (our CDN URLs enforce this)
* Implement proper error handling

## Getting Help {#getting-help}

If you encounter any issues:

1. Check your browser's console for error messages
2. Verify your CDN URL is correct
3. Ensure all event handlers are properly implemented
4. Contact Mastercard support with:
   * Your SDK version number
   * Browser version
   * Error messages (if any)
   * Steps to reproduce the issue

## Updates and Maintenance {#updates-and-maintenance}

To stay up to date:

* Regularly check the npm registry for new versions
* Read the changelog before upgrading
* Test thoroughly in a development environment before updating production
* Keep your CDN URL version number specific

Tip: The SDK is designed to be straightforward to implement while handling complex security and communication features behind the scenes. Start with the basic implementation and add more features as needed.