Access Worldpay

https://docs.worldpay.com/access/
Admin
Access Worldpay is a comprehensive payment processing platform providing APIs for card payments,...
Tokens:780,291
Snippets:6,042
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Full Integration Example

Source: https://docs.worldpay.com/access/products/hosted-payment-pages/iframe

A complete HTML document demonstrating the library inclusion, container setup, and initialization of the WPCL library with custom options.

```html
<!DOCTYPE html>
<html>
    <head>
        <title>My test page</title>

        <!-- Add the Hosted Payment Pages JavaScript library to your page -->
        <script src="https://payments.worldpay.com/resources/hpp/integrations/embedded/js/hpp-embedded-integration-library.js"></script>
    </head>

    <body>
        <div>This is my test page as a merchant</div>

        <!-- Add a container for where the Hosted Payment Pages iframe is injected -->
        <div id="custom-html"></div>

        <!-- Use JavaScript to inject the iframe into the container -->
        <script type="text/javascript">
            // Your custom options for injecting the iframe
            var customOptions = {
                url: 'https://payments.worldpay.com/app/hpp/integration/transaction/37d9d008-d649-4458-a7cd-c07a65debc54?ref=1718718877578485&cs=JWNvp6kQ0Xsrca_q',
                type: 'iframe',
                inject: 'onload',
                target: 'custom-html',
                accessibility: true,
                debug: false,
            };
            // Initialize the library and pass options
            var libraryObject = new WPCL.Library();
            libraryObject.setup(customOptions);
        </script>
    </body>
</html>
```

--------------------------------

### Full CVC Session Implementation

Source: https://docs.worldpay.com/access/products/checkout/ios/cvc-only.md

A complete example demonstrating the setup of the AccessCheckoutClient and the generation of sessions within a view controller.

```swift
import AccessCheckoutSDK

class MyViewController: UIViewController {
    private let accessBaseUrl = "https://try.access.worldpay.com"
    private let checkoutId = "your-checkout-id"

    @IBOutlet weak var cvcAccessCheckoutView: AccessCheckoutUITextField!

    @IBAction func submit(_ sender: Any) {
        let cardDetails = try! CardDetailsBuilder()
            .cvc(cvcAccessCheckoutView)
            .build()

        let accessCheckoutClient = try? AccessCheckoutClientBuilder()
            .accessBaseUrl(accessBaseUrl)
            .checkoutId(checkoutId)
            .build()

        try? accessCheckoutClient?.generateSessions(cardDetails: cardDetails, sessionTypes: [SessionType.card, SessionType.cvc]) { result in
            DispatchQueue.main.async {
                switch result {
                    case .success(let sessionsDictionary):
                        let cardSession = sessionsDictionary[SessionType.card]
                        let cvcSession = sessionsDictionary[SessionType.cvc]
                        ...
                    case .failure(let error):
                        ...
                }
            }
        }
    }
}
```

--------------------------------

### Install the React Native SDK

Source: https://docs.worldpay.com/access/products/checkout/react-native

Commands to install the Worldpay Checkout SDK using npm or yarn package managers.

```bash
npm install @worldpay/access-worldpay-checkout-react-native-sdk
```

```bash
yarn add @worldpay/access-worldpay-checkout-react-native-sdk
```

--------------------------------

### PayPal Payment Response Examples

Source: https://docs.worldpay.com/access/products/apms/paypal

JSON response examples for successful Smart Button, redirect, and Try environment flows.

```json
{
    "paymentId": "nFxASqw-LV9HE_rr1mMONP6OuaBhNYiq0jRwvvUBRLffpu0O_8mOnTpFSIM9gnTSg8thuF8qvuzMKHjhAUKA-SBywF4F_ufX78jkgX7yoPwA8HF_HMLM0RSLDKrlDpMxs5bSRRbjItu_Me3kIkraos_XGMXXDzWYsmzASPr6BGo",
    "lastEvent": "pending",
    "_links": {
      "self": {
        "href": "https://access.worldpay.com/apmPayments/nFxASqw-LV9HE_rr1mMONP6OuaBhNYiq0jRwvvUBRLffpu0O_8mOnTpFSIM9gnTSg8thuF8qvuzMKHjhAUKA-SBywF4F_ufX78jkgX7yoPwA8HF_HMLM0RSLDKrlDpMxs5bSRRbjItu_Me3kIkraos_XGMXXDzWYsmzASPr6BGo"
      }
    },
    "_actions": {
      "confirmPayment": {
        "href": "https://access.worldpay.com/apmPayments/nFxASqw-LV9HE_rr1mMONP6OuaBhNYiq0jRwvvUBRLffpu[…]rlDpMxs5bSRRbjItu_Me3kIkraos_XGMXXDzWYsmzASPr6BGo/confirmations"
      }
    },
    "paymentInstrument": {
      "method": "paypal",
      "type": "sdk",
      "sdkReference": "2HG28153DX910101U"
    },
    "redirect": "https://api.paypal.com/v2/checkout/orders/2HG28153DX910101U",
    "commandId": "cmdEy5vwB0krLe9eMwAcE66c0"
  }
```

