<p>Elavon downloads and stores cookies on your device when you visit our website. We use these cookies to better understand and improve your browsing experience by identifying most visited pages, personalising content, and measuring site performance.</p>


Essential cookies enable core functionality such as page navigation and access to secure areas. The website cannot function properly without these cookies; they can only be disabled by changing your browser preferences.

These are cookies that support site functionality that is visible or advantageous to you or your experience of the site, they enable websites to remember choices and provide a more personalized experience.   Functional cookies help to provide services that you request, such as language preference or layout.

Performance cookies help us to improve our website by collecting and reporting information on its usage (for example, which of our pages are most frequently visited).

These cookies and similar technologies gather information about your browsing habits. They remember that you've visited a website and share this information with other organisations, such as advertisers and platforms on which we advertise. They do this in order to provide you with ads that are more relevant to you and your interests. Although these cookies and similar technologies can track your visits to other websites, they don't usually know who you are. Without these cookies, online advertisements you encounter will be less relevant to you and your interests.

Cookie Settings

<p>U.S. Bank Europe DAC. Registered in Ireland – Number 418442..  Registered Office: Block F1, Cherrywood Business Park, Dublin 18, D18 W2X7, Ireland.</p>
<p>U.S. Bank Europe DAC, trading as Elavon Merchant Services, is regulated by the Central Bank of Ireland.</p>
<p><br>
U.S. Bank Europe DAC. Registered in Ireland with Companies Registration Office. The liability of the member is limited. United Kingdom branch registered in England and Wales under the number BR022122.</p>
<p>U.S. Bank Europe DAC, trading as Elavon Merchant Services, is a credit institution authorised and regulated by the Central Bank of Ireland.  Authorised by the Prudential Regulation Authority.  Subject to regulation by the Financial Conduct Authority and limited regulation by the Prudential Regulation Authority.  Details about the extent of our regulation by the Prudential Regulation Authority are available from us on request.</p>


Most popular solutions

Additional solutions

Fusebox integration & options

Optional platform features

Documentation

North America

Europe

Regions

There are two different methods you can use to generate the card identifier page. 
- Create your own form
- Drop-in checkout


## Integrate your own form

Your own form integration gives you complete control over the checkout experience and keeps PCI requirements to a minimum.

### Benefits

Key benefits include:

- Helping you to be PCI-DSS compliant using the SAQ-A-EP self-assessment questionnaire.
- You keep full control over the user experience and the customer journey through checkout.

### Integration

When you integrate using your Own Form, you must ensure:

- Your site is secured using TLS (1.2, or the latest version).
- All communications are over HTTPS.
- You have your Integration Key and Integration Password in order to authenticate your requests.

:::::notice{warning}

**Important:** You must keep your Integration Key and Integration Password secret!
:::::


- You link your payment page to our JavaScript library (sagepay.js) using the following snippet. In order to meet PCI 4.0 requirements, you will need to perform an integrity check on this file.
```html
<script src="https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js" integrity="sha512-T+yNbJ/YwKr2plVtXl77CpvS/MymSW9+j4KTcW2TxTMkzXjxoWmlgXwEbjr4JynhhnrsDVvjTUUGj1P+QRRf6Q==" crossorigin="anonymous">
</script>
```

The sagepay.js ensures sensitive card data is transmitted directly from the customer's browser to Opayo without any details passing through your server.

#### Step 1: Create a merchant session key (MSK)

Generate a Merchant Session Key (**merchantSessionKey**) using your Integration Key and Integration Password to authenticate your requests. A valid **merchantSessionKey** is required to initialise your own form checkout.

The Merchant Session Key is used to create a unique Card Identifier (the tokenised card details). The Merchant Session Key expires:

- After 400 seconds
- After 3 failed attempts to create a Card Identifier

A new Merchant Session Key must be created each time you load the payment page or when an existing Merchant Session Key expires. Send an HTTP POST request to our **/merchant-session-keys** endpoint using your Integration Key and password to authenticate the request.

**Example request**


```json
{
  "vendorName": "sandbox"
}
```

For HTTP Basic Authentication, you must:

- Format the string as, ```integrationKey:integrationPassword```, encode it using Base64 encoding and include it in the Authorization header.
- Enter your unique Opayo vendor name in the **vendorName** field.

**Example response**


```json
{
   "merchantSessionKey": "M1E996F5-A9BC-41FE-B088-E5B73DB94277",
   "expiry": "2021-08-11T11:45:16.285+01:00"
 }
```

:::::notice{info}

**Notes:**

- When a Merchant Session Key is invalid or when the Merchant Session Key has expired (after 400 seconds), you can create an endpoint on your server that generates a new Merchant Session Key for the current transaction.
- When you receive an HTTP 401 (Unauthorised) response, you can make an AJAX request to the same endpoint and replace the Merchant Session Key in the page with the new one.
:::::


