# Payment Methods Module

This page guides you through every necessary step to integrate the Payment Methods Module into your app or website.

## Custom Tag

The UI Component will be rendered in the `<lms>` custom tag. This tag is required as it initializes the component. You need to place the tag inside your HTML, which can be placed wherever you want.

```html
<lms></lms>
```

## Script Install

With the custom tag covered, you need to add the component's script to your HTML. You can do this two different ways:

- [Static Script](#static-script)
- [Dynamic Script](#dynamic-script)

<Callout type="info" title="Script tag">
  You must add the script tag after the `<lms>` tag.
</Callout>

### Static Script

Add the following to load each component with a static script:

```html
<script defer="defer" src="paymentMethods.bundle.js"></script>
```

### Dynamic Script

```html
<script>

  let paymentMethodsScript = document.createElement('script');

  //paymentMethods.bundle.js src file path
  paymentMethodsScript.src = 'paymentMethods.bundle.js';
  
  paymentMethodsScript.defer = 'defer';

  //Container - Where you want to append the script. It can be body, head or any div.
  let container = document.body;

  container.appendChild(paymentMethodsScript);

</script>
```

## Configuration

Now, you need to call the desired method, passing at least the required parameters. With this completed, the UI Component will be ready and displayed in your application.

<table><thead><tr><th align="left">**Prop Name**</th><th align="left">**Type**</th><th align="left">**Description**</th><th align="left">**Default Value**</th><th align="left">**Required**</th></tr></thead><tbody><tr><td align="left">`token`</td><td align="left">`string`</td><td align="left">A JWT token required for authenticating the transaction.</td><td align="left">-</td><td align="left">Yes</td></tr><tr><td align="left">`customerReference`</td><td align="left">`string`</td><td align="left">A unique reference or identifier for the customer.</td><td align="left">-</td><td align="left">Yes</td></tr><tr><td align="left">`events`</td><td align="left">`object`</td><td align="left">List of possible callout events to be triggered by the response.</td><td align="left">-</td><td align="left">No</td></tr><tr><td align="left">`styles`</td><td align="left">`object`</td><td align="left">An object defining the style settings.</td><td align="left">-</td><td align="left">No</td></tr><tr><td align="left">`labels`</td><td align="left">`object`</td><td align="left">An object containing custom labels for the UI.</td><td align="left">-</td><td align="left">No</td></tr></tbody></table>

### Calling the API

Below, you will find examples of how to use the required parameters:

```js
window.listOfpaymentMethodsConfig = {
  token: 'byuY5QTlEM0UtM0QzQi00RjdELTlGREUtNDE2OUYxQUJFREQ1OjFiM2I1NzhiLWMwYTctNGI5OC1hNjEyLWU4YTA4ZWJjZTY0Ng=='
  customerReference: "123545745454",
}
```

## Optional Parameters

You can customize style and labels for the Payment Methods pages. Refer to the [Styles & Props](/payment-methods-module/styles-props) page for more details.