```json
{
    "paymentInstrument": {
      "method": "paypal",
      "type": "direct",
      "sdkReference": "05567855EK995782J"
    },
    "paymentId": "nFxASqw-LV9HE_rr1mMONP6OuaBhNYiq0jRwvvUBRLffpu0O_8mOnTpFSIM9gnTSg8thuF8qvuzMKHjhAUKA-SBywF4F_ufX78jkgX7yoPwA8HF_HMLM0RSLDKrlDpMxs5bSRRbjItu_Me3kIkraos_XGMXXDzWYsmzASPr6BGo",
    "lastEvent": "pending",
    "_links": {
      "self": {
        "href": "https://access.worldpay.com/apmPayments/nFxASqw-LV9HE_rr1mMONP6OuaBhNYiq0jRwvvUBRLffpu0O_8mOnTpFSIM9gnTSg8thuF8qvuzMKHjhAUKA-SBywF4F_ufX78jkgX7yoPwA8HF_HMLM0RSLDKrlDpMxs5bSRRbjItu_Me3kIkraos_XGMXXDzWYsmzASPr6BGo"
      }
    },
    "_actions": {},
    "redirect": "https://www.paypal.com/checkoutnow?token=05567855EK995782J",
    "commandId": "cmdEy5vwB0krLe9eMwAcE66c0"
  }
```

```json
{
    "paymentInstrument": {
        "method": "paypal",
        "type": "direct",
        "sdkReference": "2HG28153DX910101U"
      },
    "paymentId": "eyJrIjoiYXBtLXNlcnZpY2UtZGVmYXVsdCIsImxpbmtWZXJzaW9uIjoiNi4wLjAifQ==.dz5mM2S9wOJFy0F+xZ63pJoY4MvCJmVKVX5RXy1cWGhFcthsPs91vvKMH5zN1RgFR8SWBDRoQFA4GRUVGjxZCWsfqOLqZzb6KliNHM8rs0EMWSqklWHSogj5rZUH5kI3DICJvCNxDzrRMZZB6OUT4E07AegBP0HiBKp5mX5kuxXiwMRCCwsuKTgtCsDJY8domtt6sBl+X8q+bpLWXQJ7YOrel1:d9ZYNUMt3N0QGVVX9O72EhvC6RLzeIxsFSOCM:ZO+3uJ34CX9E+HjhI1UTbdHYgEy9IRtW+fHHEyfvseYBMsOj8yG6LS:YpDsO0TtwhXU:ZJpmGdX3zjhg19bxkWAZFZeLAPFdvUQnHUe8Xr7Fzzgl3kRZ:UB44CGCmrMdyKRvmBV7kCfdFyAIavyL5ep9gO0r0VZn3escouFIUg=",
    "lastEvent": "pending",
    "_links": {
      "self": {
        "href": "https://try.access.worldpay.com/apmPayments/eyJrIjoiYXBtLXNlcnZpY2UtZGVmYXVsdCIsImxpbmtWZXJzaW9uIjoiNi4wLjAifQ==.dz5mM2S9wOJFy0F+xZ63pJoY4MvCJmVKVX5RXy1cWGhFcthsPs91vvKMH5zN1RgFR8SWBDRoQFA4GRUVGjxZCWsfqOLqZzb6KliNHM8rs0EMWSqklWHSogj5rZUH5kI3DICJvCNxDzrRMZZB6OUT4E07AegBP0HiBKp5mX5kuxXiwMRCCwsuKTgtCsDJY8domtt6sBl+X8q+bpLWXQJ7YOrel1:d9ZYNUMt3N0QGVVX9O72EhvC6RLzeIxsFSOCM:ZO+3uJ34CX9E+HjhI1UTbdHYgEy9IRtW+fHHEyfvseYBMsOj8yG6LS:YpDsO0TtwhXU:ZJpmGdX3zjhg19bxkWAZFZeLAPFdvUQnHUe8Xr7Fzzgl3kRZ:UB44CGCmrMdyKRvmBV7kCfdFyAIavyL5ep9gO0r0VZn3escouFIUg="
      }
    },
    "_actions": {},
    "redirect": "https://secure-test.worldpay.com/jsp/test/shopper/APMSTSimulator.jsp?customerRef=3484717844&paymentMethod=PAYPAL",
    "commandId": "cmdEy5vwB0krLe9eMwAcE66c0"
  }
```

--------------------------------

### Retrieve payment by ID example

Source: https://docs.worldpay.com/access/products/payment-queries/retrieve-by-payment-id

Example of a GET request to retrieve details for a specific payment ID.

```http
GET https://try.access.worldpay.com/paymentQueries/payments/paycGeAtsYssrrtgieKBA3Pi0
```

--------------------------------

### Full implementation example

Source: https://docs.worldpay.com/access/products/checkout/ios/card-and-cvc.md

A complete view controller implementation demonstrating the full flow from building the client to generating sessions.