#### Step 2: Include sagepay.js in your payment form

You must include the link to the Sagepay JavaScript library (with integrity check) in the code of the page where you collect your customers’ card details as follows:


```html
 <script src="https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js" integrity="sha512-T+yNbJ/YwKr2plVtXl77CpvS/MymSW9+j4KTcW2TxTMkzXjxoWmlgXwEbjr4JynhhnrsDVvjTUUGj1P+QRRf6Q==" crossorigin="anonymous">
</script>
```

#### Step 3: Load the form and create a card identifier

Your form must collect all of the following card details for the sagepay.js to work correctly:

- Cardholder name
- Card number
- Expiry date (formatted as ```MMYY```)
- Security code

:::::notice{warning}

**Important:** To prevent card data being transmitted to your server, ensure you do not set a **name** attribute on these fields.
:::::


When Steps 1 and 2 are complete, you can load the form. You must:

1. Include the link to sagepay.js on the page.
2. Embed the **merchantSessionKey**.
3. Call the **Sagepay.tokeniseCardDetails** to tokenise the card details.

When your customer submits the form, their payment details are:

- Validated
- Tokenised
- Passed as a hidden field called **cardIdentifier**, to POST with the form data

:::::notice{warning}

**Important:** You must submit payments from your server to complete the transaction.
:::::


**Example payment form:**


```html
<html lang="en">
   <head>
      <title>Example Payment Form</title>
   </head>
   <body>
      <form method="post">
         <label for="id1">Name:</label>
         <div><input id="id1" data-card-details="cardholder-name"></div>
         <label for="id2">Card:</label>
         <div><input id="id2" data-card-details="card-number"></div>
         <label for="id3">Expiry:</label>
         <div><input id="id3" data-card-details="expiry-date"></div>
         <label for="id4">CVV:</label>
         <div><input id="id4" data-card-details="security-code"></div>
         <input type="hidden" name="card-identifier">
         <div><button type="submit">Pay Now</button></div>
      </form>
      <script src="https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js" integrity="sha512-T+yNbJ/YwKr2plVtXl77CpvS/MymSW9+j4KTcW2TxTMkzXjxoWmlgXwEbjr4JynhhnrsDVvjTUUGj1P+QRRf6Q==" crossorigin="anonymous">
</script><script>document.querySelector('[type=submit]') .addEventListener('click', function(e) { e.preventDefault(); // to prevent form submission sagepayOwnForm({ merchantSessionKey: 'FC71C349-3AFE-44CF-915D-7E0A46375B41' }) .tokeniseCardDetails({ cardDetails: { cardholderName: document.querySelector('[data-card-details="cardholder-name"]').value, cardNumber: document.querySelector('[data-card-details="card-number"]').value, expiryDate: document.querySelector('[data-card-details="expiry-date"]').value, securityCode: document.querySelector('[data-card-details="security-code"]').value }, onTokenised : function(result) { if (result.success) { document.querySelector('[name="card-identifier"]').value = result.cardIdentifier; document.querySelector('form').submit(); } else { alert(JSON.stringify(result)); } } }); }, false) </script>
   </body>
</html>
```


## Integrate drop-in checkout

Our Drop-In Checkout integration gives you a flexible form that is integrated seamlessly with your payment pages.

### Benefits

Key benefits include:

- Using the SAQ-A self-assessment questionnaire to help you become PCI-DSS compliant
- You can choose basic and advanced options that ensure maximum compatibility with your payment pages
- Mobile-first design optimises multichannel experiences
- You retain control of the checkout customer journey

### Integration

You can integrate with our Drop-In Checkout in only three steps. You must first ensure:

- Your site is secured using TLS (1.2 or the latest version)
- All communications are over HTTPS
- You have your Integration Key and Integration Password in order to authenticate your requests.

:::::notice{warning}

**Important:** You must keep your Integration Key and Integration Password secret!
:::::


- You add the following link to our JavaScript library (sagepay.js) on your payment page:  
      
```html
<script src="https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js" integrity="sha512-T+yNbJ/YwKr2plVtXl77CpvS/MymSW9+j4KTcW2TxTMkzXjxoWmlgXwEbjr4JynhhnrsDVvjTUUGj1P+QRRf6Q==" crossorigin="anonymous"></script> (test)

<script src="https://live.opayo.eu.elavon.com/api/v1/js/sagepay.js" integrity="sha512-T+yNbJ/YwKr2plVtXl77CpvS/MymSW9+j4KTcW2TxTMkzXjxoWmlgXwEbjr4JynhhnrsDVvjTUUGj1P+QRRf6Q==" crossorigin="anonymous"></script> (live)
```

