{"templateId":"markdown","versions":[{"version":"v1","label":"v1 (latest)","link":"/products/hosted-payment-pages/styles","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","badge","admonition"]},"custom_product":"Hosted Payment Pages","type":"markdown"},"seo":{"title":"Styles","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":"styles","__idx":0},"children":["Styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Badge","attributes":{"size":"small","fontWeight":"bold","color":"var(--wp-colour-black)","mt":"0rem","mb":"0.5rem","px":"1rem","py":"0.5rem","borderRadius":"6rem","bg":"#A5EFFF"},"children":["SMB (Worldpay eCommerce)"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can optimize the look and feel of your payment pages by uploading your own cascading stylesheet (CSS), font and logo."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"edit-and-upload-styles","__idx":1},"children":["Edit and upload styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We provide a Worldpay logo and an example Cascading Stylesheet (CSS) as default. Our public CSS is an example stylesheet that you can customize to change the look and feel of your payment pages."]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To edit logos, cascading stylesheets (CSS) and font files go to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["\"Styles\""]}," in the left hand menu of your HPP Designer."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To upload your logo, click on the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Logo"]}," menu option."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To upload your stylesheet, click on the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Stylesheet"]}," menu option."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To upload your font, click on the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Font"]}," menu option."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To upload files, you can either drag the file(s) into the box or click on the 'Browse Files' to upload the file(s)."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/access/assets/uploadasset.81ffec5348ea02d153b4617920cdda8c93b0595dbc17c56166f1b3ccb17dfbb5.de4c3ec0.jpg","alt":"Browse Files button screenshot"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"stylesheet","__idx":2},"children":["Stylesheet"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Select a stylesheet by clicking on the corresponding row from the table"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The selected stylesheet is outlined with a blue border. You can view the updated style in the preview screen on the right-hand side"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/access/assets/selectstylesheet.e7f064e8ba57e4d846dabb9b1438c10f401a0781428cbcb2337f75a3aa2bbbee.de4c3ec0.jpg","alt":"Stylesheet page screenshot"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"review-css-errors","__idx":3},"children":["Review CSS errors"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The CSS error messaging is currently displaying at the top of the page. This error message provides line item details of the identified errors, which can help you to troubleshoot issues more effectively."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/access/assets/csserror.9389f7eb3fce2f3431f705d52b21b14d8f989f35659ed404d7910885e8768182.de4c3ec0.jpg","alt":"CSS error message screenshot"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"font","__idx":4},"children":["Font"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can upload your font and specify the style, weight, and stretch."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To apply a font to specific areas of the page or use multiple fonts, we recommend you assign a \"Family Name\" to each font. This allows you to refer to fonts in your stylesheet using the \"font-family\" CSS property."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can use an alternative font that doesn't include Latin characters. If you use this alternative font and the payment page needs a Latin character, the payment page uses the font specified within the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font-family"]}," property. If there is no font specified within the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["font-family"]}," property, the payment page uses the default Hosted Payment Pages font."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/access/assets/fontsnew.7db2f7da4affa7afeff7905f93b898f7fc28eccd809d6beeec6734552b47ee89.de4c3ec0.jpg","alt":"Optional font parameters screenshot"},"children":[]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Select or unselect the font by clicking on the relevant tile in the tile list. To use multiple font styles throughout your stylesheet, apply family names to individual styles and then select the names you require from the font tile list."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The selected font is outlined by a blue border. You can view the updated font in the preview screen on the right-hand side. Currently, only single fonts are visible in the preview window."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/access/assets/selectfont.eef08ef4ed1dbc0a9ad249170b3aeab81b942cd457c2ec780a243707f690b55a.de4c3ec0.jpg","alt":"Font preview pane screenshot"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"logo","__idx":5},"children":["Logo"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Choose a logo by clicking on the relevant tile in the tile list."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The selected logo is outlined by a blue border. You can view the updated logo in the preview screen on the right-hand side."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/access/assets/selectlogo.21ff70e06333c2c585841a7fdeabcd3bc6dce1357a29a9238b508a0ca5864933.de4c3ec0.jpg","alt":"Logo preview pane screenshot"},"children":[]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The stylesheet, font or logo you selected automatically apply to the Try environment."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To go back to the Worldpay look and feel, you must select the Worldpay Logo and Worldpay CSS. For the font, you can deselect the chosen font."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"restrictions-and-properties","__idx":6},"children":["Restrictions and properties"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The stylesheet and logo files that you upload must meet certain criteria."]},{"$$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":"Asset type"},"children":["Asset type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Maximum dimensions"},"children":["Maximum dimensions"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Allowed file type"},"children":["Allowed file type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Maximum file size"},"children":["Maximum file size"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Logo"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Width: 700 pixels"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Height: 200 pixels"]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[".gif"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[".jpg"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[".jpeg"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[".png"]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["512KB"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Stylesheet"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["NA"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".css"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["30KB"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Font"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["NA"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[".woff"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["512KB"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can find full restrictions and available properties in our ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://payments.worldpay.com/resources/hpp/customisation/css/public.css"},"children":["public CSS file"]},"."]}]},"headings":[{"value":"Styles","id":"styles","depth":1},{"value":"Edit and upload styles","id":"edit-and-upload-styles","depth":2},{"value":"Stylesheet","id":"stylesheet","depth":2},{"value":"Review CSS errors","id":"review-css-errors","depth":3},{"value":"Font","id":"font","depth":2},{"value":"Logo","id":"logo","depth":2},{"value":"Restrictions and properties","id":"restrictions-and-properties","depth":4}],"frontmatter":{"seo":{"title":"Styles"}},"lastModified":"2025-12-10T09:41:02.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/products/hosted-payment-pages/styles","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}