```swift
import AccessCheckoutSDK

class MyViewController: UIViewController {
    private let accessBaseUrl = "https://try.access.worldpay.com"
    private let checkoutId = "your-checkout-id"

    @IBOutlet weak var panAccessCheckoutView: AccessCheckoutUITextField!
    @IBOutlet weak var expiryDateAccessCheckoutView: AccessCheckoutUITextField!
    @IBOutlet weak var cvcAccessCheckoutView: AccessCheckoutUITextField!

    @IBAction func submit(_ sender: Any) {
        let cardDetails = try! CardDetailsBuilder()
            .pan(panAccessCheckoutView)
            .expiryDate(expiryDateAccessCheckoutView)
            .cvc(cvcAccessCheckoutView)
            .build()

        let accessCheckoutClient = try? AccessCheckoutClientBuilder()
            .accessBaseUrl(accessBaseUrl)
            .checkoutId(checkoutId)
            .build()

        try? accessCheckoutClient?.generateSessions(cardDetails: cardDetails, sessionTypes: [SessionType.card, SessionType.cvc]) { result in
            DispatchQueue.main.async {
                switch result {
                    case .success(let sessionsDictionary):
                        let cardSession = sessionsDictionary[SessionType.card]
                        let cvcSession = sessionsDictionary[SessionType.cvc]
                        ...
                    case .failure(let error):
                        ...
                }
            }
        }
    }
}
```

--------------------------------

### GET /paymentQueries/payments

Source: https://docs.worldpay.com/access/products/payment-queries/query-by-date-range

Retrieves a list of payments filtered by start and end date parameters.

```APIDOC
## GET /paymentQueries/payments

### Description
Retrieves a list of payments within a specified date range.

### Method
GET

### Endpoint
/paymentQueries/payments

### Parameters
#### Query Parameters
- **startDate** (string) - Required - The start date for the query in ISO 8601 format.
- **endDate** (string) - Required - The end date for the query in ISO 8601 format.

### Response
#### Success Response (200)
- **_links** (object) - Contains self and next pagination links.
- **_embedded** (object) - Contains the list of payments.

#### Response Example
{
  "_links": {
    "self": {
      "href": "/paymentQueries/payments?startDate=2025-06-05T21:30:20Z&endDate=2025-07-08T21:30:20Z"
    }
  },
  "_embedded": {
    "payments": []
  }
}
```

--------------------------------

### WPCL.Library.setup(options)

Source: https://docs.worldpay.com/access/products/hosted-payment-pages/iframe

Initializes the Hosted Payment Pages integration by injecting an iframe or lightbox into the specified target container on your webpage.

```APIDOC
## WPCL.Library.setup(options)

### Description
Initializes the library and injects the payment interface into the DOM. This method accepts a configuration object to define the integration type, target element, and behavior.

### Parameters
- **url** (String) - Required - The Hosted Payment Pages session URL.
- **target** (String) - Required - The ID of the HTML element where the iframe is injected.
- **type** (String) - Optional - Integration type: 'iframe' or 'lightbox'. Default: 'lightbox'.
- **debug** (Boolean) - Optional - Enables console debug messages. Default: false.
- **resultCallback** (Function) - Optional - Callback function triggered when the payment process completes.
- **flowCallback** (Function) - Optional - Callback function triggered when the page changes.
- **disableScrolling** (Boolean) - Optional - Prevents checkout page scrolling. Default: false.
- **customisation** (String) - Optional - Styling configuration for the payment page.

#### Iframe-only parameters
- **inject** (String) - Optional - Injection timing: 'onload' or 'immediate'. Default: 'onload'.
- **hideContent** (Boolean) - Optional - Hides the iframe. Default: false.

#### Lightbox-only parameters
- **trigger** (String) - Required - The ID of the element that triggers the lightbox.
- **lightboxMaskOpacity** (String) - Optional - Opacity percentage (0-100). Default: 50.
- **lightboxMaskColor** (String) - Optional - Hex color for the close button. Default: #000000.
- **accessibility** (Boolean) - Optional - Restricts access to parent page content. Default: false.

### Usage Example
```javascript
var libraryObject = new WPCL.Library();
libraryObject.setup({
    url: 'https://payments.worldpay.com/app/hpp/integration/transaction/...',
    type: 'iframe',
    target: 'custom-html',
    accessibility: true
});
```
```

--------------------------------

### Payment Item Search Queries

Source: https://docs.worldpay.com/access/products/account-payouts/payment-item-search

Examples of GET requests for searching by filters, UBR, or payment ID.

```http
GET https://try.access.worldpay.com/payouts/events?entity=000000&startDate=2022-01-01&endDate=2022-02-01&payeeName=John+Doe&merchantReference=aaa&paymentReference=aaa&accountNumber=0000&sourceCurrency=EUR&sourceAmount=5.15&targetCurrency=USD&targetAmount=5.55&countryCode=UK&pageNumber=1&pageSize=1
```

```http
GET https://try.access.worldpay.com/payouts/events/PO20000N88
```

```http
GET https://try.access.worldpay.com/payouts/events/id/27ae566e-6530-ee11-b58a-005056b48b8e
```

--------------------------------

### Retrieve FX Rates Query

Source: https://docs.worldpay.com/access/products/fx/fxrate

Example of a GET request to retrieve FX rates with specific query parameters.