:::::notice{info}

**Note:** The sagepay.js ensures sensitive card data is transmitted directly from the customer's browser to Opayo without any details passing through your server.
:::::


#### Step 1. Create a merchant session key (MSK)

:::::notice{warning}

**Important:** A valid **merchantSessionKey** is required to initialise the Drop-In checkout.
:::::


Generate a Merchant Session Key (**merchantSessionKey**) using your Integration Key and Integration Password to authenticate your requests.

The Merchant Session Key is used to create a unique Card Identifier (tokenised card details). It expires:

- After 400 seconds
- After 3 failed attempts to create a Card Identifier

A new Merchant Session Key must be created each time you load the payment page, or when an existing Merchant Session Key has expired. Send an HTTP POST request to our **merchant-session-keys** endpoint using your Integration Key and password to authenticate the request.

**Example request**


```json
{
  "vendorName": "sandbox"
}
```

For HTTP Basic Authentication, you must format the string as ```integrationKey:integrationPassword``` and encode it using Base64 encoding. The encoded string must be included in the Authorization header.


**Example Response**


```json
{
  "merchantSessionKey": "M1E996F5-A9BC-41FE-B088-E5B73DB94277",
  "expiry": "2021-08-11T11:45:16.285+01:00"
}
```

:::::notice{info}

**Notes:**

- When a Merchant Session Key is invalid, or when the Merchant Session Key has expired (after 400s), you can create an endpoint on your server that generates a new Merchant Session Key for the current transaction.
- When you get a HTTP 401 (Unauthorised) response, you can make an AJAX request to the same endpoint and replace the Merchant Session Key in the page with the new one.
:::::


#### Step 2. Include sagepay.js in your payment page

You must include the link to the Opayo JavaScript library in the code of the page where you want the Drop-In Checkout iFrame to display as follows:


```html
<script src="https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js" integrity="sha512-T+yNbJ/YwKr2plVtXl77CpvS/MymSW9+j4KTcW2TxTMkzXjxoWmlgXwEbjr4JynhhnrsDVvjTUUGj1P+QRRf6Q==" crossorigin="anonymous"></script>
```

#### Step 3. Create a container for the iFrame

Create the HTML element that will contain the iFrame. A div element is used in the following example:


```html
<div id="sp-container"></div>
```

#### Step 4. Call sagepayCheckout

Initialise the iFrame with a call to **sagepayCheckout** including the merchant session key and any additional options:

- When the container has the id of ‘**sp-container**’, then only Merchant Session Key is required. For example: 

 ```html
<script>
     sagepayCheckout
     ({ merchantSessionKey: 'F42164DA-4A10-4060-AD04-F6101821EFC3' }).form(); 
</script>
```
- To use a different form, include the **formSelector** option together with the form's CSS selector. For example: 
     
 ```html
<script>
     sagepayCheckout
     ({ merchantSessionKey : 'M1E996F5-A9BC-41FE-B088-E5B73DB94277',containerSelector: '#payment-details' }).form
     ({ formSelector: '#checkout-form' });
</script>
 ```
- To specify a custom container, include the **containerSelector** option together with the custom CSS selector.

When your customer submits the form, their payment details are:

- Validated
- Tokenised
- Passed in the hidden **cardIdentifier** field to POST with the form data

:::::notice{warning}

**Important:** You must submit payments from your server to complete the transaction.
:::::


**Example payment form using the Drop-In Checkout**


```html
<html lang="en">
   <head>
      <title>Payment Form</title>
<script src="https://sandbox.opayo.eu.elavon.com/api/v1/js/sagepay.js" integrity="sha512-T+yNbJ/YwKr2plVtXl77CpvS/MymSW9+j4KTcW2TxTMkzXjxoWmlgXwEbjr4JynhhnrsDVvjTUUGj1P+QRRf6Q==" crossorigin="anonymous"></script>
      <style>    body * { font-family: sans-serif; }    h1 { } input { font-size:12pt; }    #main { width: 550px; margin: 0 auto; }    #submit-container { padding-top:10px; float:right; }    button[type=submit] { border:none; background:indigo; padding:10px; color:white; border-radius:5px; } </style>
   </head>
   <body>
      <main>
         <h1>My Test Shop</h1>
         <form>
            <h2>Payment Details</h2>
            <div id="sp-container"></div>
            <div id="submit-container">   <button type="submit">Make Payment</button>  </div>
         </form>
      </main>
      <script>sagepayCheckout({ merchantSessionKey: 'F42164DA-4A10-4060-AD04-F6101821EFC3' }).form(); </script>
   </body>
</html>
```



## Submit transactions from your server

