{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-products/components/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["partial","badge","admonition","embeddable","img"]},"type":"markdown"},"seo":{"title":"Components SDK | Worldpay Developer","description":"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.","siteUrl":"https://docs.worldpay.com/access","image":"/access/assets/worldpay-logo-light.21b7daf79984773a9fcd7d4fbcb07ae5289dfffd6023c4c3dca720c7058e53dc.33f780a6.svg","keywords":"documentation, api, openapi, sdks, developer, payments, json, payouts, 3ds","jsonLd":{"@context":"https://schema.org","@type":"Organization","url":"https://docs.worldpay.com/access","name":"Worldpay"},"meta":[{"name":"google-site-verification","content":"zjziIKaP3ImsqsfhYnEBnq1R85UabiSwl7HTXuwtZuo"},{"name":"doc_product","content":"Access"},{"name":"doc_category","content":"Documentation"}],"llmstxt":{"hide":false,"sections":[{"title":"Payments API","description":"Payment orchestration API combining fraud assessment, 3ds authentication, SCA exemptions, Worldpay Token creation and a card or wallet based payment.","includeFiles":["products/payments/@20240601/**/*"],"excludeFiles":[]},{"title":"Payment Queries API","description":"Querying your payments data, based on a variety of parameters.","includeFiles":["products/payment-queries/@v1/**/*"],"excludeFiles":[]},{"title":"Card BIN Data API","description":"Provides detailed information about a card.","includeFiles":["products/card-bin/@v1/**/*"],"excludeFiles":[]},{"title":"3DS Authentication API","description":"Request 3DS authentication to protect against fraud, be SCA compliant and to shift liability using this standalone API.","includeFiles":["products/3ds/@v3/**/*"],"excludeFiles":[]},{"title":"FraudSight API","description":"Request a risk assessment and receive a response with an outcome (e.g. lowRisk) using this standalone API.","includeFiles":["products/fraudsight/@v1/**/*"],"excludeFiles":[]},{"title":"Checkout SDK","description":"Integrate using our clientside SDKs for both web and native devices. Benefit from SAQ-A/PCI-SSF compliance.","includeFiles":["products/checkout/web/@v2/**/*","products/checkout/ios/@v4/**/*","products/checkout/android/@v4/**/*","products/checkout/react-native/@v3/**/*","products/checkout/flutter/@v1/**/*"],"excludeFiles":[]},{"title":"Tokens API","description":"Minimizes the exposure of sensitive card details and increases the security of your customer's card details.","includeFiles":["products/tokens/@v3/**/*"],"excludeFiles":[]},{"title":"Card Payments API","description":"Request a card payment using this standalone API, requires separate requests for 3DS, Fraud assessment etc.","includeFiles":["products/card-payments/@v7/**/*"],"excludeFiles":[]},{"title":"Card Verifications API","description":"Verify your customer's card to maximize your authentication rates.","includeFiles":["products/card-verifications/@v6/**/*"],"excludeFiles":[]},{"title":"Account Payouts API","description":"Send funds to your customer's bank accounts and search for payouts using parameters.","includeFiles":["products/account-payouts/@20250101/**/*"],"excludeFiles":[]},{"title":"APMs","description":"Pay using eWallets, bank transfers, direct debits, local card schemes, Postpay and eInvoice/ Buy Now Pay Later.","includeFiles":["products/apms/@20240701/**/*"],"excludeFiles":[]},{"title":"Balance API","description":"Request your account details for a single account or all accounts under an entity.","includeFiles":["products/balance/@20250101/**/*"],"excludeFiles":[]},{"title":"Card Payouts API","description":"Send funds to your customer's cards.","includeFiles":["products/card-payouts/@v4/**/*"],"excludeFiles":[]},{"title":"Events (Webhooks)","description":"Receive status updates from Access Worldpay by setting up a webhook.","includeFiles":["products/events/@v1/**/*"],"excludeFiles":[]},{"title":"FX API","description":"Manage Foreign Exchange (FX) on your payments.","includeFiles":["products/fx/@v1/**/*"],"excludeFiles":[]},{"title":"Hosted Payment Pages (HPP) API","description":"Our low-code option to take payments securely at the lowest PCI compliance level - SAQ A.","includeFiles":["products/hosted-payment-pages/@v1/**/*"],"excludeFiles":[]},{"title":"Money Transfers API","description":"Money Transfer OCTs (Original Credit Transaction) allow funds to be pushed to an eligible card in 30 minutes or less.","includeFiles":["products/money-transfers/@v1/**/*"],"excludeFiles":[]},{"title":"Parties API","description":"Create parties, manage your payout instruments and beneficial owners and carry out identity verification checks.","includeFiles":["products/parties/@20250101/**/*"],"excludeFiles":[]},{"title":"SCA Exemptions API","description":"Maximize a frictionless checkout experience by using issuer data insights to apply exemptions.","includeFiles":["products/sca-exemptions/@v1/**/*"],"excludeFiles":[]},{"title":"Split Payments API","description":"Divide funds from a single payment amongst yourself and your parties/sellers.","includeFiles":["products/split-payments/@20250625/**/*"],"excludeFiles":[]},{"title":"Statements API","description":"Retrieve your account statement and see individual entries for all credits and debits.","includeFiles":["products/statements/@20250101/**/*"],"excludeFiles":[]},{"title":"Transfers API","description":"Transfer funds from source account to target account.","includeFiles":["products/transfers/@20250101/**/*"],"excludeFiles":[]},{"title":"Verified Tokens API","description":"Verified Tokens ensures that your customer's payment details are valid and CIT compliant when creating a token.","includeFiles":["products/verified-tokens/@v3/**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Last updated"]},": 27 May 2026 | ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/components/changelog"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Change log"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"web-for-apms---components-sdk","__idx":0},"children":["Web for APMs - Components SDK"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Badge","attributes":{"size":"small","to":"/","fontWeight":"bold","color":"var(--wp-colour-black)","mt":"0rem","mb":"0.5rem","px":"1rem","py":"0.5rem","borderRadius":"6rem","bg":"#E0D5FC"},"children":["Enterprise"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Take Alternative Payment Methods (APMs) using a secure, hosted iframe solution. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," ","Integrate the SDK into your web application, ensuring a seamless and secure payment experience for your customers."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Prerequisite"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Contact your Worldpay Implementation Manager for your checkout id (in UUId format) and your credentials."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"integration-steps","__idx":1},"children":["Integration steps"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["SDK initialization"]}," - load and configure the SDK in your web application."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["UI rendering"]}," - the hosted component is embedded against a chosen selector on your checkout page."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Payment data collection"]}," - collect payment details securely via the iframe."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Session creation"]}," - receive a session from the SDK."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Payment submission"]}," - send the session to your backend for payment processing."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["QR code APMs"]}," - handle QR code display and retrieve payment statuses for APMs (Pix, WeChat Pay, Swish)."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Recurring transactions"]}," - process recurring payments for SEPA, Klarna (recurring) and iDEAL."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"redirect-apm-flow-for-the-components-sdk","__idx":2},"children":["Redirect APM flow for the Components SDK"]},{"$$mdtype":"Tag","name":"Diagram","attributes":{"data-language":"mermaid","diagramType":"mermaid","diagramSource":"\nsequenceDiagram\n autonumber\n participant C as Customer\n participant S as Components SDK\n participant M as Merchant\n participant A as APMs API\n\n M->>S: Configure and initialize Components SDK\n C->>S: Submit payment details for the selected method\n S-->>M: Return session href\n M->>A: Submit payment request with session href\n A-->>M: Return redirect URL\n M->>C: Redirect customer to APM provider\n C->>M: Authorize payment\n M->>A: Poll transaction status\n A-->>M: Return transaction status\n M->>C: Redirect customer to the status page\n","diagramHtml":"APMs APIMerchantComponents SDKCustomerAPMs APIMerchantComponents SDKCustomerConfigure and initialize Components SDK1Submit payment details for the selected method2Return session href3Submit payment request with session href4Return redirect URL5Redirect customer to APM provider6Authorize payment7Poll transaction status8Return transaction status9Redirect customer to the status page10","diagramHtmlDark":"APMs APIMerchantComponents SDKCustomerAPMs APIMerchantComponents SDKCustomerConfigure and initialize Components SDK1Submit payment details for the selected method2Return session href3Submit payment request with session href4Return redirect URL5Redirect customer to APM provider6Authorize payment7Poll transaction status8Return transaction status9Redirect customer to the status page10"},"children":["\nsequenceDiagram\n autonumber\n participant C as Customer\n participant S as Components SDK\n participant M as Merchant\n participant A as APMs API\n\n M->>S: Configure and initialize Components SDK\n C->>S: Submit payment details for the selected method\n S-->>M: Return session href\n M->>A: Submit payment request with session href\n A-->>M: Return redirect URL\n M->>C: Redirect customer to APM provider\n C->>M: Authorize payment\n M->>A: Poll transaction status\n A-->>M: Return transaction status\n M->>C: Redirect customer to the status page\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"qr-code-apm-flow-for-the-components-sdk","__idx":3},"children":["QR code APM flow for the Components SDK"]},{"$$mdtype":"Tag","name":"Diagram","attributes":{"data-language":"mermaid","diagramType":"mermaid","diagramSource":"\nsequenceDiagram\n autonumber\n participant C as Customer\n participant S as Components SDK\n participant M as Merchant\n participant A as APMs API\n\n M->>S: Configure and initialize Components SDK\n C->>S: Submit payment details for the selected method\n S-->>M: Return session href\n M->>A: Submit payment request with session href\n A-->>M: Return redirect payload containing QR code data\n M->>S: Pass QR code data using continue method\n S-->>C: Display QR code\n C->>M: Complete payment in provider app\n M->>A: Poll transaction status\n A-->>M: Return transaction status\n M->>C: Redirect customer to the status page\n","diagramHtml":"APMs APIMerchantComponents SDKCustomerAPMs APIMerchantComponents SDKCustomerConfigure and initialize Components SDK1Submit payment details for the selected method2Return session href3Submit payment request with session href4Return redirect payload containing QR code data5Pass QR code data using continue method6Display QR code7Complete payment in provider app8Poll transaction status9Return transaction status10Redirect customer to the status page11","diagramHtmlDark":"APMs APIMerchantComponents SDKCustomerAPMs APIMerchantComponents SDKCustomerConfigure and initialize Components SDK1Submit payment details for the selected method2Return session href3Submit payment request with session href4Return redirect payload containing QR code data5Pass QR code data using continue method6Display QR code7Complete payment in provider app8Poll transaction status9Return transaction status10Redirect customer to the status page11"},"children":["\nsequenceDiagram\n autonumber\n participant C as Customer\n participant S as Components SDK\n participant M as Merchant\n participant A as APMs API\n\n M->>S: Configure and initialize Components SDK\n C->>S: Submit payment details for the selected method\n S-->>M: Return session href\n M->>A: Submit payment request with session href\n A-->>M: Return redirect payload containing QR code data\n M->>S: Pass QR code data using continue method\n S-->>C: Display QR code\n C->>M: Complete payment in provider app\n M->>A: Poll transaction status\n A-->>M: Return transaction status\n M->>C: Redirect customer to the status page\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"integration-and-initialization","__idx":4},"children":["Integration and initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the Components SDK script to your web application:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":""},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Adding ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["type=\"module\""]}," is required when loading ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["components.js"]},". The Components SDK is delivered as an ES module, so the browser must load it in module mode for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Worldpay.components"]}," to be available."]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"integration-example---preview-only","__idx":5},"children":["Integration example - preview only"]},{"$$mdtype":"Tag","name":"Embeddable","attributes":{"url":"/embeddable/components/index.html","title":"Access Components SDK - Integration Example","height":"700"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can initialize the SDK using a simple configuration."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Checkout merchant ID."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["baseUrl"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The URL for our try/live environment."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selector"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The DOM selector where the iframe is mounted."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transaction"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["An object containing payment details."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amount"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The transaction amount in minor units (e.g., pence for GBP)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["currency"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/reference/supported-countries-currencies#iso-currency-codes"},"children":["ISO currency code"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["countryCode"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/reference/supported-countries-currencies#iso-country-codes"},"children":["ISO country code"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loadingSkeleton"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Enables a loading skeleton while the iframe is initializing."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["elements"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["methods"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Defines the elements and payment methods."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"user-data-collection","__idx":6},"children":["User data collection"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"handling-session","__idx":7},"children":["Handling session"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Once payment details are entered and validated, the SDK returns a session representing the payment data."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can then apply the session directly in our ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/apms"},"children":["APMs API"]},"."]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.paymentInstrument.type\": \"checkout\""]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Apply the session in the value for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.paymentInstrument.sessionHref"]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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:"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"additionalFields"},"children":["additionalFields"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"SDK display name"},"children":["SDK display name"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"APMs API service mapping"},"children":["APMs API service mapping"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["billingAddress"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Billing Address"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.paymentInstrument.billingAddress"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shippingAddress"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Shipping Address"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.shipping"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["email"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Email Address"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.customer.email"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["name"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["First Name"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.customer.firstName"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["name"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Last Name"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.customer.lastName"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["phone"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Telephone Number"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.customer.phone"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dateOfBirth"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Date of Birth"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.customer.dateOfBirth"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["identityDocuments"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["CPF/CNPJ"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.customer.identityDocuments.reference"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["identityDocuments"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["CPF/CNPJ"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["instruction.customer.identityDocuments.type"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"supported-payment-methods","__idx":8},"children":["Supported payment methods"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Payment method"},"children":["Payment method"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Initializing request payment name"},"children":["Initializing request payment name"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["ACH/eCheck"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ach"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Alipay China"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alipay_cn"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Alipay Hong Kong"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alipay_hk"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Alipay+"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["alipay_uni"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Bancontact"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bancontact"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["BLIK"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["blik"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Euteller"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["euteller"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["iDEAL"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ideal"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Klarna (recurring)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["klarna"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Konbini"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["konbini"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Multibanco"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["multibanco"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["MyBank"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mybank"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Open Banking"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["open_banking"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Przelewy24"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["przelewy"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["PayPal"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paypal"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["PaysafeCard"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paysafecard"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Pix"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pix"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["SafetyPay"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["safetypay"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["SEPA Direct Debit"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["sepa"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Swish"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["swish"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Trustly"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["trustly"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["WeChat Pay"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["wechatpay"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example---initializing-4-payment-methods-with-default-fields","__idx":9},"children":["Example - Initializing 4 payment methods, with default fields"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/access/assets/components-sample.3b82553b2f4b66ec22b139861098b3616450771e7e4826f54763dcd4da2612bc.98b49ea8.png","alt":"Components initialization example screenshot","withLightbox":false,"width":"500px","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"\n","lang":"js"},"children":[]}]},"headings":[{"value":"Web for APMs - Components SDK","id":"web-for-apms---components-sdk","depth":1},{"value":"Integration steps","id":"integration-steps","depth":3},{"value":"Redirect APM flow for the Components SDK","id":"redirect-apm-flow-for-the-components-sdk","depth":3},{"value":"QR code APM flow for the Components SDK","id":"qr-code-apm-flow-for-the-components-sdk","depth":3},{"value":"Integration and initialization","id":"integration-and-initialization","depth":3},{"value":"Integration example - preview only","id":"integration-example---preview-only","depth":3},{"value":"User data collection","id":"user-data-collection","depth":3},{"value":"Handling session","id":"handling-session","depth":3},{"value":"Supported payment methods","id":"supported-payment-methods","depth":3},{"value":"Example - Initializing 4 payment methods, with default fields","id":"example---initializing-4-payment-methods-with-default-fields","depth":4}],"frontmatter":{"seo":{"title":"Components SDK | Worldpay Developer","description":"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."},"sidebar":{"path":"./sidebars.yaml"}},"lastModified":"2026-06-02T10:36:10.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/components","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}