```http
GET https://try.access.worldpay.com/foreignExchange/rates/foreignExchange/rates?intent=PAYOUT&sourceCurrency=EUR&targetCurrency=GBP&entity=PO431501733
```

--------------------------------

### Initialize the SDK

Source: https://docs.worldpay.com/access/products/components/sdk-reference

Use the init method to initialize the SDK with a configuration object.

```js
Worldpay.components.init(config)
```

--------------------------------

### Full Card Session Implementation in Swift

Source: https://docs.worldpay.com/access/products/checkout/ios/card-only.md

A complete example demonstrating the integration of UI components, client initialization, and session generation.

```swift
import AccessCheckoutSDK

class MyViewController: UIViewController {
    private let accessBaseUrl = "https://try.access.worldpay.com"
    private let checkoutId = "your-checkout-id"

    @IBOutlet weak var panAccessCheckoutView: AccessCheckoutUITextField!
    @IBOutlet weak var expiryDateAccessCheckoutView: AccessCheckoutUITextField!
    @IBOutlet weak var cvcAccessCheckoutView: AccessCheckoutUITextField!

    @IBAction func submit(_ sender: Any) {
        let cardDetails = try! CardDetailsBuilder()
            .pan(panAccessCheckoutView)
            .expiryDate(expiryDateAccessCheckoutView)
            .cvc(cvcAccessCheckoutView)
            .build()

        let accessCheckoutClient = try? AccessCheckoutClientBuilder()
            .accessBaseUrl(accessBaseUrl)
            .checkoutId(checkoutId)
            .build()

        try? accessCheckoutClient?.generateSessions(cardDetails: cardDetails, sessionTypes: [SessionType.card]) { result in
            DispatchQueue.main.async {
                switch result {
                    case .success(let sessionsDictionary):
                        let session = sessionsDictionary[SessionType.card]
                        ...
                    case .failure(let error):
                        ...
                }
            }
        }
    }
}
```

--------------------------------

### Date range query error response

Source: https://docs.worldpay.com/access/products/payment-queries/query-by-date-range

Example of an error response returned when the provided start date exceeds the allowed retention period.

```json
{
    "errorName": "startDateTooOld",
    "message": "Provided start date must not be older than 1 year."
}
```

--------------------------------

### Initialize and Execute Profiling in iOS

Source: https://docs.worldpay.com/access/products/fraudsight/device-data/ios

Demonstrates creating a controller to manage the TMXProfiling singleton, configuring the service, and executing a device profile request with custom attributes.

```swift
import TMXProfiling
import TMXProfilingConnections
class TmxProfileController : ObservableObject{

    //Get a singleton instance of TMXProfiling
    let profile: TMXProfiling!       = TMXProfiling.sharedInstance()
    var sessionID     : String  = ""

    func initProfile(){

        // The profile.configure method is effective only once and subsequent calls to it will be ignored.
        // Please note that configure may throw NSException if NSDictionary key/value(s) are invalid.
        // This only happen due to programming error, therefore we don't catch the exception to make sure there is no error in our configuration dictionary

            profile.configure(configData:[
                                // (REQUIRED) Organisation ID
                                TMXOrgID              :"afevfjm6",
                                // (REQUIRED) Enhanced fingerprint server
                                TMXFingerprintServer  :"ddc-test.worldpay.com"
                                ])

    }

   func doProfile()
    {

        let customAttributes : [String : Array<String>] = [TMXCustomAttributes: ["attribute 1", "attribute 2"]]

        // Fire off the profiling request.
        // You will be notified of the profiling result in the closure passed in callbackBlock
        let profileHandle: TMXProfileHandle = profile.profileDevice(profileOptions:customAttributes, callbackBlock:{(result: [AnyHashable : Any]?) -> Void in
                let results:NSDictionary! = result! as NSDictionary
                let status:TMXStatusCode  = TMXStatusCode(rawValue:(results.value(forKey: TMXProfileStatus) as! NSNumber).intValue)!

                let statusString: String =
                status == .ok                  ? "OK"                   :
                status == .networkTimeoutError ? "Timed out"            :
                status == .connectionError     ? "Connection Error"     :
                status == .hostNotFoundError   ? "Host Not Found Error" :
                status == .internalError       ? "Internal Error"       :
                status == .interruptedError    ? "Interrupted Error"    :
                "Other"
                print("\nProfile completed with: \(statusString)\nSession ID: \(self.sessionID)")
        })
        // Session id is immediately available on the instance of TMXProfileHandle following to the call to profile.profileDevice()
        self.sessionID = profileHandle.sessionID;
        print("Session equals :- \(self.sessionID)");
    }

}
```

--------------------------------

### Example Error Response

Source: https://docs.worldpay.com/access/products/reference/worldpay-error-responses

A concrete example of a generic error response.

```json
{
  "errorName": "bodyIsNotJson",
  "message": "You must provide valid json in the body of the request."
}
```

--------------------------------

### Initialize Ravelin SDK with public keys

Source: https://docs.worldpay.com/access/products/fraudsight/device-data/web

Public keys for Test and Live environments.

```text
publishable_key_test_Vr7SqPVrpkvlGBPojzhsckmOriasTUBPQ1UdMw
```

