{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"FramePay reference methods","description":"Learn about the FramePay library reference methods.","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":[]},"keywords":"Developer docs, FramePay"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"framepay-reference-methods","__idx":0},"children":["FramePay reference methods"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This section describes the methods exposed by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay"]}," namespace."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"framepayinitialize","__idx":1},"children":["Framepay.initialize()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this method to initialize the FramePay library with your publishable API key and customize the look and feel of elements."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["It accepts a single ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configuration"]}," object."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// the basic configuration must contain your publishable API key\nFramepay.initialize({\n    publishableKey: 'pk_sandbox_1234567890',\n    organizationId: 'your-organization-id', // no required property\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For an overview of the configuration options, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-configuration-reference"},"children":["configuration reference"]},"."]},{"$$mdtype":"Tag","name":"div","attributes":{"classname":"warning"},"children":["Use your own publishable key",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"\nYou must replace the key `pk_sandbox_1234567890` with your own.\nStart with a sandbox key.\nTo create a publishable key, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://app.rebilly.com/api-keys/add"},"children":["Create an API key"]},".\nA key is specific to either the sandbox or live environment.\n"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configuration"]}," must contain at a ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-configuration-reference#publishablekey"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["publishableKey"]}]}," otherwise an error will be thrown."," ","It can optionally define CSS styles and className names to overwrite the style of the FramePay library."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-configuration-reference#i18n"},"children":["configuration"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// first call\nFramepay.initialize(config);\n\n// where config is\nconst config = {\n    icon: { // icon for combined field\n        display: true // false to hide\n    },\n    classes: {}, // when needed,\n    style: {\n        base: { // shared `base` state\n            color: '#fff', // generic JS property for DOM style\n            '::placeholder': { // access to pseudo-element\n                color: 'gray', // overwrite placeholder color only\n            },\n        },\n        invalid: {\n            color: 'red',\n            '::placeholder': {\n                color: 'firebrick',\n            },\n        },\n    }\n};\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"framepayupdate","__idx":2},"children":["Framepay.update()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this method has the same functionality as the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["initialize"]}," method, but this method will update actual configuration."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"Framepay.update({\n  /* new configuration object */\n});\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The update priority."," ","Any properties which were established and not passed in the new configuration - will stay."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n  locale: Framepay.locale.es,\n  icon: {\n    display: true,\n  },\n  style: {\n    base: {\n      color: '#fff',\n    },\n  },\n});\n\nFramepay.update({ icon: { color: 'red', style: null } });\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The actual Rebilly configuration will be:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"{\n    locale: 'es',\n    icon: {\n        display: true,\n        color: 'red'\n    },\n    style: {} // default value\n}\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"framepayon","__idx":3},"children":["Framepay.on()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this method to subscribe to state changes or errors, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/events"},"children":["Events"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"framepayoff","__idx":4},"children":["Framepay.off()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this method to unsubscribe from state changes or errors, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/events"},"children":["Events"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"framepaycreatetoken","__idx":5},"children":["Framepay.createToken()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this method to create a payment token."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For payment methods that use a form, the FramePay library parses ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["input"]}," fields with a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," attributes and collects its values when you pass the form to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.createToken()"]}," method."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Optionally, instead of including an additional field in your form, provide an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["extraData"]}," object containing properties supported by the Rebilly API ."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// create a token from the fields within a form\nFramepay.createToken(form);\n\n// optionally include extra data that is not found in the form\nFramepay.createToken(form, extraData);\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This method returns a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Promise"]}," with a single argument representing the API result of the operation."," ","Validation or network errors can be caught using a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["catch()"]}," handler and displayed to the customer."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"var form = document.querySelector('form');\nform.addEventListener('submit', function (event) {\n    event.preventDefault();\n    Framepay.createToken(form)\n        .then(function (token) {\n            // if we have a token field in the form\n            // we can submit directly\n            form.submit();\n        })\n        .catch(function (error) {\n            // see error.code and error.message\n        });\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly=\"token\""]}," hidden input field is detected in your form the payment token will be automatically injected."," ","The payment token ID is available as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["token.id"]}," if you prefer manual handling."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In order for the token creation to work you must mount fields before triggering ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["createToken"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"extra-data","__idx":6},"children":["Extra data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["extraData"]}," argument is optional and enables you to define specific values to include in your payment token request."," ","The billing address values match the properties supported by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," input fields and can be provided as either form fields or as this object literal."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["These options can be defined within:"]},{"$$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":{"width":"100","data-label":"Option"},"children":["Option "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["method"]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When provided, the FramePay library attempts to process the form data to generate a payment token for this ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["method"]},". It is recommended to always define this property. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Multiple methods:"]}," This property is required when using multiple payment methods at the same time in a form or when using methods other than ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment-card"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ach"]},". ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Accepts any of the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/catalog/all/payment-tokens/posttoken"},"children":["methods supported by Rebilly"]},"."]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["billingAddress"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"code","attributes":{},"children":["object"]}," (optional)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["This object defines the billing address of the customer. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"These keys can be provided:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["firstName"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lastName"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["organization"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["address"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["address2"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["city"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["region"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["country"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["postalCode"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["phoneNumbers"]}," an array of objects representing phone numbers with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["value"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["emails"]}," an array of objects representing email addresses with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["value"]},".",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required values"]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Note that the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["firstName"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lastName"]}," values are required to create a payment token."," ","If they are not present within the fields of your form, you must define them as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["extraData"]},"."]}]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["leadSource"]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"code","attributes":{},"children":["object"]}," (optional)"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A lead source is a Rebilly term for the marketing campaign responsible for a customer interaction (typically a customer purchasing something). ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"There are two ways to collect lead source information: either you provide it explicitly within the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["extraData"]}," option or let the FramePay library ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/lead-source-attribution"},"children":["collect Google UTM parameters"]}," from the web address hosting it. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"If the lead source parameter is defined, all UTM parameters from the web address will be ignored. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Lead source parameters"]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"A lead source is additional metadata that is attached to the customer’s record."," ","It contains attributes common to Google analytics (UTM) and affiliate tracking applications."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To view availble parameters, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://www.rebilly.com/docs/dev-docs/api/payment-tokens/posttoken#payment-tokens/posttoken/t=request&path=&d=0/leadsource"},"children":["leadSource"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Prevent automatic attribution"]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"If you want to prevent automatic lead source attribution from Google analytics UTM fields, you can define this property as an empty object."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"var extraData = {\n  leadSource: {},\n};\n","lang":"javascript"},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["bic"]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The SWIFT or BIC Code. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Only for the BBAN and IBAN methods, allowed in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," fields."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["bankName"]}," ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Bank name. ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Only for the BBAN and IBAN methods, allowed in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," fields."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example, if your form gathered the customer's name at a previous step and does not include the fields in the form used to create the token, then you would define it as extra data:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// within the event listener for the form submit\nvar extraData = {\n    billingAddress: {\n        firstName: 'John',\n        lastName: 'Doe'\n    },\n    leadSource: {\n        campaign: 'facebook',\n    }\n};\n// define extra data as the second argument\nFramepay.createToken(form, extraData)\n        .then(function (token) {\n            // if we have a token field in the form\n            // we can submit directly\n            form.submit();\n        })\n        .catch(function (error) {\n            // see error.code and error.message\n        });\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"data-rebilly-fields","__idx":7},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["data-rebilly"]}," Fields"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/form-setup"},"children":["data-rebilly fields"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"card-namespace","__idx":8},"children":["Card namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The card namespace enables you to mount payment card specific fields."," ","This will generate a FramePay library element at the location you desire within your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can choose to use either:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a combined element, that includes the number, expiration and CVV in a single element for easier use"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["three separate elements for the card number, expiration or CVV"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the combined field because it is easier to integrate and provides a better user experience to your customers."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"framepaycardmount","__idx":9},"children":["Framepay.card.mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After Rebilly initializes, mount payment card elements into your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first argument must be: a DOM element, a valid string DOM selector, or an instance of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jQuery"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Zepto"]}," object that wraps an element within the page."," ","The FramePay library attempts to resolve the element and generate a card field within."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By default a ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["combined card element"]}," will be generated."," ","If you want to mount three separate fields for the card number, expiration and CVV you can provide a second argument to define the type of element to generate."]},{"$$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\n// mount an expiration card element and return the instance\nvar cardExpiration = Framepay.card.mount('#card-expiration', 'cardExpiration');\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"classname":"attention"},"children":[" Field events ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"\nThe card element instances can be used to subscribe to events and complete additional actions afterwards.\n"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The supported element types for the second argument are:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardNumber"]},", a payment card element with automatic formatting"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardExpiration"]},", an expiration month and expiration year element with automatic formatting"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cardCvv"]},", a CVV element"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When specifying the element types, you must include one of each type in your form."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"mounting-points","__idx":10},"children":["Mounting points"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The mounting points within your form must be empty."," ","Any existing content will be replaced with the FramePay library element."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<form method=\"post\" action=\"/process\">\n  <div className=\"field\">\n    <label>Payment card</label>\n    <div id=\"card\">\n      <!-- The FramePay library injects the combined payment card field here -->\n    </div>\n  </div>\n  <button>Checkout</button>\n</form>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"labels","__idx":11},"children":["Labels"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<label>"]}," is present in your form and you want to automatically focus on the FramePay library element once the label is clicked. There are 2 different ways to achieve this:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["for"]}," attribute to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<label>"]},", referencing the ID of your container."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<label for=\"card\">Payment card</label>\n<div id=\"card\">\n  <!-- The FramePay library injects the combined payment card field here -->\n</div>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Wrap the FramePay library element within a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<label>"]},"."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<label\n  >Payment card\n  <div id=\"card\">\n    <!-- The FramePay library injects the combined payment card field here -->\n  </div>\n</label>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"bban-namespace","__idx":12},"children":["BBAN namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bban"]}," namespace enables you to mount bank account (BBAN) specific fields."," ","This will generate a FramePay library element at the location you desire within your form."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"framepaybbanmount","__idx":13},"children":["Framepay.bban.mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After Rebilly initializes, mount BBAN elements into your form."," ","This method requires two arguments, the first being a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selector"]}," and the second being an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["element type"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first argument must be: a DOM element, a valid string DOM selector, or an instance of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jQuery"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Zepto"]}," object that wraps an element within the page."," ","The FramePay library attempts to resolve the element and generate a bank field within."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// mount an account type element and return the instance\nvar accountType = Framepay.bban.mount('#account-type', 'accountType');\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"classname":"attention"},"children":["Field events",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"\nThe bank element instances can be used to subscribe to events and complete additional actions afterwards.\n"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The supported element types for the second argument are:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accountType"]},": a set of inline buttons allowing the selection of the account type"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accountNumber"]},": a simple element to enter the account number"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["routingNumber"]},": a simple element to enter the routing number"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bic"]},": a simple element to enter the SWIFT or BIC Code"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bankName"]},": a simple element to enter the bank name"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You must include mount one of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["accountNumber"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["routingNumber"]}," into your form in order to create a token for a BBAN."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"mounting-points-1","__idx":14},"children":["Mounting points"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The mounting points within your form must be empty."," ","Any existing content will be replaced with the FramePay library element."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<form method=\"post\" action=\"/process\">\n  <div className=\"field\">\n    <label>Account type</label>\n    <div id=\"account-type\">\n      <!-- The FramePay library injects the combined account type field here -->\n    </div>\n  </div>\n  <button>Continue</button>\n</form>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"labels-1","__idx":15},"children":["Labels"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<label>"]}," is present in your form and you want to automatically focus on the FramePay library element once the label is clicked. There are 2 different ways to achieve this:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["for"]}," attribute to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<label>"]},", referencing the ID of your container."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<label for=\"account-type\">Account type</label>\n<div id=\"account-type\">\n  <!-- The FramePay library injects the combined account type field here -->\n</div>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Wrap the FramePay library element within a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<label>"]},"."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<label\n  >Account type\n  <div id=\"account-type\">\n    <!-- The FramePay library injects the account type field here -->\n  </div>\n</label>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"iban-namespace","__idx":16},"children":["IBAN namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the IBAN (International BBAN Number) namespace to mount a field for accepting IBANs."," ","This generates a FramePay library element at the location you specify within your form."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"framepayibanmount","__idx":17},"children":["Framepay.iban.mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After Rebilly initializes, mount IBAN elements into your form."," ","This method requires one or two arguments, the first being a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selector"]}," and the second being an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["element type"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If the second argument did not pass, then it will be mounted the default element for IBAN account number."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["selector"]}," argument must be either a DOM element, a valid string DOM selector or an instance of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jQuery"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Zepto"]}," object that wraps an element within the page."," ","The FramePay library attempts to resolve the element and generate an IBAN field within."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// mount an account type element and return the instance\nvar iban = Framepay.iban.mount('#iban'); // mount iban field\nvar bic = Framepay.iban.mount('#iban-bic', 'bic'); // mount iban bic field\nvar bankName = Framepay.iban.mount('#iban-bank-name', 'bankName'); // mount iban Bank Name field\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The supported element types for the second argument are:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["empty - mount main ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iban"]}," field element ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.iban.mount('#iban');"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bic"]},": a simple element to enter the SWIFT or BIC Code"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bankName"]},": a simple element to enter the Bank Name"]}]},{"$$mdtype":"Tag","name":"div","attributes":{"classname":"attention"},"children":[" Field events",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"\nThe `iban` element instances can be used to subscribe to events and complete additional actions afterwards.\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"mounting-points-2","__idx":18},"children":["Mounting points"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The mounting points within your form must be empty."," ","Any existing content will be replaced with the FramePay library element."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<form method=\"post\" action=\"/process\">\n  <div className=\"field\">\n    <label>IBAN number</label>\n    <div id=\"iban\">\n      <!-- The FramePay library injects the iban field here -->\n    </div>\n  </div>\n  <button>Continue</button>\n</form>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"labels-2","__idx":19},"children":["Labels"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<label>"]}," is present in your form and you want to automatically focus on the FramePay element once the label is clicked. There are 2 different ways to achieve this:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["for"]}," attribute to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<label>"]},", referencing the ID of your container."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<label for=\"iban\">IBAN number</label>\n<div id=\"iban\">\n  <!-- The FramePay library injects the iban field here -->\n</div>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Wrap the FramePay library element within a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<label>"]},"."]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<label\n  >IBAN\n  <div id=\"iban\">\n    <!-- The FramePay library injects the iban field here -->\n  </div>\n</label>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"paypal-namespace","__idx":20},"children":["PayPal Namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The PayPal namespace enables you to mount a PayPal button."," ","This will generate a FramePay library element at the location defined within your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-paypal-method"},"children":["Set up PayPal"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"framepaypaypalmount","__idx":21},"children":["Framepay.paypal.mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After Rebilly initializes, mount PayPal elements into your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first argument must be: a DOM element, a valid string DOM selector, or an instance of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jQuery"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Zepto"]}," object that wraps an element within the page."," ","The FramePay library attempts to resolve the element and generate a PayPal field within."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// mount a PayPal element on a container `div`\nvar card = Framepay.paypal.mount('#paypal-container');\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"classname":"attention"},"children":[" Field events ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"\nPayPal element instances do not emit any events which can be subscribed to.\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"paypal-callbacks","__idx":22},"children":["PayPal callbacks"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["PayPal provides several callbacks."," ","Access them using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["extraData"]}," on the mount."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// mount a PayPal element on a container `div`\nvar card = Framepay.paypal.mount('#paypal-container', {\n    extraData: {\n        onInit: () => {},\n        onClick: () => {},\n        onShippingChange: () => {},\n        onApprove: () => {},\n        onCancel: () => {},\n        onError: () => {},\n    }\n});\n","lang":"JavaScript"},"children":[]},{"$$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":"Event name"},"children":["Event name"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Trigger"},"children":["Trigger"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onInit"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The UI finishes loading."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onClick"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A customer clicks a button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onShippingChange"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A customer changes shipping address."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onApprove"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A customer approves the transaction on ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["paypal.com"]},". The ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/events/#token-ready"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["token-ready"]}," event"]}," is also triggered by this event."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onCancel"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["A customer cancels an approval."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["onError"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["PayPal experiences an error."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"plaid-namespace","__idx":23},"children":["Plaid namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Plaid namespace enables you to mount a Plaid button."," ","This will generate a FramePay library element at the location defined within your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-plaid-method"},"children":["Set up Plaid"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"framepayplaidmount","__idx":24},"children":["Framepay.plaid.mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After Rebilly initializes, mount Plaid elements into your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first argument must be: a DOM element, a valid string DOM selector, or an instance of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jQuery"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Zepto"]}," object that wraps an element within the page."," ","The FramePay library attempts to resolve the element and generate a Plaid field within."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// mount a Plaid element on a container `div`\nvar card = Framepay.plaid.mount('#plaid-container');\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"classname":"attention"},"children":[" Field events ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"\nPlaid element instances do not emit any events which can be subscribed to.\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"google-pay-namespace","__idx":25},"children":["Google Pay namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Google Pay namespace enables you to mount a Google Pay button."," ","This generates a FramePay library element at the location defined within your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a complete set up guide, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-google-pay"},"children":["Set up Google Pay"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"framepaygooglepaymount","__idx":26},"children":["Framepay.googlePay.mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After Rebilly initializes, mount the Google Pay element into your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first argument must be: a DOM element, a valid string DOM selector, or an instance of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jQuery"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Zepto"]}," object that wraps an element within the page."," ","The FramePay library attempts to resolve the element and generate a Google Pay field within."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// mount an Google Pay element on a container `div`\nvar googlePay = Framepay.googlePay.mount('#google-pay-container');\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"classname":"attention"},"children":[" Field events ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"\n    Google Pay element instances do not emit any events which can be subscribed to.\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"apple-pay-namespace","__idx":27},"children":["Apple Pay namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Apple Pay namespace enables you to mount an Apple Pay button."," ","This will generate a FramePay library element at the location defined within your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a complete set up guide, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-apple-pay"},"children":["Set up Apple Pay"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"framepayapplepaymount","__idx":28},"children":["Framepay.applePay.mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After Rebilly initializes, mount the Apple Pay element into your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first argument must be: a DOM element, a valid string DOM selector, or an instance of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jQuery"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Zepto"]}," object that wraps an element within the page."," ","The FramePay library attempts to resolve the element and generate an Apple Pay field within."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// mount an Apple Pay element on a container `div`\nvar applePay = Framepay.applePay.mount('#apple-pay-container');\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"samsung-pay-namespace","__idx":29},"children":["Samsung Pay namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Samsung Pay namespace enables you to mount a Samsung Pay button."," ","This will generate a FramePay library element at the location defined within your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a complete set up guide, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-samsung-pay"},"children":["Set up Samsung Pay"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"framepaysamsungpaymount","__idx":30},"children":["Framepay.samsungPay.mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After the FramePay library initializes, mount the Samsung Pay element into your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first argument must be: a DOM element, a valid string DOM selector, or an instance of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jQuery"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Zepto"]}," object that wraps an element within the page."," ","The FramePay library attempts to resolve the element and generate an Samsung Pay field within."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// mount an Samsung Pay element on a container `div`\nvar samsungPay = Framepay.samsungPay.mount('#samsung-pay-container');\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"classname":"attention"},"children":[" Field events ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"\nSamsung Pay element instances do not emit any events which can be subscribed to.\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"klarna-bnpl-namespace","__idx":31},"children":["Klarna BNPL namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Klarna Buy Now Pay Later (BNPL) namespace enables you to mount the Klarna widget."," ","This will generate a FramePay library element at the location defined within your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For a complete set up guide, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-klarna-method"},"children":["Set up Klarna BNPL"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"framepayklarnamount","__idx":32},"children":["Framepay.klarna.mount()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After Rebilly initializes, mount the Klarna element into your form."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first argument must be: a DOM element, a valid string DOM selector, or an instance of a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["jQuery"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Zepto"]}," object that wraps an element within the page."," ","The FramePay library attempts to resolve the element and generate a Klarna field within."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// mount the klarna widget on a container `div`\nvar klarna = Framepay.klarna.mount('#klarna-container');\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"classname":"attention"},"children":[" Field events ",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"\nKlarna element instances do not emit any events which can be subscribed to.\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"errorcodes-namespace","__idx":33},"children":["errorCodes namespace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The errorCodes namespace is used for overriding default error messages."," ","For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/framepay-configuration-reference#i18n"},"children":["configuration i18n"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mount-points","__idx":34},"children":["Mount points"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The mounting points within your form must be empty."," ","Any existing content will be replaced with the FramePay library element."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<form id=\"plaid-form\">\n  <div class=\"field\">\n    <input data-rebilly=\"firstName\" value=\"Bob\" placeholder=\"First Name\" />\n  </div>\n  <div id=\"plaid-mounting-point\">\n    <!-- The FramePay library injects the combined payment card field here -->\n  </div>\n</form>\n","lang":"html"},"children":[]}]},"headings":[{"value":"FramePay reference methods","id":"framepay-reference-methods","depth":1},{"value":"Framepay.initialize()","id":"framepayinitialize","depth":2},{"value":"Framepay.update()","id":"framepayupdate","depth":2},{"value":"Framepay.on()","id":"framepayon","depth":2},{"value":"Framepay.off()","id":"framepayoff","depth":2},{"value":"Framepay.createToken()","id":"framepaycreatetoken","depth":2},{"value":"Extra data","id":"extra-data","depth":3},{"value":"data-rebilly Fields","id":"data-rebilly-fields","depth":3},{"value":"Card namespace","id":"card-namespace","depth":2},{"value":"Framepay.card.mount()","id":"framepaycardmount","depth":3},{"value":"Mounting points","id":"mounting-points","depth":4},{"value":"Labels","id":"labels","depth":4},{"value":"BBAN namespace","id":"bban-namespace","depth":2},{"value":"Framepay.bban.mount()","id":"framepaybbanmount","depth":3},{"value":"Mounting points","id":"mounting-points-1","depth":4},{"value":"Labels","id":"labels-1","depth":4},{"value":"IBAN namespace","id":"iban-namespace","depth":2},{"value":"Framepay.iban.mount()","id":"framepayibanmount","depth":3},{"value":"Mounting points","id":"mounting-points-2","depth":4},{"value":"Labels","id":"labels-2","depth":4},{"value":"PayPal Namespace","id":"paypal-namespace","depth":2},{"value":"Framepay.paypal.mount()","id":"framepaypaypalmount","depth":3},{"value":"PayPal callbacks","id":"paypal-callbacks","depth":3},{"value":"Plaid namespace","id":"plaid-namespace","depth":2},{"value":"Framepay.plaid.mount()","id":"framepayplaidmount","depth":3},{"value":"Google Pay namespace","id":"google-pay-namespace","depth":2},{"value":"Framepay.googlePay.mount()","id":"framepaygooglepaymount","depth":3},{"value":"Apple Pay namespace","id":"apple-pay-namespace","depth":2},{"value":"Framepay.applePay.mount()","id":"framepayapplepaymount","depth":3},{"value":"Samsung Pay namespace","id":"samsung-pay-namespace","depth":2},{"value":"Framepay.samsungPay.mount()","id":"framepaysamsungpaymount","depth":3},{"value":"Klarna BNPL namespace","id":"klarna-bnpl-namespace","depth":2},{"value":"Framepay.klarna.mount()","id":"framepayklarnamount","depth":3},{"value":"errorCodes namespace","id":"errorcodes-namespace","depth":2},{"value":"Mount points","id":"mount-points","depth":3}],"frontmatter":{"seo":{"title":"FramePay reference methods","description":"Learn about the FramePay library reference methods.","keywords":"Developer docs, FramePay","lang":"en-US"},"redirects":{"/docs/developer-docs/framepay/namespace/":{},"/docs/content/dev-docs/concept/namespace/":{},"/docs/content/dev-docs/concept/framepay-global-reference/":{},"/docs/content/concepts-and-features/concept/framepay-global-reference/":{},"/docs/concepts-and-features/concept/framepay-global-reference/":{}},"excludeFromSearch":true},"lastModified":"2026-01-12T11:16:51.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/framepay-global-reference","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}