{"templateId":"markdown","versions":[{"version":"v1","label":"v1 (latest)","link":"/products/hosted-payment-pages/iframe","default":true,"active":true,"folderId":"089b7d23"}],"sharedDataIds":{"sidebar":"sidebar-products/hosted-payment-pages/sidebars.yaml","current-catalog-info":"current-catalog-info-/products/hosted-payment-pages/openapi"},"props":{"metadata":{"markdoc":{"tagList":["partial","admonition","code-snippet"]},"custom_product":"Hosted Payment Pages","type":"markdown"},"seo":{"title":"Iframe","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":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Last updated"]},": 14 June 2025 | ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/hosted-payment-pages/changelog/"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Change log"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"iframe","__idx":0},"children":["Iframe"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use our JavaScript library to embed Hosted Payment Pages inside an iframe (inline frame) on your pages."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is particularly useful if you want to display content around the payment pages, keep the customer on your website or"," ","blend our payment pages into your existing website."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"basic-integration","__idx":1},"children":["Basic integration"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"step-1-embed-our-javascript-library","__idx":2},"children":["Step 1: Embed our JavaScript library"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the following snippet to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<head></head>"]}," tags of your website:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"<script src=\"https://payments.worldpay.com/resources/hpp/integrations/embedded/js/hpp-embedded-integration-library.js\"></script>\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"step-2-create-the-target-container","__idx":3},"children":["Step 2: Create the target container"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a container on your website, where the iframe is injected:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"<!-- html container element -->  \n<div id=\"custom-html\"></div>\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Warning"},"children":[" Do not present Hosted Payment Pages within an additional iframe which isn’t generated by our"," ","library. Doing so results in an error message (X-Frame = DENY) and non-uniform integration."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"step-3-invoke-our-javascript-library","__idx":4},"children":["Step 3: Invoke our JavaScript library"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a new instance of our JavaScript library and invoke the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setup"]}," function, passing options to setup and customize"," ","your iframe integration."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"full-example","__idx":5},"children":["Full example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"file":"./code/basic-iframe.html","language":"json","header":{"controls":{"copy":{}}},"lang":"json","source":"<!DOCTYPE html>\n<html>\n    <head>\n        <title>My test page</title>\n\n        <!-- Add the Hosted Payment Pages JavaScript library to your page -->\n        <script src=\"https://payments.worldpay.com/resources/hpp/integrations/embedded/js/hpp-embedded-integration-library.js\"></script>\n    </head>\n\n    <body>\n        <div>This is my test page as a merchant</div>\n\n        <!-- Add a container for where the Hosted Payment Pages iframe is injected -->\n        <div id=\"custom-html\"></div>\n\n        <!-- Use JavaScript to inject the iframe into the container -->\n        <script type=\"text/javascript\">\n            // Your custom options for injecting the iframe\n            var customOptions = {\n                url: 'https://payments.worldpay.com/app/hpp/integration/transaction/37d9d008-d649-4458-a7cd-c07a65debc54?ref=1718718877578485&cs=JWNvp6kQ0Xsrca_q',\n                type: 'iframe',\n                inject: 'onload',\n                target: 'custom-html',\n                accessibility: true,\n                debug: false,\n            };\n            // Initialize the library and pass options\n            var libraryObject = new WPCL.Library();\n            libraryObject.setup(customOptions);\n        </script>\n    </body>\n</html>"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"javascript-parameters","__idx":6},"children":["JavaScript parameters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Below is a full list of parameters you can pass into the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["setup"]}," function, some are mandatory. Others are used to customize the flow and presentation of your iframe / lightbox integration:"]},{"$$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":"M/O/C"},"children":["M/O/C"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$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":["url"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["✅"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["n/a"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The Hosted Payment Pages session URL, sent in the response of your initial request. The URL is for the Hosted Payment Pages."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["target"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["✅"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["n/a"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ID for the element into which the iframe is injected."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["type"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["lightbox"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Indicates whether you are using an iframe or lightbox integration. Possible values: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lightbox"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["debug"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["false"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["When set to true, debug messages are written to the console."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["resultCallback"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["JavaScript Function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["n/a"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The function to call when the payment process is complete. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#callbacks"},"children":["Callbacks"]}," for information."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flowCallback"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["JavaScript Function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["n/a"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Sends back what page is being shown. See ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#callbacks"},"children":["Callbacks"]}," for information."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["disableScrolling"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["false"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["If set to \"true\", will stop the checkout page from scrolling."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customisation"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["n/a"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Describes the styling of the page. Possible options can be found ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developerengine.fisglobal.com/apis/wpg/reference/customisationoptions"},"children":["here"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"iframe-only-parameters","__idx":7},"children":["Iframe-only parameters"]},{"$$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":"M/O/C"},"children":["M/O/C"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$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":["inject"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Controls how the iframe is injected. Possible options:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onload"]}," - occurs on page load"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["immediate"]}," - immediately inject the iframe"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}]}]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"We recommend to use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onload"]}," as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["default"]}," will be removed in the future.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Depending on the web development framework you use, you may need to choose \"immediate\" instead of \"onload\"",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hideContent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hides the iframe."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"lightbox-only-parameters","__idx":8},"children":["Lightbox-only parameters"]},{"$$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":"M/O/C"},"children":["M/O/C"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Default"},"children":["Default"]},{"$$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":["trigger"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["✅"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["n/a"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ID for the element that triggers the lightbox. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Info"},"children":[" You must provide an ID for the trigger setting."]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lightboxMaskOpacity"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["50"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The custom opacity (%) of the lightbox. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," Possible values: ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," 0-100"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lightboxMaskColor"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["#000000"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The custom color (hex value) for the close button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accessibility"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["❌"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["false"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Controls user access to content outside of the lightbox. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," When set to true, the user can access content in the lightbox only. Access to the parent webpage is prevented. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Info"},"children":[" To prevent customers from inadvertently leaving the payment pages, we recommend that you set accessibility to \"true\"."]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," When set to \"false\", the user can access content in the lightbox and also in the parent webpage."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"library-functions","__idx":9},"children":["Library functions"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"destroy","__idx":10},"children":["Destroy"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["destroy"]}," function to clean up your lightbox/iframe."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"var libraryObject = new WPCL.Library();  \n...\nlibraryObject.destroy();\n\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"callbacks","__idx":11},"children":["Callbacks"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"flow-callback","__idx":12},"children":["Flow callback"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Allows you to pass your own JavaScript function to our library, which is invoked when a page loads."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Info"},"children":[" Currently only supports card details page."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"var flowCallbackFunction = function(result) {\n    alert(result.page);\n};\n\nvar customOptions = {\n    ...\n    flowCallback: flowCallbackFunction\n    ...\n}\n\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"result-callback","__idx":13},"children":["Result callback"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A result callback allows your own JavaScript function to be invoked at the end of the payment flow, or when a payment"," ","attempt is made."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can use this as an alternative to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["result URLs"]}," (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["successURL"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["failureURL"]}," etc.), by specifying"," ","a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["resultCallback"]}," option. Therefore, leave"," ","such result URL options unspecified as they have higher precedence."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following function uses the order status to redirect to different pages, appending gateway parameters to the end of the URL:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"function(responseData) {\n   var redirectUrl;\n   var status = responseData.order.status;\n   switch (status) {\n     case \"success\":\n       redirectUrl=\"https://example.com/success\";\n       break;\n     case \"failure\":\n       redirectUrl=\"http://example.com/failure\";\n       break;\n     case \"error\":\n       redirectUrl=\"https://example.com/error\";\n       break;\n     default:\n       redirectUrl=\"http://example.com/unknown\";\n   }\n   window.location = redirectUrl;\n }\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"data-structure","__idx":14},"children":["Data structure"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your callback function should take a single parameter, which is passed as a JSON object. This contains details"," ","about an attempted order/payment."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["It has the following structure:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["order",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["orderKey - the order key used to process the payment"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["status - the status of the payment. It is one of the following:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["success - the payment is successful"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["pending - the payment is pending"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["failure - the payment has failed"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["error - a gateway error has occurred"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["exception - a problem has occurred during the customer's session"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["cancelled_by_shopper - the customer has cancelled the order"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["session_expired - the customer's session has expired"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["error",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["referenceNumber - if an exception occurred this includes a unique reference number, otherwise this is not defined"]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["gateway - parameters sent by the payment gateway, currently unused"]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"{\n   \"order\":{\n     \"orderKey\":\"MERCHANT1^1234567890\",\n     \"status\":\"success\"\n   },\n   \"error\": null,\n   \"gateway\": null\n }\n"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"payment-status","__idx":15},"children":["Payment status"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To manage your payments we recommend using our ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/hosted-payment-pages/webhooks"},"children":["webhooks"]}," to receive the latest status of your payment to your server in real-time."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"managing-your-payments","__idx":16},"children":["Managing your payments"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Log into your ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://dashboard.worldpay.com"},"children":["Dashboard"]}," to manage your payments. You can:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["view"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["refund"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["your payments."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Next steps"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/hosted-payment-pages/customization"},"children":["Customization"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/hosted-payment-pages/webhooks"},"children":["Add Webhooks"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/products/hosted-payment-pages/testing"},"children":["Testing"]}]}]},"headings":[{"value":"Iframe","id":"iframe","depth":1},{"value":"Basic integration","id":"basic-integration","depth":2},{"value":"Step 1: Embed our JavaScript library","id":"step-1-embed-our-javascript-library","depth":3},{"value":"Step 2: Create the target container","id":"step-2-create-the-target-container","depth":3},{"value":"Step 3: Invoke our JavaScript library","id":"step-3-invoke-our-javascript-library","depth":3},{"value":"Full example","id":"full-example","depth":3},{"value":"JavaScript parameters","id":"javascript-parameters","depth":3},{"value":"Iframe-only parameters","id":"iframe-only-parameters","depth":4},{"value":"Lightbox-only parameters","id":"lightbox-only-parameters","depth":4},{"value":"Library functions","id":"library-functions","depth":2},{"value":"Destroy","id":"destroy","depth":3},{"value":"Callbacks","id":"callbacks","depth":3},{"value":"Flow callback","id":"flow-callback","depth":4},{"value":"Result callback","id":"result-callback","depth":4},{"value":"Data structure","id":"data-structure","depth":4},{"value":"Payment status","id":"payment-status","depth":2},{"value":"Managing your payments","id":"managing-your-payments","depth":2}],"frontmatter":{"seo":{"title":"Iframe"}},"lastModified":"2025-11-26T14:54:42.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/hosted-payment-pages/iframe","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}