Last updated: 09 October 2026 | Change log

Take payments and still qualify for SAQ-A - the lowest PCI compliance level - with our Components SDK.
Accept one-time debit/credit cards and Alternative Payment Methods (APMs) using a secure, hosted iframe solution.
Integrate the SDK into your web application, ensuring a seamless and secure payment experience for your customers.

<script type="module">
  Worldpay.components.init({
    // ...other config
    elements: [
      {
        element: "accordion",
        methods: [
          { name: "card" },
          { name: "ideal" },
          { name: "paypal" },
          { name: "sepa" },
          { name: "blik" },
        ]
      }
    ]
  })
</script>

1. SDK initialization - load and configure the SDK in your web application.

2. UI rendering - the hosted component is embedded against a chosen selector on your checkout page.

3. Payment data collection - collect payment details securely via the iframe.

4. Session creation - receive a session from the SDK.

5. Payment submission - send the session to your backend for payment processing.

6. Choose the payment path

   a. Debit/credit cards - authorize guest payment by sending the session to the Payments API.

   b. Redirect APMs - use our APMs API to redirect the customer to the provider authorization page, then check the payment status.

   c. QR code APMs - display the QR code (for example Pix, WeChat Pay, Swish), then check payment status.

   d. Recurring transactions - process recurring payments for SEPA, Klarna (recurring), and iDEAL.

Add the Components SDK script to your web application:

<script type="module" src="https://js.worldpay.com/1.241.0/components.js"></script>

You can initialize the SDK using a simple configuration.

<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: "card",
            options: { 
              acceptedCardBrands: ["amex", "visa", "mastercard", "diners", "discover", "jcb", "maestro"],
             },
          }, 
          { name: "alipay_cn" }, 
          { name: "paypal" }, 
          { name: "sepa" }, 
          { name: "blik" }, 
          { name: "swish" }
        ],
      },
    ],
    advancedConfiguration: {
      additionalFields: ["email"]
    }
  }

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

Customers enter their payment details directly into the hosted iframe. The SDK handles validation and securely transmits the information to us. We process and store the data and send you an encrypted session.

Once your customer has entered payment details and we have validated them, the SDK returns a session representing the payment data.

<script type="module">
  Worldpay.components.init(config)
    .onSuccess((session, method) => { 
      console.log(session) // "https://try.access.worldpay.com/sessions/eyJrIjoxLCJkIjoiWnRLYmErUUNkOTRnc2NUZ3Z5..."
      console.log(method) // e.g. "paypal"
  })
</script>

You can apply the session according to the selected payment path:

1. Debit/credit cards - send the session to the Payments API.
2. Redirect and QR code APMs - send the session to our APMs API.
3. Recurring APMs - send the session to our APMs API using the recurring flow for the selected method.

For API requests:

1. Set instruction.paymentInstrument.type to checkout.
2. Set instruction.paymentInstrument.sessionHref to the returned session.

The data you collect with the SDK is encrypted into the session, so you do not need to re-supply it. The SDK field mapping is as follows:

¹ Supported cards: American Express / Discover / Diners / ELO / JCB / Maestro / MasterCard / MasterCard Debit / Visa / Visa Debit / Visa Electron (UK only)

For ACH to load, provide options.merchantName (string). This is displayed in the ACH compliance disclaimer and must match your legal merchant name.

Worldpay.components.init({
  // ...other config
    elements: [
      {
        element: "accordion",
        methods: [ 
          {
            name: "ach",
            "options": { "merchantName": "Global Payments" } 
          }
        ],
      },
    ]
  })

The hosted iframe ensures sensitive payment data never touches your servers. All communications between the SDK, iframe, and us are encrypted.

Our components work with all recent versions of major browsers

• Chrome
• Edge
• Firefox
• Safari

Next steps

Optional configuration