Last updated: 27 May 2026 | Change log

Take 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.

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. QR code APMs - handle QR code display and retrieve payment statuses for APMs (Pix, WeChat Pay, Swish).

7. 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.214.1/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: 'alipay_cn' }, { name: 'paypal' }, { name: 'sepa' }, { name: 'blik' }, { name: 'swish' }],
      },
    ],
    advancedConfiguration: {
      additionalFields: [`name`, `email`, `dob`, `phone`, `shippingAddress`, `billingAddress`, `identityDocuments`]
    }
  }

  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 payment details are entered and validated, 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 then apply the session directly in our APMs API.

1. Set instruction.paymentInstrument.type": "checkout"
2. Apply the session in the value for instruction.paymentInstrument.sessionHref

The data you can collect with the SDK is directly mapped to our APMs API. This is then passed in the encrypted session, meaning you don't need to re-supply it. The SDK maps the APMs API field as follows:

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