# Cardstream

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FNFa2n61eyF8y1NKDPkiM%2FUntitled.png?alt=media&#x26;token=dc0d9dfe-ffb1-432d-b55c-a98bcc9d6486" alt="" width="375"><figcaption></figcaption></figure>

**STEP 1**

Obtain merchantID and merchantSecret from cardstream. If you intend to send merchantPwd, please configure it on your Merchant Account with cardstream. Optionally choose to enable 3D Secure.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FwBPun8PlCR9jLslSjJcf%2FUntitled-1.png?alt=media&#x26;token=11d0a0a8-3702-4f3f-8421-d0f9428168d0" alt=""><figcaption></figcaption></figure>

**STEP 2**

Activate and edit the Cardstream gateway. Add your credentials.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FcxomaWLTVsINDM8nutcU%2FUntitled.png?alt=media&#x26;token=e009a6c5-b217-41c5-a14b-187409a7db69" alt="" width="375"><figcaption></figcaption></figure>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FGWR6bzK7vc3o35T1cNqs%2Fimage.png?alt=media&#x26;token=15c14186-5367-4fd1-be0a-4d71eb2b3a56" alt="" width="437"><figcaption></figcaption></figure>

{% hint style="info" %}
Steps 3-5 can be skipped if using CheckoutChamp hosted pages
{% endhint %}

**STEP 3**

{% hint style="info" %}
For Secure 3DS it may be required to pass browserData and ipAddress on the Import Order API call.
{% endhint %}

Add the hidden input browserData inside of the same form as the card input.

`<input type="hidden" name="browserData" value="" id="browserData">`

**STEP 4 (if not using CheckoutChamp page builder)**

Add this script to your page before the closing body tag.

```
Script to get browserData:
<script type="text/javascript">
    const navigator = window.navigator;
    const browserData = {
        acceptHeader: 'application/json',
        colorDepth: screen.colorDepth,
        javaEnabled: navigator.javaEnabled(),
        javaScriptEnabled: true,
        language: navigator.language,
        screenHeight: screen.height,
        screenWidth: screen.width,
        timeZoneOffset: (new Date()).getTimezoneOffset().toString(),
        userAgent: navigator.userAgent
    };
    document.getElementById('browserData').value = JSON.stringify(browserData);
</script>
```

**STEP 5**

If using Secure 3DS be sure the checkout page supports the challenge requests

[Basic 3DS Instructions](https://help.checkoutchamp.com/crm/gateway-setup/direct-api-3ds-instructions)