{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/js/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Styling","meta":[{"name":"robots","content":"noindex, nofollow"},{"name":"pingdom","content":"sh3MDv8mJpWhCWSTdGtN"}]},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"styling","__idx":0},"children":["Styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can customize the visuals of Shift4 components on your webpage. In order to do that 3 new attributes can be set in options. The options are applicable either to a single component or a component group. They are merged but only for top level attributes, ie.: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["finalOptions = {...componentGroupOptions, ...componentOptions}"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["New attributes added to the options are:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["height"]}," - can be used to change height of component's iframe"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]}," - can be used to change styles; has two nested attributes:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]}," - used to defined base styles;"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalid"]}," - used to define styles when input has invalid value (for example invalid card number)."]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fonts"]}," - can be used to add additional fonts (maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["@font-face"]}," from CSS), must be a list of objects with following attributes:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["family"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["font-family"]}," from CSS;"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["style"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["font-style"]}," from CSS;"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["weight"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["font-weight"]}," from CSS;"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["display"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["font-display"]}," from CSS;"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["src"]}," from CSS;"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unicodeRange"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["unicode-range"]}," from CSS."]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For defining styles following attributes can be used:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["color"]}," from CSS;"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["backgroundColor"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["background-color"]}," from CSS;"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFamily"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["font-family"]}," from CSS;"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["font-size"]}," from CSS;"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]}," - maps to ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["font-weight"]}," from CSS."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Additionally following pseudo classes are also supported:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":hover"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":focus"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["::placeholder"]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"example","__idx":1},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"let shift4 = Shift4(\"pu_test_WVMFC9GFuvm54b0uorifKkCh\");\n\nlet options = {\n  height: '38px',\n  style: {\n    base: {\n      color: '#44d',\n      fontSize: '30px',\n      fontFamily: 'Orbitron',\n      '::placeholder': {\n        color: '#99f'\n      },\n    },\n    invalid: {\n      color: '#f00',\n      '::placeholder': {\n        color: '#f99'\n      },\n    }\n  },\n  fonts: [{\n    family: 'Orbitron',\n    style: 'normal',\n    weight: 400,\n    display: 'swap',\n    src: \"url(https://fonts.gstatic.com/s/orbitron/v25/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');\"\n  }]\n};\n\nlet components = shift4.createComponentGroup(options);\nlet number = components.createComponent(\"number\").mount(\"#number\");\nlet expiry = components.createComponent(\"expiry\").mount(\"#expiry\");\nlet cvc = components.createComponent(\"cvc\").mount(\"#cvc\");\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createComponent()"]}," method accepts an optional second argument with options for that single component - ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createComponent(\"expiry\", { height: '48px' })"]},". The placeholder to render into is never passed to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createComponent()"]},"; it is always given to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mount()"]},"."]}]},"headings":[{"value":"Styling","id":"styling","depth":1},{"value":"Example","id":"example","depth":2}],"frontmatter":{"title":"Styling","description":"Customize the visuals of Shift4 components using the height, style and fonts options, including supported CSS properties and pseudo-classes.","seo":{"title":"Styling"}},"lastModified":"2026-10-21T07:31:06.909Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/js/styling","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}