{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-products/checkout-components/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["img","admonition"]},"type":"markdown"},"seo":{"title":"Optional configuration","description":"Worldpay for Developers - docs, code examples, resources and tools. Everything you need to build your omnichannel payment solution.","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":"Heading","attributes":{"level":1,"id":"optional-configuration","__idx":0},"children":["Optional configuration"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customization","__idx":1},"children":["Customization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customize the Components SDK's appearance, render payment methods and form fields used for data collection."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"themes","__idx":2},"children":["Themes"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["two options: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"default\""]}," (light mode) and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"dark\""]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["assets such as payment method icons adjust according to mode setting"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"Worldpay.components.init({\n  // ...other config\n  theme: \"dark\"\n})\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"elements","__idx":3},"children":["Elements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can specify the desired payment methods and layout."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Layout options:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accordion"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["tabs"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["solitary"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"styling","__idx":4},"children":["Styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The styling system gives you full control over presentation: use CSS variables for global theming, and CSS classes to target specific DOM elements for fine-grained overrides. This lets you match our embedded checkout UI with your brand design system."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Common CSS variables:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"--base-font-size: 16px;\n--font-family: 'Inter', Helvetica, Arial, sans-serif;\n--color-primary: #1b1b6f;\n--color-background: #ffffff;\n--color-error: #dd1308;\n--color-content-primary: #17171c;\n--color-content-secondary: #6a6e87;\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Common CSS classes:"]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/access/assets/components-class.ea52b67505df1fb7e7bf9a441a83db4f29877c34a3624c5aef758e2d4fbe27a8.10264e4e.png","alt":"Components CSS classes screenshot","withLightbox":false,"width":"500px","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example---css-variables-with-freeform-css-in-js","__idx":5},"children":["Example - CSS variables with freeform CSS-in-JS"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"Worldpay.components.init({\n  // ...other config\n  styles: {\n    \":root\": {\n      \"--color-primary\": \"blue\";\n    },\n    \".Item__label\": {\n      \"font-size\": \"24px\"\n    },\n    \".Item__sepa .Item__formContainer\": {\n      \"background\": \"orange\"\n    }\n  }\n})\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"client-hosted-button","__idx":6},"children":["Client-hosted button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can disable the SDK-hosted button and use triggers and lifecycle hooks to understand your customer's actions."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example","__idx":7},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"Worldpay.components.init({\n  // ...other config\n  advancedConfiguration: {\n    hideSubmitButton: true\n  }\n})\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"additional-fields","__idx":8},"children":["Additional fields"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can specify what information the SDK should collect from your customer."," ","The SDK only displays the applicable fields for the selected APM, based on both your request and the APM's requirements"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-1","__idx":9},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"Worldpay.components.init({\n  // ...other config\n  advancedConfiguration: {\n    additionalFields: [\n      \"name\",\n      \"email\",\n      \"phone\",\n      \"shippingAddress\",\n      \"billingAddress\",\n      \"accountHolderName\",\n      \"dateOfBirth\",\n      \"identityDocuments\"\n    ]\n  }\n})\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"field-mapping-displayed-to-your-customer","__idx":10},"children":["Field mapping (displayed to your customer)"]},{"$$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":["\"name\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Displays \"First Name\" and \"Last Name\"."]}]},{"$$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":["Displays \"Email Address\"."]}]},{"$$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":["Displays \"Telephone Number\"."]}]},{"$$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":["Displays grouped fields:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[" \"First Name\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[" \"Last Name\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["\"Email Address\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["\"Address line 1\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["\"Address line 2 (optional)\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["\"Address line 3 (optional)\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["\"City\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["\"ZIP/Postal Code\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["\"State/County\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[" \"Country\""]}]}]}]},{"$$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":["Displays grouped fields: ",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["\"Address line 1\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[" \"Address line 2 (optional)\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[" \"Address line 3 (optional)\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[" \"City\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[" \"ZIP/Postal Code\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[" \"State/County\""]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[" \"Country\""]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"accountHolderName\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Displays \"Account Holder Name\"."]}]},{"$$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":["Displays \"Date of Birth\"."]}]},{"$$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":["Displays \"CPF/CNPJ\"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The mapping between the fields displayed to your customer in the SDK and the fields required by the APMs API is done during payment submission. This ensures that all collected information is correctly formatted and transmitted to the payment provider according to their specifications."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"triggers-and-lifecycle-hooks","__idx":11},"children":["Triggers and lifecycle hooks"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can programmatically interact with the payment UI, such as submitting forms or selecting specific payment methods without direct user action, or displaying QR codes for 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":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$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":["select"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Selects a payment method using a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method"]}," parameter."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submit"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Submits the payment form programmatically."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["continue"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Accepts ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data"]}," (generated via a server-side call to the APM service) and allows the SDK to display the next available step for the selected payment method. ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Note:"]}," Only applicable for QR code-specific payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["resetProcessing"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Resets the SDK's processing state (clears the overlay, and re-enables interactivity)."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-2","__idx":12},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"const components = Worldpay.components.init(config)\n\ncomponents.select('swish')\n\ncomponents.submit()\n\n// WeChat Pay QR code flow\ncomponents.continue('wechatpay', {\n    qrCode: 'iVBORw0KGgoAAAANSUhEUgAABbQAAAW0AQ...'\n})\n\n// Pix flow with QR and transaction code\ncomponents.continue('pix', {\n    qrCode: 'iVBORw0KGgoAAAANSUhEUgAABbQAAAW0AQ...',\n    transactionCode: '00020101021226930014br.gov.bcb.pix2571qrcode-h.pix.celcoin.com.br/...',\n})\n\n// Swish QR code flow\ncomponents.continue('swish', {\n    qrCode: 'iVBORw0KGgoAAAANSUhEUgAABbQAAAW0AQ...'\n})\n\n// Swish phone notification flow\ncomponents.continue('swish') \n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Lifecycle hooks enable you to respond to various stages of the payment UI, attach custom interactivity, and handle events such as loading, selection, success, or errors."]},{"$$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":"Type"},"children":["Type"]},{"$$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":["onLoad"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when the payment UI is loaded."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSelect"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when a payment method is selected (with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selector"]}," parameters)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onSuccess"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when the form is successfully submitted (with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["session"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method"]}," parameters)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Called when a submission fails (with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selector"]}," parameters)."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"multi-initialization","__idx":13},"children":["Multi-initialization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can initialize and embed the SDK multiple times on the same webpage."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"handling-apms-qr-code-or-phone-notification-flows-pix-wechat-pay-swish","__idx":14},"children":["Handling APMs QR code or phone notification flows (Pix, WeChat Pay, Swish)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Some Alternative Payment Methods (APMs) require an additional customer step after the payment is submitted. Pix and WeChat Pay use a QR code flow. Swish supports both QR code and phone notification flows."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"qr-code-flow-pix-wechat-pay-swish","__idx":15},"children":["QR code flow (Pix, WeChat Pay, Swish)"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Submit the session to the APMs API and receive QR data:"]}," ","For QR-enabled methods, the APMs API response includes a populated ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redirect"]}," parameter containing QR-code data."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Render the QR step in the SDK:"]}," ","Pass the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redirect"]}," payload to the SDK using ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/checkout-components/sdk-reference#triggers"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["continue"]}]}," method. Example: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["components.continue('swish', {  qrCode: 'iVBORw0KGgoAAAANSUhEUgAABbQAAAW0AQ...' })"]}," The hosted iframe displays the QR code."]}]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/access/assets/swish-qr.2ee63f08488a40b061ebe5e46a66504e2bc2aa17e3563598525926cfcaa24f4f.10264e4e.png","alt":"Components Swish qr code example","withLightbox":false,"width":"500px","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":3},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Customer completes payment externally:"]}," ","Your customer scans the QR code using their mobile device and completes the payment in the provider app."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"phone-notification-flow-swish","__idx":16},"children":["Phone notification flow (Swish)"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Submit the session to the APMs API and check ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redirect"]},":"]}," ","If ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["redirect"]}," is empty, your customer chose the Swish phone notification flow."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Start the waiting step in the SDK:"]}," ","Call ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/checkout-components/sdk-reference#triggers"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["continue"]}]}," with no payload (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["components.continue('swish')"]},"). The SDK shows a waiting screen with an 8-minute countdown."]}]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/access/assets/swish-mobile.a0d7c1d79e57226afeff33e8ed229015b5835f10dd844e013c6c387693091e3e.10264e4e.png","alt":"Components Swish mobile example","withLightbox":false,"width":"500px","align":"center"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":3},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Customer confirms in Swish app:"]}," ","Your customer receives a phone notification and approves the transaction in the Swish app before the countdown expires."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"status-handling-and-redirection","__idx":17},"children":["Status handling and redirection"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Monitor payment status:"]}," ","While your customer completes the provider step, poll the status using the relevant API endpoint or consume webhook events."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Redirect on terminal result:"]}," ","After success or failure is confirmed, redirect your customer to your final merchant-hosted page (for example, order confirmation or error page)."]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Note"},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["The SDK is responsible for rendering the post-submit step in the iframe (QR display or Swish waiting screen)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Payment status checks and final redirection must be handled by you."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Always verify the payment status before showing a final outcome to your customer."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"processing-recurring-payments-with-apms","__idx":18},"children":["Processing recurring payments with APMs"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Checkout SDK supports Alternative Payment Methods (APMs) that allow for recurring payments. This includes Klarna (recurring), iDEAL, and SEPA. The following steps outline how to use the SDK for both initial and subsequent recurring payment transactions:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Initial payment data collection:"]}," ","Use the SDK to collect your customer's payment details and initiate the first transaction as you would for a standard payment. The SDK will securely capture all required data for the APM."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Storing recurring payment data:"]}," ","After the initial transaction is processed, Worldpay generates and stores the necessary information (such as payment tokens or mandates) required for future use."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Retrieving data for subsequent payments:"]}," ","For any subsequent payment, you don't need to collect your customer's payment details again. Instead, retrieve the mandatory data for the recurring payment from our Events service.",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["use the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/events/"},"children":["Events API"]}," to listen for the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["token.created"]}," event"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["the event payload contains the payment token or other details that you can use to process future payments without further customer interaction"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Processing subsequent payments:"]}," ","Use the retrieved data to initiate subsequent payments through our ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/apms/"},"children":["APMs API"]},". You only use the SDK for the initial collection of payment details."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"security-and-compliance-considerations","__idx":19},"children":["Security and compliance considerations"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The hosted iframe ensures sensitive payment data never touches your servers."," ","All communications between the SDK, iframe, and Worldpay are encrypted."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"browser-support","__idx":20},"children":["Browser support"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Our components work with all recent versions of major browsers"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Chrome"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Edge"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Firefox"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Safari"]}]}]},"headings":[{"value":"Optional configuration","id":"optional-configuration","depth":1},{"value":"Customization","id":"customization","depth":2},{"value":"Themes","id":"themes","depth":3},{"value":"Elements","id":"elements","depth":3},{"value":"Styling","id":"styling","depth":3},{"value":"Example - CSS variables with freeform CSS-in-JS","id":"example---css-variables-with-freeform-css-in-js","depth":4},{"value":"Client-hosted button","id":"client-hosted-button","depth":3},{"value":"Example","id":"example","depth":4},{"value":"Additional fields","id":"additional-fields","depth":3},{"value":"Example","id":"example-1","depth":4},{"value":"Field mapping (displayed to your customer)","id":"field-mapping-displayed-to-your-customer","depth":4},{"value":"Triggers and lifecycle hooks","id":"triggers-and-lifecycle-hooks","depth":3},{"value":"Example","id":"example-2","depth":4},{"value":"Multi-initialization","id":"multi-initialization","depth":3},{"value":"Handling APMs QR code or phone notification flows (Pix, WeChat Pay, Swish)","id":"handling-apms-qr-code-or-phone-notification-flows-pix-wechat-pay-swish","depth":2},{"value":"QR code flow (Pix, WeChat Pay, Swish)","id":"qr-code-flow-pix-wechat-pay-swish","depth":3},{"value":"Phone notification flow (Swish)","id":"phone-notification-flow-swish","depth":3},{"value":"Status handling and redirection","id":"status-handling-and-redirection","depth":3},{"value":"Processing recurring payments with APMs","id":"processing-recurring-payments-with-apms","depth":2},{"value":"Security and compliance considerations","id":"security-and-compliance-considerations","depth":2},{"value":"Browser support","id":"browser-support","depth":2}],"frontmatter":{"seo":{"title":"Optional configuration"}},"lastModified":"2026-05-22T08:01:08.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/checkout-components/optional-config","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}