{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/js/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Components","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":"components","__idx":0},"children":["Components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Component"]}," securely collects one piece of sensitive information, such as a card number or CVC. When several components collect details for a single card, a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["ComponentGroup"]}," binds them together."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/js/shift4-object#createcomponenttype-options--"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Shift4.createComponent()"]}]}," for a single component that collects all card details, or ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/js/shift4-object#createcomponentgroup"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Shift4.createComponentGroup()"]}]}," to collect them in separate fields."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"component-object","__idx":1},"children":["Component object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Component object is used to securely collect sensitive information (like card number or cvc)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mountselector","__idx":2},"children":["mount(selector)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Mounts component to placeholder tag located by given selector."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"parameters","__idx":3},"children":["Parameters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selector"]}]}," | string | Element"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Either CSS selector or DOM element that will be used as a mounting point."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"result","__idx":4},"children":["Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Component object on which this method was called"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example","__idx":5},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"var components = shift4.createComponentGroup();\nvar number = components.createComponent(\"number\").mount(\"#number\");\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"clear","__idx":6},"children":["clear()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Removes any current value from a component."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"result-1","__idx":7},"children":["Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Component object on which this method was called."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-1","__idx":8},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"var card = shift4.createComponent(\"card\");\n\ncard.clear();\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"componentgroup-object","__idx":9},"children":["ComponentGroup object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When multiple components are required to collect card details for a single card, the ComponentGroup object is used to group them."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"automountselector","__idx":10},"children":["automount(selector)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Automatically search all tags nested under the tag located by the given selector and create components on all tags with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-shift4"]}," attribute. The value of that attribute is used to determine the type of the component."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"parameters-1","__idx":11},"children":["Parameters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selector"]}]}," | string | Element"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Either CSS selector or DOM element that will be used as a starting point when searching for tags with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-shift4"]}," attribute."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"result-2","__idx":12},"children":["Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["ComponentGroup object on which this method was called."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-2","__idx":13},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"var components = shift4.createComponentGroup().automount(\"#payment-form\");\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"createcomponenttype-options--","__idx":14},"children":["createComponent(type, options = {})"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a new component of a given type and assigns it to this component group."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"parameters-2","__idx":15},"children":["Parameters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["type"]}]}," | string"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Component type to create. It could be one of the following types:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["number"]}," - used to collect card numbers"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expiry"]}," - used to collect card expiration dates (both month and year)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvc"]}," - used to collect card security code"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expiryMonth"]}," - used to collect card expiration month"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expiryYear"]}," - component for collecting the card's expiration year"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["options"]}]}," | object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Plain object with additional options."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"result-3","__idx":16},"children":["Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#component-object"},"children":["Component object"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-3","__idx":17},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"var components = shift4.createComponentGroup();\n\nvar number = components.createComponent(\"number\");\t\t\t\t\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"next-steps","__idx":18},"children":["Next steps"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/js/styling"},"children":["Styling"]}," -- customize how components look."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/js/shift4-object"},"children":["Shift4 object"]}," -- tokenize the collected card details."]}]}]},"headings":[{"value":"Components","id":"components","depth":1},{"value":"Component object","id":"component-object","depth":2},{"value":"mount(selector)","id":"mountselector","depth":3},{"value":"Parameters","id":"parameters","depth":4},{"value":"Result","id":"result","depth":4},{"value":"Example","id":"example","depth":4},{"value":"clear()","id":"clear","depth":3},{"value":"Result","id":"result-1","depth":4},{"value":"Example","id":"example-1","depth":4},{"value":"ComponentGroup object","id":"componentgroup-object","depth":2},{"value":"automount(selector)","id":"automountselector","depth":3},{"value":"Parameters","id":"parameters-1","depth":4},{"value":"Result","id":"result-2","depth":4},{"value":"Example","id":"example-2","depth":4},{"value":"createComponent(type, options = {})","id":"createcomponenttype-options--","depth":3},{"value":"Parameters","id":"parameters-2","depth":4},{"value":"Result","id":"result-3","depth":4},{"value":"Example","id":"example-3","depth":4},{"value":"Next steps","id":"next-steps","depth":2}],"frontmatter":{"title":"Components","description":"The Component object securely collects sensitive information such as a card number or CVC. The ComponentGroup object groups several components that collect details for a single card.","seo":{"title":"Components"}},"lastModified":"2026-08-19T07:05:18.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/js/components","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}