```text
publishable_key_live_Vr7SqPeyQpg6qS5NeD7bCvA2P3f6gfFb5kAui4
```

--------------------------------

### fundsTransfer object examples

Source: https://docs.worldpay.com/access/products/payments/enable-features/account-funding-transactions

Examples of the fundsTransfer object structure for different transaction purposes.

```json
"fundsTransfer": {
  "type": "purchase",
  "purpose": "crypto",
  "recipient": {
    "account": {
      "type": "wallet",
      "walletReference": "wallet-reference" 
    }
  },
  ...
}
```

```json
"fundsTransfer": {
  "type": "walletLoad",
  "purpose": "crypto",
  "recipient": {
    "account": {
      "type": "storedValueWallet",
      "walletReference": "wallet-reference" 
    }
  },
  ...
}
```

```json
"fundsTransfer": {
  "type": "disbursement",
  "purpose": "businesstoBusiness",
  "recipient": {
    "account": {
      "type": "{ANY}",
      ... 
    }
  },
  ...
}
```

```json
"fundsTransfer": {
  "type": "purchase",
  "purpose": "giftCard",
  "recipient": {
    "account": {
      "type": "{ANY}",
      ... 
    }
  },
  ...
}
```

--------------------------------

### Initialize Worldpay SDK with Full Configuration

Source: https://docs.worldpay.com/access/products/components/sdk-reference

Complete configuration object including transaction details, custom styles, payment elements, and advanced settings.

```js
const config = {
  id: "your-checkout-id",
  baseUrl: "https://try.access.worldpay.com",
  selector: "#checkout-container",
  transaction: {
    amount: 2500,
    currency: "USD",
    countryCode: "US"
  },
  theme: "default",
  styles: {
    ':root': {
      '--base-font-size': '16px',
      '--font-family': 'Inter, Helvetica, Arial, sans-serif',
      '--color-primary': '#1b1b6f',
      '--color-background': '#ffffff',
      '--color-error': '#dd1308',
      '--color-content-primary': '#17171c',
      '--color-content-secondary': '#6a6e87'
    },
    '.Item': {
      'padding': '2rem 1rem',
      'border': '1px solid grey'
    }
  },
  elements: [
    {
      element: "accordion",
      methods: [
        { name: "paypal" },
      ]
    }
  ],
  advancedConfiguration: {
    additionalFields: ["name", "email", "shippingAddress", "billingAddress"]
  },
  loadingSkeleton: true
};

Worldpay.components.init(config)
  .onSuccess((session) => { /* handle success */ }),
```

--------------------------------

### Full integration example code

Source: https://docs.worldpay.com/access/products/checkout/web/cvc-only.md

A complete example including the HTML structure, CSS styling, and JavaScript initialization required to capture CVC input.

```html
<section class="container">
    <section class="card cvv">
        <form class="card__form checkout" id="cvv-form">
            <section class="field" id="cvv-field"></section>
            <button type="submit" class="submit">Submit</button>
        </form>
        <button class="clear" id="clear">Clear</button>
    </section>
</section>

<script src="https://try.access.worldpay.com/access-checkout/v2/checkout.js"></script>

// For production change to "https://access.worldpay.com/access-checkout/v2/checkout.js"
```

```css
body {
  font: 11px/22px sans-serif;
  text-transform: uppercase;
  background-color: #f7f7f7;
  color: black;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  position: relative;
  background: white;
  padding: 40px 30px;
  top: -30px;
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  box-shadow: 3px 3px 60px 0px rgba(0, 0, 0, 0.1);
}
.card .checkout .col-2 {
  display: flex;
}
.card .checkout .col-2 .col:first-child {
  margin-right: 15px;
}
.card .checkout .col-2 .col:last-child {
  margin-left: 15px;
}
.card .checkout .label .type {
  color: green;
}
.card .checkout .field {
  height: 40px;
  border-bottom: 1px solid lightgray;
}
.card .checkout .field#card-pan {
  margin-bottom: 30px;
}
.card .checkout .field.is-onfocus {
  border-color: black;
}
.card .checkout .field.is-empty {
  border-color: orange;
}
.card .checkout .field.is-invalid {
  border-color: red;
}
.card .checkout .field.is-valid {
  border-color: green;
}
.card .checkout .submit {
  background: red;
  position: absolute;
  cursor: pointer;
  left: 50%;
  bottom: -60px;
  width: 200px;
  margin-left: -100px;
  color: white;
  outline: 0;
  font-size: 14px;
  border: 0;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px 0;
  transition: background 0.3s ease;
}
.card .checkout.is-valid .submit {
  background: green;
}

.clear {
  background: grey;
  position: absolute;
  cursor: pointer;
  left: 50%;
  bottom: -120px;
  width: 200px;
  margin-left: -100px;
  color: white;
  outline: 0;
  font-size: 14px;
  border: 0;
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px 0;
  transition: background 0.3s ease;
}
```