When you receive a Card Identifier using our drop-in checkout or your own form integration, you can submit the payment to the Opayo gateway from your server.



### Integration

You must:

- Authenticate your call using HTTP Basic authentication.
- Format the string as `integrationKey:integrationPassword` and encode it using Base64 encoding.
- Include the encoded string in the authorization header.

#### Step 1. Submit the transaction request

For a basic transaction, the parameters listed in the following table must be included in the request body.

**Transaction request parameters**
| Property | Description |
|---|---|
| transactionType | The type of transaction requested. For example, Payment or Repeat. |
| paymentMethod | The payment method for the transaction. In this object you must provide us with the **cardIdentifier** and the **merchantSessionKey** used to create that **cardIdentifier.** |
| vendorTxCode | Your unique reference for this transaction. |
| amount | The amount in the smallest currency unit. For example, to charge £1.00 the amount is input as 100. |
| currency | The currency of the amount in 3 letter ISO-4217 format. For example, GBP. |
| customerFirstName | Your customer's first name. |
| customerLastName | Your customer's last name. |
| billingAddress | Your customer's billing address. |

::::notice{warning}

**Important:** You must submit the **strongCustomerAuthentication** object.
::::


**Example payment transaction request**

```json
{
  "transactionType": "Payment",
  "paymentMethod": {
    "card": {
      "merchantSessionKey": "",
      "cardIdentifier": ""
    }
  },
  "vendorTxCode": "demotransaction-",
  "amount": 10000,
  "currency": "GBP",
  "description": "Demo transaction",
  "apply3DSecure": "UseMSPSetting",
  "customerFirstName": "Sam",
  "customerLastName": "Jones",
  "billingAddress": {
    "address1": "407 St. John Street",
    "city": "London",
    "postalCode": "EC1V 4AB",
    "country": "GB"
  },
  "entryMethod": "Ecommerce",
  "strongCustomerAuthentication": {
    "website": "https://mydomain.com",
    "notificationURL": "https://notification.url",
    "browserIP": "10.68.21.21",
    "browserAcceptHeader": "text/html, application/json",
    "browserJavascriptEnabled": true,
    "browserJavaEnabled": false,
    "browserLanguage": "en-GB",
    "browserColorDepth": "16",
    "browserScreenHeight": "768",
    "browserScreenWidth": "1200",
    "browserTZ": "+300",
    "browserUserAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:67.0) Gecko/20100101 Firefox/67.0",
    "challengeWindowSize": "Small",
    "transType": "GoodsAndServicePurchase"
  }
}
```

You can find a full list of parameters in our :magic-link[API reference]{id="api-reference"}.

#### Step 2. Handle transaction responses

Responses depend on your 3D Secure requirements. When 3D Secure authentication is not required and the transaction is successfully authorised, you should receive a response similar to the following example:


```json
{
  "transactionId": "T6569400-1516-0A3F-E3FA-7F222CC79221",
  "transactionType": "Payment",
  "status": "Ok",
  "statusCode": "0000",
  "statusDetail": "The Authorisation was Successful.",
  "retrievalReference": 8636128,
  "bankResponseCode": "00",
  "bankAuthorisationCode": "999777",
  "paymentMethod": {
    "card": {
      "cardType": "Visa",
      "lastFourDigits": "0006",
      "expiryDate": "0317"
    }
  },
  "3DSecure": {
    "status": "NotChecked"
  }
}
```

The **status**, **statusCode**, and **statusDetail** inform you of the transaction outcome.

**Response statuses**
| Status | Status description |
|---|---|
| OK | Transaction request completed successfully. |
| NotAuthed | Transaction request was not authorised. |
| Rejected | Transaction request was rejected by your fraud rules. |
| Malformed | Missing properties or badly formed body. |
| Invalid | Invalid property values supplied |
| Error | An error occurred at Opayo |

### Transactions with 3D Secure

Transactions that use 3D Secure authentication require your customer to be forwarded to their card issuer for authentication before a card authorisation can complete. When 3D Secure authentication is required you should receive a response similar to the following example:


```json
{
  "statusCode": "2021",
  "statusDetail": "Please redirect your customer to the ACSURL to complete the 3DS Transaction",
  "transactionId": "BEB718F6-3ED2-323E-2CB2-B8C83DB2029C",
  "acsTransId": "43b04fd1-692c-4b76-ac20-a75527ad0a25",
  "dsTransId": "7980e36f-907b-4530-84fd-ccc1f40bf9ae",
  "acsUrl": "https://localhost:8252/html_challenge",
  "status": "3DAuth",
  "cReq": "eyJtZXNzYWdlVHlwZSI6IkNSZXEi...V2luZG93U2l6ZSI6IjAxIn0"
}
```

Integration options