# 3DS Demo Payment Page

### Installation

The demo payment page files can be downloaded here. There are 2 files included in the download:

{% file src="<https://4280573448-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOz2C1kp39aXNaGEVsZbk%2Fuploads%2Fiyyb6rxcao9uwRya3jqb%2F3ds2DemoPaymentPage.zip?alt=media&token=f28a8acd-0bf2-45aa-902f-79ba142cd9e6>" %}

| File                     | Detail                                                                                                                            |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
| 3ds2DemoPaymentPage.html | Example payment page integrated with TxShield 3DS SDK. Do not use in production environments as it exposes sensitive information. |
| md5.js                   | Third party JavaScript file used to create the hash, used in the validation and authorization of your calls to the 3DS SDK.       |

These files are intended for you to copy into the same directory on your webserver and run directly from there.

### Configuration

Once on the webserver all you have to do is update the `3ds2DemoPaymentPage.html` file with the configuration values supplied by PayShield. The variables in the demo payment page are surrounded by {{ variable }}. Both the name and `{{}}` should be replaced as per below.

#### 3DS Server URL Updates

`{{txshield_3ds_url}}`: the URL of the server to connect to for 3ds2 authorisation. It needs to be updated in 2 places. Assuming the URL we provide is `https://myauthserver.com`.

| Default Values                                                                |                                                                                                                                               |
| ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| \<script src="{{txshield\_3ds\_url}}/sdk/3d2integrator.v3.dist.js">\</script> | \<script src="[https://myauthserver.com/sdk/3d2integrator.v3.dist.js">\\](https://myauthserver.com/sdk/3d2integrator.v3.dist.js">\\)</script> |
| let shieldUrl = '{{txshield\_3ds\_url}}';                                     | let shieldUrl = '<https://myauthserver.com>';                                                                                                 |

#### Authentication Updates

Two further updates need to be made to the MID and Rcode. This will allow authorisation to connect to the TxShield 3DS SDK.

`{{txshield_3ds_mid}}` is the MID provided to you by PayShield and is equivalent to a username. For example, if a mid of 808 is provided, then:

| Default Value                                | Updated Value             |
| -------------------------------------------- | ------------------------- |
| let shield3dsMid = '{{txshield\_3ds\_mid}}'; | let shield3dsMid = '808'; |

`{{txshield_3ds_rcode}}` is the rcode provided to you by PayShield and is equivalent to a password. For example, if an rcode of '598950057acc2dd9df729a5ed4b9750a7c03bbec' is provided, then:

| Default Value                                    | Updated Value                                                    |
| ------------------------------------------------ | ---------------------------------------------------------------- |
| let shield3dsRcode = '{{txshield\_3ds\_rcode}}'; | let shield3dsRcode = '598950057acc2dd9df729a5ed4b9750a7c03bbec'; |

{% hint style="warning" %}

#### Do not expose your production MID or Rcode publicly

A MID and RCode are equivalent to your username and password, or API authorisation key.
{% endhint %}

You should now be able to run the demo payment page file. For test card details please contact [PayShield Support.](mailto:support@payshield.ai)