```javascript
(function () {
  var form = document.getElementById("cvv-form")
  var clear = document.getElementById("clear");
  Worldpay.checkout.init(
    {
      id: "your-checkout-id",
      form: "#cvv-form",
      fields: {
        cvvOnly: {
          selector: "#cvv-field",
          placeholder: "CVV"
        }
      },
      styles: {
        input: {
          "font-size": "14px",
          "font-family": "Arial"
        },
        "input.is-valid": {
          color: "green"
        },
        "input.is-invalid": {
          color: "red"
        }
      },
      accessibility: {
        ariaLabel: {
          cvvOnly: "my custom aria label for cvvOnly input"
        },
        lang: {
          locale: "en-GB"
        },
        title: {
          enabled: true,
          cvvOnly: "my custom title for security code"
        }
      }
    },
    function(err, checkout) {
      if (err) {
        // handle init error
        return;
      }
      form.addEventListener("submit", function(event) {
        event.preventDefault();
        checkout.generateSessionState(function(err, session) {
          if (err) {
            // handle session state generation error
            return;
          }

          // session state for cvc
          alert(session);
        });
      });

      clear.addEventListener("click", function(event) {
        event.preventDefault();
        checkout.clearForm(function() {
          // trigger desired behavior on cleared form
          console.log('Form successfully cleared');
        });
      });
    }
  );
})();
```

--------------------------------

### Archived Payment Response Example

Source: https://docs.worldpay.com/access/products/payment-queries/query-archive

Example JSON response for a payment that has been sent for refund.

```json
{
    "_embedded": {
        "payments": [
            {
                "lastEvent": "Sent for Refund",
                "value": {
                    "amount": 500,
                    "currency": "GBP"
                },
                "paymentInstrument": {
                    "type": "card/plain",
                    "card": {
                        "number": {
                            "last4Digits": "1111"
                        },
                        "brand": "visa"
                    }
                }
            }
        ]
    },
    "_links": {
        "self": {
            "href": "/paymentQueries/archivedPayments?entityReference=AccessWP&transactionReference=AtiqTest5thJulyRefund"
        }
    }
}
```

--------------------------------

### iDEAL API Response Examples

Source: https://docs.worldpay.com/access/products/apms/ideal

Examples of successful and error responses for iDEAL payment operations.

```json
{
  "paymentId": "uK9Oh5zz4yKhGuFofhhnC7KnABEsnvjTFefo7uUYYarwh_KRcHUrrs1qJtQso9gjnhxT5oAgkJfCp1iX6U1upLOpzqHmhG8uXdBKXQ0rnmce4brW4F54BCV6GtAu0zUbgUZHQIK3iu8VcHfOiFVHyN-y7ZDRr24t7o6s_bHlZxo9g_WHOCgZdL-FywMmqkQA",
  "lastEvent": "pending",
  "_links": {
    "self": {
      "href": "https://try.access.worldpay.com/apmPayments/uK9Oh5zz4yKhGuFofhhnC7KnABEsnvjTFefo7uUYYarwh_KRcHUrrs1qJtQso9gjnhxT5oAgkJfCp1iX6U1upLOpzqHmhG8uXdBKXQ0rnmce4brW4F54BCV6GtAu0zUbgUZHQIK3iu8VcHfOiFVHyN-y7ZDRr24t7o6s_bHlZxo9g_WHOCgZdL-FywMmqkQA"
    }
  },
  "_actions": {},
  "redirect": "https://secure-test.worldpay.com/wcc/simulator?op=iDEALv2-AuthInit&trxId=205914553129935",
  "paymentInstrument": {
    "method": "ideal",
    "type": "direct"
  },
  "commandId": "cmdEy5vwB0krLe9eMwAcE66c0"
}
```

```json
{
  "errorName": "bodyDoesNotMatchSchema",
  "message": "The json body provided does not match the expected schema",
  "validationErrors": [
    {
      "errorName": "fieldHasInvalidValue",
      "message": "Field is mandatory",
      "jsonPath": "$.instruction.value.amount"
    }
  ]
}
```

--------------------------------

### Full integration example in Vue.js

Source: https://docs.worldpay.com/access/products/checkout/web/integration-vue-js

Initializes the Worldpay Access Checkout SDK by dynamically loading the script in the mounted lifecycle hook and configuring the form fields and styles.

