{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"Element instance","description":"Getting more people from the pricing page to the thank you page. And more renewals paid.","siteUrl":"https://www.rebilly.com","image":"/assets/rebillysocial.94fb32fc280c9e84b963c440ec462771d25f4e6fdaaa6c59de41e8135113b46b.db81178d.png","lang":"en-US","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"element-instance","__idx":0},"children":["Element instance"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When an element is mounted you can cache its instance into a variable and use it to listen for additional events as the customer interacts the element."," ","This applies only to payment card and bank account fields."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// mount a combined card element on a container `div`\nvar card = Framepay.card.mount('#card');\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"elementon","__idx":1},"children":["element.on()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["on()"]}," method to attach specific handlers to events."," ","These handlers will be triggered when the customer interacts with the card element."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The method accepts two arguments:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["eventName"]},": a string that defines the event name to which the handler will be attached to"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["handler"]},": a function to run when the event is triggered by the customer interaction"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"element.on('ready', function() {\n    console.log('Card element is ready to use!');\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"element.on('error', function() {\n    // element automatically unmounted and destroyed\n    console.log('Card mount error!');\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"events","__idx":2},"children":["Events"]},{"$$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":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Event name"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":""},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"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":["ready"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Triggered after the element is mounted and the field has fully loaded into view."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Triggered in case if the element cannot mount."," ","See ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-global-reference#framepayon"},"children":["Framepay.on"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["change"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Triggered when the element has changed after the customer's input."," ","Use this event to detect validation errors in the element."," ","The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["change"]}," event handler is the only one to receive an argument from the element."," ","The argument passed to the handler function will expose these properties:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valid"]},": A boolean that is present if the element contains valid data (or potentially valid data while the field is focused)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["completed"]},": A boolean that is present if the element has valid and completed data."," ","See ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/examples/framepay-example-disabled-submit.html"},"children":["disabled submit button example"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["source"]},": A string indicating the source of the event."," ","Returns the type of the element used."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error"]},": An object that is present if the element has invalid data."," ","Exposes the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error.code"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error.message"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error.type"]}," properties."]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focus"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Triggered when the element gains focus."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["blur"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Triggered when the element loses focus."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"example","__idx":3},"children":["Example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example, the submit button is enabled only when the combined card field is ready and error messages are displayed whenever the input becomes invalid."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// the form submit button is disabled by default\nvar submitButton = document.querySelector('#submit-button');\nvar card = Framepay.card.mount('#card');\n\ncard.on('change', function(data) {\n    if (data.error) {\n        document.querySelector('#errors').innerText = error.message;\n    }\n    if(data.completed){\n        // ready to submit\n        submitButton.removeAttribute('disabled');\n    }\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"elementfocus","__idx":4},"children":["element.focus()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focus()"]}," method to focus the element. This is useful to programmatically focus the element on"," ","page load, or when the user clicks a button."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"var element = Framepay.card.mount('#cvv', 'cardCvv');\nelement.focus();\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For combined card fields, you may specify which field to focus on with the second parameter. The target"," ","can be ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardNumber"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiry"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardCvv"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"var element = Framepay.card.mount('#card');\nelement.focus({ target: 'cardCvv' });\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"elementdestroy","__idx":5},"children":["element.destroy()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["destroy()"]}," method to remove the element from the DOM."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"var element = Framepay.card.mount('#mounting-point'); // or any other element\nelement.destroy();\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To re-mount the element you must create a new element."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"var element = Framepay.card.mount('#mounting-point'); // or any other element\nelement.destroy();\n\n// Mount the element again.\nelement = Framepay.card.mount('#mounting-point');\n\n/* * * * * * * * * * * * * * *\n - Do not use the following   *\n - * * * * * * * * * * * * * */\n// element.mount();\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"elementunmount","__idx":6},"children":["element.unmount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["unmount()"]}," method to remove the element from the DOM."," ","You can not use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mount()"]}," method to re-attach the element to the DOM from the reference."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"var element = Framepay.card.mount('#mounting-point'); // or any other element\nelement.unmount();\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Prefer to use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["element.destroy()"]},"."]}]}]},"headings":[{"value":"Element instance","id":"element-instance","depth":1},{"value":"element.on()","id":"elementon","depth":2},{"value":"Events","id":"events","depth":3},{"value":"Example","id":"example","depth":3},{"value":"element.focus()","id":"elementfocus","depth":2},{"value":"element.destroy()","id":"elementdestroy","depth":2},{"value":"element.unmount()","id":"elementunmount","depth":2}],"frontmatter":{"seo":{"title":"Element instance","lang":"en-US"},"redirects":{"/docs/developer-docs/framepay/element/":{},"/docs/content/dev-docs/concept/element/":{},"/docs/content/concepts-and-features/concept/element/":{},"/docs/concepts-and-features/concept/element/":{},"/docs/content/concepts-and-features/concept/element-old/":{}},"excludeFromSearch":true},"lastModified":"2026-01-12T11:16:51.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/element","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}