{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/js/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"Shift4 object","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":"shift4-object","__idx":0},"children":["Shift4 object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Shift4 object is the main entry point to all Shift4.js functionalities. Create one by ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/js#shift4publickey-options"},"children":["initializing Shift4.js"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"createcomponenttype-options--","__idx":1},"children":["createComponent(type, options = {})"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a new component of the specified type."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"parameters","__idx":2},"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 be created. It could be a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["card"]}," - a single component to collect all card details. To collect card details in separate fields, use ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/js/components#createcomponenttype-options--"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ComponentGroup.createComponent()"]}]},"."]},{"$$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","__idx":3},"children":["Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/js/components#component-object"},"children":["Component object"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example","__idx":4},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"var card = shift4.createComponent(\"card\");\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"createcomponentgroup","__idx":5},"children":["createComponentGroup()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create a new grouping object that will be used to create multiple related components, such as number, expiry and cvc components that will be used together to collect details for a single card."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"result-1","__idx":6},"children":["Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/js/components#componentgroup-object"},"children":["ComponentGroup object"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-1","__idx":7},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"var components = shift4.createComponentGroup();\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"createtokencomponent-data--","__idx":8},"children":["createToken(component, data = {})"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Tokenize card data from a given component or component group by sending it to the \"create token\" API method."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"parameters-1","__idx":9},"children":["Parameters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["component"]}]}," | Component | ComponentGroup"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A single component or a group of components from which sensitive card data will be tokenized."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data"]}]}," | object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Additional data that will be included in the tokens API request. The \"create token\" API method lists all permitted keys."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For security reasons, this parameter cannot be used to send the following fields in the request: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["number"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expMonth"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expYear"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvc"]},". Values of these fields must be collected using components."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"result-2","__idx":10},"children":["Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Promise object"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-2","__idx":11},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"var card = shift4.createComponent(\"card\");\n\nfunction onFormSubmit() {\n\tshift4.createToken(card)\n\t\t\t.then(tokenCreatedCallback)\n\t\t\t.catch(errorCallback);\n}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"verifythreedsecurerequest","__idx":12},"children":["verifyThreeDSecure(request)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Starts a 3D Secure process."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Depending on the card and the card's issuer, this may result in the 3D Secure challenge being displayed in an iframe or popup window."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"parameters-2","__idx":13},"children":["Parameters"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["request"]}]}," | object"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The request object will be sent to the API. The following keys are allowed:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["card"]}," (string) - a token identifier (generated by the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#createtokencomponent-data--"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createToken()"]}]}," method) or a card identifier (created using the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/api/shift4-gateway/cards/createcard"},"children":["Cards API"]},")."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amount"]}," (integer) - the amount in minor units of the given currency (for example, 10€ is represented as \"1000\" and 10¥ is represented as \"10\"), which must match the value that will be used to create a Charge using API"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["currency"]}," (string) - the currency, represented as a three-letter ISO currency code, must match the value later used to create a Charge using API"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["merchantAccountId"]}," (string, optional) - the merchant account identifier that will be used to complete the 3D Secure process"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["challengeIndicator"]}," (string, optional) - this field is used to express preference when it comes to the 3DS flow. Possible values:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["no_preference"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["no_challenge_requested"]}," - merchant prefers frictionless flow"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["challenge_requested_requestor_preference"]}," - merchant strongly prefers challenge flow"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["challenge_requested_mandate"]}," - merchant strongly prefers challenge flow due to PSD2 requirements"]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"result-3","__idx":14},"children":["Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Promise object"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"example-3","__idx":15},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"function tokenCreatedCallback(token) {\n\tvar request = {\n\t\tcard: token.id,\n\t\tamount: 2499,\n\t\tcurrency: 'USD',\n\t};\n\n\tshift4.verifyThreeDSecure(request)\n\t\t.then(threeDSecureCompletedCallback)\n\t\t.catch(errorCallback);\n}\t\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"next-steps","__idx":16},"children":["Next steps"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/js/components"},"children":["Components"]}," -- mount components and collect card details."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/js/styling"},"children":["Styling"]}," -- customize how components look."]}]}]},"headings":[{"value":"Shift4 object","id":"shift4-object","depth":1},{"value":"createComponent(type, options = {})","id":"createcomponenttype-options--","depth":2},{"value":"Parameters","id":"parameters","depth":4},{"value":"Result","id":"result","depth":4},{"value":"Example","id":"example","depth":4},{"value":"createComponentGroup()","id":"createcomponentgroup","depth":2},{"value":"Result","id":"result-1","depth":4},{"value":"Example","id":"example-1","depth":4},{"value":"createToken(component, data = {})","id":"createtokencomponent-data--","depth":2},{"value":"Parameters","id":"parameters-1","depth":4},{"value":"Result","id":"result-2","depth":4},{"value":"Example","id":"example-2","depth":4},{"value":"verifyThreeDSecure(request)","id":"verifythreedsecurerequest","depth":2},{"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":"Shift4 object","description":"The main entry point to all Shift4.js functionality, exposing createComponent, createComponentGroup, createToken and verifyThreeDSecure.","seo":{"title":"Shift4 object"}},"lastModified":"2026-08-19T07:05:18.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/js/shift4-object","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}