```javascript
export default {
    name: "Checkout",
    mounted() {
        let checkoutScript = document.createElement("script");
        checkoutScript.src = "https://try.access.worldpay.com/access-checkout/v2/checkout.js";
        checkoutScript.onload = () => {
            this.initialiseCheckout();
        };
        checkoutScript.onerror = (err) => {
            console.log(`Something went wrong when loading the checkout script: ${err}`);
        };
        document.head.appendChild(checkoutScript);
    },
    methods: {
        initialiseCheckout() {
            const checkoutId = "<your-checkout-id>";
            const containerSelector = "#container";
            const panParentSelector = "#card-pan";
            const cvvParentSelector = "#card-cvv";
            const expiryDateParentSelector = "#card-expiry";
            (function () {
                var submitButton = document.querySelector("#submit");
                var clearButton = document.querySelector("#clear");
                window.Worldpay.checkout.init(
                    {
                        id: checkoutId,
                        form: containerSelector,
                        fields: {
                            pan: {
                                selector: panParentSelector,
                                placeholder: "4444 3333 2222 1111"
                            },
                            expiry: {
                                selector: expiryDateParentSelector,
                                placeholder: "MM/YY"
                            },
                            cvv: {
                                selector: cvvParentSelector,
                                placeholder: "123"
                            },
                        },
                        styles: {
                            "input": {
                                "color": "black",
                                "font-weight": "bold",
                                "font-size": "20px",
                                "letter-spacing": "3px"
                            },
                            "input#pan": {
                                "font-size": "24px"
                            },
                            "input.is-valid": {
                                "color": "green"
                            },
                            "input.is-invalid": {
                                "color": "red"
                            },
                            "input.is-onfocus": {
                                "color": "black"
                            }
                        },
                        enablePanFormatting: true,
                        allowNonLuhnCompliantCards: true,
                    },
                    function (error, checkout) {
                        if (error) {
                            console.log(`Failed to initialise the sdk: ${error}`);
                            return;
                        }
                        submitButton.addEventListener("click", function (event) {
                            event.preventDefault();
                            checkout.generateSessionState(function (error, sessionState) {
                                if (error) {
                                    console.log(`Failed to generate session: ${error}`);
                                    return;
                                }
                                alert(`Session retrieved is ${sessionState}`);
                            });
                        });
                        clearButton.addEventListener("click", function(event) {
                            event.preventDefault();
                            checkout.clearForm(function() {});
                        });
                    }
                );
            })();
        }
    }
};
```

--------------------------------

### Event-Signature header examples

Source: https://docs.worldpay.com/access/products/account-payouts/hmac-signature

Examples of single and multiple signature formats found in the Event-Signature header.

```text
Event-Signature:1/SHA256/XXXXXXXXXX
```

```text
Event-Signature:1/SHA256/XXXXXXXXXXXXXX,2/SHA256/YYYYYYYYYYYYYY
```

--------------------------------

### Initialize the Components SDK

Source: https://docs.worldpay.com/access/products/components.md

Configure the SDK with your checkout ID, environment URL, and transaction details. The selector must match an existing DOM element where the payment iframe will be mounted.

```javascript
<script type="module">
  const config = {
    id: "your-checkout-id",
    baseUrl: "https://try.access.worldpay.com",
    selector: "#payment-wrapper",
    transaction: {
      amount: 100,
      currency: "GBP",
      countryCode: "GB"
    },
    elements: [
      {
        element: 'accordion',
        methods: [{ name: 'alipay_cn' }, { name: 'paypal' }, { name: 'sepa' }, { name: 'blik' }, { name: 'swish' }],
      },
    ],
    advancedConfiguration: {
      additionalFields: [`name`, `email`, `dob`, `phone`, `shippingAddress`, `billingAddress`, `identityDocuments`]
    }
  }

  Worldpay.components.init(config)
</script>
```

--------------------------------

### MyBank API Response Examples

Source: https://docs.worldpay.com/access/products/apms/mybank

Examples of successful and error responses returned by the MyBank payment API.

```json
{
  "paymentInstrument": {
    "method": "mybank",
    "type": "direct"
  },
  "paymentId": "eyJrIjoiYXBtLXNlcnZpY2UtZGVmYXVsdCIsImxpbmtWZXJzaW9uIjoiNi4wLjAifQ==.BnnxxcMle38OazhwbF8J+4rtJi8CAq:Y3zUOn1dw6VWfvx:PHL5L0S+5ara5vz6ouV5yBmVUQCiSwQjs+1x5qJIJxAKWMWc2Mlb1doricEYlzsZIRIGCflvnYu1Ns8g1S0+66n6wCELiB9OHfX7cdDZM8QaH19DiFbmMAchPSTwt65ThzfHgki5llFFJw79PAaFT9PiiV:KsP+z2Cdr9o:XFrnd4GNEHV7yDuZt9Jyqf5XZUPFYfD4fs2JzaCZKV3L7DQm7JfXl6rjXA0ubX6hJpY5kUX4Djm9+PFFKUS6:fECFv5QSV33wfYDk9Ozs8d3Wb9inqLCfVwL0ZeHAEGBKM2Ks:rlczHJ2DGe1:xPRqjBWEQYSfjhGO0ig5hWkD70cWvOUr9oNei3iC:3d01LAXFh93YDLZPKsCwdSzM1XGYn:we0+sdcIkh8SEpzehvzy6dbwC5YGJJfB7iuKbxA==",
  "lastEvent": "pending",
  "_links": {
    "self": {
      "href": "https://try.access.worldpay.com/apmPayments/eyJrIjoiYXBtLXNlcnZpY2UtZGVmYXVsdCIsImxpbmtWZXJzaW9uIjoiNi4wLjAifQ==.BnnxxcMle38OazhwbF8J+4rtJi8CAq:Y3zUOn1dw6VWfvx:PHL5L0S+5ara5vz6ouV5yBmVUQCiSwQjs+1x5qJIJxAKWMWc2Mlb1doricEYlzsZIRIGCflvnYu1Ns8g1S0+66n6wCELiB9OHfX7cdDZM8QaH19DiFbmMAchPSTwt65ThzfHgki5llFFJw79PAaFT9PiiV:KsP+z2Cdr9o:XFrnd4GNEHV7yDuZt9Jyqf5XZUPFYfD4fs2JzaCZKV3L7DQm7JfXl6rjXA0ubX6hJpY5kUX4Djm9+PFFKUS6:fECFv5QSV33wfYDk9Ozs8d3Wb9inqLCfVwL0ZeHAEGBKM2Ks:rlczHJ2DGe1:xPRqjBWEQYSfjhGO0ig5hWkD70cWvOUr9oNei3iC:3d01LAXFh93YDLZPKsCwdSzM1XGYn:we0+sdcIkh8SEpzehvzy6dbwC5YGJJfB7iuKbxA=="
    }
  },
  "_actions": {},
  "redirect": "http://secure-test.worldpay.com/redirect?tokenId=785b62e4-cb14-4a0a-999b-b99b884595e7",
  "commandId": "cmdfjMn6H4jEDZ5ovwBaCgsu0"
}
```

```json
{
  "errorName": "bodyDoesNotMatchSchema",
  "message": "The json body provided does not match the expected schema",
  "validationErrors": [
    {
      "errorName": "fieldHasInvalidValue",
      "message": "Field is mandatory",
      "jsonPath": "$.instruction.value.amount"
    }
  ]
}
```

--------------------------------

### Worldpay.components.init(config)

Source: https://docs.worldpay.com/access/products/components.md

Initializes the Components SDK with the provided configuration object to render the payment iframe.

```APIDOC
## Worldpay.components.init(config)

### Description
Initializes the SDK and mounts the payment iframe into the specified DOM element.

### Parameters
- **config** (Object) - Required - Configuration object containing checkout details.
  - **id** (string) - Required - Checkout merchant ID.
  - **baseUrl** (string) - Required - The URL for the environment (try/live).
  - **selector** (string) - Required - The DOM selector where the iframe is mounted.
  - **transaction** (Object) - Required - Payment details.
    - **amount** (number) - Required - Transaction amount in minor units.
    - **currency** (string) - Required - ISO currency code.
    - **countryCode** (string) - Required - ISO country code.
  - **elements** (Array) - Optional - Defines the elements and payment methods.
  - **advancedConfiguration** (Object) - Optional - Additional fields like name, email, etc.

### Example
```js
const config = {
  id: "your-checkout-id",
  baseUrl: "https://try.access.worldpay.com",
  selector: "#payment-wrapper",
  transaction: {
    amount: 100,
    currency: "GBP",
    countryCode: "GB"
  },
  elements: [
    {
      element: 'accordion',
      methods: [{ name: 'alipay_cn' }, { name: 'paypal' }],
    }
  ]
}

Worldpay.components.init(config)
```
```

--------------------------------

### Worldpay.components.init

Source: https://docs.worldpay.com/access/products/components/sdk-reference

Initializes the Components SDK with the provided configuration object.

```APIDOC
## Worldpay.components.init(config)

### Description
Initializes the SDK and returns a components instance to interact with the payment UI.

### Parameters
- **config** (Object) - Required - Configuration object containing merchant ID, baseUrl, selector, and transaction details.
```

--------------------------------

### AlipayHK Payment Response Examples

Source: https://docs.worldpay.com/access/products/apms/alipayhk

Examples of successful and error JSON responses returned by the AlipayHK API.

```json
{
  "paymentId": "HZ75WBkfRwmD9YzLSZFnQ5v2I5ddQFtUqfQjfH6MtZWlDSUrxrcX5x_wn93uYUZBrpxTgfQTxtQsmy9dE_z-m-zZvrP-LeCRz0uWrqdvJK9lFEMgr042IFWuXU4qz5JB5ruD3eXP8P1s6nqEcRq5d-NwnkVtXPzEhC9FQ_77m3c",
  "lastEvent": "pending",
  "_links": {
    "self": {
      "href": "https://try.access.worldpay.com/apmPayments/HZ75WBkfRwmD9YzLSZFnQ5v2I5ddQFtUqfQjfH6MtZWlDSUrxrcX5x_wn93uYUZBrpxTgfQTxtQsmy9dE_z-m-zZvrP-LeCRz0uWrqdvJK9lFEMgr042IFWuXU4qz5JB5ruD3eXP8P1s6nqEcRq5d-NwnkVtXPzEhC9FQ_77m3c"
    }
  },
  "_actions": {},
  "redirect": "https://secure-test.worldpay.com/jsp/test/shopper/APMSTSimulator.jsp?customerRef=3413879489&paymentMethod=ALIPAY_HK",
  "paymentInstrument": {
    "method": "alipay_hk",
    "type": "direct"
  },
  "commandId": "cmdEy5vwB0krLe9eMwAcE66c0"
}
```

```json
{
  "errorName": "bodyDoesNotMatchSchema",
  "message": "The json body provided does not match the expected schema",
  "validationErrors": [
    {
      "errorName": "fieldHasInvalidValue",
      "message": "Field is mandatory",
      "jsonPath": "$.instruction.value.amount"
    }
  ]
}
```
Tokens:
Raw