{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition","tabs","framepay-toast"]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"FramePay configuration reference","description":"Learn about FramePay.","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-configuration-reference","__idx":0},"children":["FramePay configuration reference"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This topic describes the reference along with the complete list of properties that are supported in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configuration"]}," object."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To initialize or update FramePay, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configuration"]}," object to call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.initialize(configuration)"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.update(configuration)"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A configuration property is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["updatable"]}," when it can be updated after FramePay is initialized using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Framepay.update()"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For an overview of all ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configuration"]}," options, go to the example at the end of this page."]},{"$$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":"Option"},"children":["Option"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Scope"},"children":["Scope"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#publishablekey"},"children":["publishableKey"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["All payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#organizationid"},"children":["organizationId"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["All payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#websiteid"},"children":["websiteId"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#locale"},"children":["locale"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["All payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#methods"},"children":["methods"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#transactiondata"},"children":["transactionData"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment card, PayPal, Plaid, Apple Pay, Google Pay™, Klarna."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#icon"},"children":["icon"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment card and bank account payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#display"},"children":["display"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment card and bank account payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#color"},"children":["color"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment card and bank account payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#placeholders"},"children":["placeholders"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment card and bank account payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#i18n"},"children":["i18n"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment card."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#paypal"},"children":["paypal"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["PayPal."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#applepay"},"children":["applePay"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Apple Pay."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#googlepay"},"children":["googlePay"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Google Pay™."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#kountaccountid"},"children":["kountAccountId"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["BlueSnap payment gateways."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#style"},"children":["style"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment card and bank account payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#classes"},"children":["classes"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Payment card and bank account payment methods."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"a","attributes":{"href":"#leadsource"},"children":["leadSource"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["All payment methods."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"publishablekey","__idx":1},"children":["publishableKey"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This property is required to authenticate your API requests from FramePay."," ","To create a new Rebilly publishable API key, go to ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://app.rebilly.com/api-keys/add"},"children":["Create API key"]},"."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":" Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n });\n Framepay.on('ready', () => {\n const card = Framepay.card.mount('#mounting-point');\n });\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"organizationid","__idx":2},"children":["organizationId"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this property to specify the organization identifier to be used in API requests."," ","If not specified, the default organization will be used."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n organizationId: 'your-company-organization-id',\n});\nFramepay.on('ready', () => {\n const card = Framepay.card.mount('#mounting-point');\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"websiteid","__idx":3},"children":["websiteId"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this property to specify the website identifier used for Ready To Pay API requests."," ","Required if using automatic method configuration with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["methods: 'auto'"]},"."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n organizationId: 'your-company-organization-id',\n websiteId: 'your-rebilly-website-id',\n transactionData: {\n currency: 'USD',\n amount: 10,\n },\n});\nFramepay.on('ready', () => {\n const card = Framepay.paypal.mount('#mounting-point');\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"leadsource","__idx":4},"children":["leadSource"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this property to define lead source attribution data for tracking marketing campaigns and referral sources."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object or empty object ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{}"]}]}]}]}]}]},{"$$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":["By default, the FramePay library automatically collects UTM parameters from the current URL."," ","To disable automatic collection, pass an empty object ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["leadSource: {}"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_123456',\n organizationId: 'my-organization-id',\n websiteId: 'my-website-id',\n leadSource: {\n affiliate: 'partner-abc-123',\n subAffiliate: 'blog-post-456',\n source: 'partner-network',\n medium: 'referral',\n campaign: 'spring-2024'\n }\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/define-lead-source-data"},"children":["Define lead source data"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"locale","__idx":5},"children":["locale"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this property to specify the language used in the elements and messages that FramePay injects in your checkout form."," ","This option accepts strings in the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://tools.ietf.org/html/rfc5646"},"children":["RFC-5646"]}," format."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you do not provide any value, FramePay will try to detect and use the client's locale."," ","If that not possible, it will use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["en-US"]}," locale as the default fallback value."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]}]}]}]}]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n locale: 'es-ES',\n });\n Framepay.on('ready', () => {\n var card = Framepay.card.mount('#mounting-point');\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"html"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n
\n
\n
\n \n
\n
\n","lang":"html"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mounting-point {\n flex: .8;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--small","src":"/examples/framepay-example-locale.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"methods","__idx":6},"children":["methods"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This property is applicable for: payment card, PayPal, Plaid, Apple Pay, Google Pay™, and Klarna."," ","Support for other payment methods is not yet added."]}]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Array | string"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default value"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'auto'"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Supported values"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'auto'"]}," OR an array of payment methods matching the structure returned by ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/catalog/all/transactions/postreadytopay"},"children":["ReadyToPay"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"automatic-payment-method-details","__idx":7},"children":["Automatic payment method details"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["methods"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["auto"]}," (default) FramePay uses information from the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/catalog/all/transactions/postreadytopay"},"children":["Ready To Pay"]}," API operation"," ","to automatically configure your payment methods."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["websiteId"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["transactionData"]}," are required when using automatically configured payment methods."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n organizationId: 'your-company-organization-id',\n websiteId: 'your-rebilly-website-id',\n transactionData: {\n currency: 'USD',\n amount: 10,\n },\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"manual-payment-method-details","__idx":8},"children":["Manual payment method details"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To configure payment method details manually, pass an array of"," ","payment method objects matching the structure returned by ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/catalog/all/transactions/postreadytopay"},"children":["ReadyToPay"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n organizationId: 'your-company-organization-id',\n transactionData: {\n currency: 'USD',\n },\n methods: [\n {\n method: 'paypal',\n feature: {\n billingAgreementToken: 'BA-1234',\n paypalMerchantId: 'ABCDEF',\n },\n },\n ]\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"transactiondata","__idx":9},"children":["transactionData"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This property is required when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["methods: 'auto'"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This property contains information about the transaction which is required to mount payment methods."," ","The required properties change based on automatic or manual payment methods configuration and the"," ","payment method type."]},{"$$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":"160","data-label":"Property"},"children":["Property "]},{"$$mdtype":"Tag","name":"th","attributes":{"width":"200","data-label":"Type"},"children":["Type "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Required for"},"children":["Required for"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["currency"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["auto"]}," methods, PayPal, Plaid, Apple Pay, Google Pay™, Klarna"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amount"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["number"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["auto"]}," methods, PayPal, Plaid, Apple Pay, Google Pay™, Klarna"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["label"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["string"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Apple Pay, Google Pay™"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["requestShipping"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["boolean"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional, works with Apple Pay, Google Pay™"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["shippingOptions"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["object"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Apple Pay, Google Pay™"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lineItems"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{ label: string, amount: number|string, }[]"]},","]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional, works with Apple Pay, Google Pay™"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"// Automatically configuring payment methods\nFramepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n organizationId: 'your-company-organization-id',\n websiteId: 'your-rebilly-website-id',\n transactionData: {\n currency: 'USD',\n amount: 10,\n requestShipping: true,\n shippingOptions: {\n defaultSelectedOptionId: 'free-shipping',\n options: [\n {\n id: 'free-shipping',\n label: 'Free shipping',\n description: 'Arrives in 5 to 7 days',\n amount: 0,\n },\n {\n id: 'express-shipping',\n label: 'Express shipping',\n description: 'Arrives in 1 to 2 days',\n amount: 5,\n },\n ]\n },\n lineItems: [\n {\n label: 'Shipping',\n amount: '0.00',\n },\n {\n label: 'Coupon',\n amount: '-2.00',\n },\n {\n label: 'Tax',\n amount: '10.99',\n }\n ]\n },\n});\n\n// Manually configuring payment methods\nFramepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n organizationId: 'your-company-organization-id',\n websiteId: 'your-rebilly-website-id',\n methods: [\n {\n method: 'paypal',\n feature: {\n billingAgreementToken: 'BA-1234',\n paypalMerchantId: 'ABCDEF',\n },\n },\n ]\n transactionData: {\n // Currency is always required for PayPal\n currency: 'USD',\n },\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"icon","__idx":10},"children":["Icon"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this object to control the color and visibility of the icon in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment card"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bank account"]}," elements."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Warning"]},": The card icon is hidden in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["combined card mode"]}," on mobile devices."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n icon: {\n display: true,\n color: '#000000'\n }\n})\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"display","__idx":11},"children":["Display"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this property to control the visibility of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]}," in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment card"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bank account"]}," fields."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Boolean"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default value"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," (render icon)"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Supported values"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n icon: {\n display: false,\n },\n });\n Framepay.on('ready', () => {\n var card = Framepay.card.mount('#mounting-point');\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n
\n
\n
\n \n
\n
\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mounting-point {\n flex: .8;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--small","src":"/examples/framepay-example-icon-1.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"color","__idx":12},"children":["Color"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this property to control the color of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["icon"]}," in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment card"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bank account"]}," fields."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default value"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"#A1B2C1\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Supported values"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String colors in formats like: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"red\""]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"#A1B2C1\""]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"rgb(0,0,0)\""]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"rgba(0,0,0,0.5)\""]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"payment-card-example","__idx":13},"children":["Payment card example"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n icon: {\n color: 'rgba(0,0,0,0.1)',\n },\n });\n Framepay.on('ready', () => {\n var card = Framepay.card.mount('#mount-point');\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n
\n
\n
\n \n
\n
\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mount-point {\n flex: .8;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--small","src":"/examples/framepay-example-icon-2.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"iban-element-example","__idx":14},"children":["IBAN element example"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n icon: {\n // Supported names like 'red', rgb, hex\n color: 'rgb(200,197,31)',\n },\n });\n Framepay.on('ready', () => {\n var iban = Framepay.iban.mount('#mount-point');\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n
\n
\n
\n \n
\n
\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mount-point {\n flex: .8;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--small","src":"/examples/framepay-example-icon-3.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"placeholders","__idx":15},"children":["placeholders"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this property to customize the input placeholders that FramePay injects into your checkout form."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object"]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"payment-card-placeholders","__idx":16},"children":["payment card placeholders"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can specify placeholders for each 3 different payment card inputs."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholders"]}," is an object with this default format:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"placeholders: {\n card: {\n number: 'string',\n expiration: 'string',\n cvv: 'string',\n },\n},\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n placeholders: {\n card: {\n number: 'Number',\n expiration: 'Exp',\n cvv: '***',\n },\n },\n });\n Framepay.on('ready', () => {\n var card = Framepay.card.mount('#mount-point');\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n
\n
\n
\n \n
\n
\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mount-point {\n flex: .8;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--small","src":"/examples/framepay-example-placeholders-1.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"custom-expiration-placeholder","__idx":17},"children":["custom expiration placeholder"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Instead of using the default ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expiration"]}," placeholder:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"placeholders: {\n card: {\n ...\n expiration: 'string',\n ...\n },\n},\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can split the expiration placeholder in 3 strings."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n placeholders: {\n card: {\n expirationSeparator: '-',\n expirationMonth: 'M.',\n expirationYear: 'Y.',\n },\n },\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--small","src":"/examples/framepay-example-placeholders-1-2.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"bank-account-placeholders","__idx":18},"children":["Bank account placeholders"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can define placeholders for each of the 5 different ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["BBAN or IBAN"]}," inputs."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["placeholders"]}," is an object with this default format:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"placeholders: {\n bban: {\n bicPlaceholder: 'string',\n bankNamePlaceholder: 'string',\n accountNumber: 'string',\n routingNumber: 'string',\n type: {\n savings: 'string',\n checking: 'string',\n other: 'string'\n }\n },\n},\n","lang":"javascript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example with ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["IBAN"]},":"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\nFramepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n placeholders: {\n bban: {\n bicPlaceholder:'BIC ****',\n bankNamePlaceholder:'Bank Name ****',\n accountNumber: 'Account Number ****',\n routingNumber: 'Routing Number ****',\n type: {\n savings: 'Type 1 Savings',\n checking: 'Type 2 Checking',\n other: 'Type 3 Other'\n }\n }\n }\n});\nFramepay.on('ready', function () {\n Framepay.bban.mount('#mount-point-bic', 'bic');\n Framepay.bban.mount('#mount-point-bank-name', 'bankName');\n Framepay.bban.mount('#mount-point-0', 'accountType');\n Framepay.bban.mount('#mount-point-1', 'accountNumber');\n Framepay.bban.mount('#mount-point-2', 'routingNumber');\n});\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n\n
\n
\n
\n
\n   \n
\n \n
\n
\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mount-point-1 {\n flex: .4;\n}\n\n.field > #mount-point-2 {\n flex: .4;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--middle","src":"/examples/framepay-example-placeholders-2.html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example with ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["BBAN"]},":"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\nFramepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n placeholders: {\n iban: {\n accountNumber: 'IBAN NUMBER ***'\n }\n }\n});\nFramepay.on('ready', function () {\n var iban = Framepay.iban.mount('#mount-point');\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n\n
\n
\n
\n \n
\n
\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mount-point {\n flex: .8;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--small","src":"/examples/framepay-example-placeholders-3.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"placeholders-and-locale","__idx":19},"children":["Placeholders and locale"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Customized placeholders only apply to the current configured ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"#locale"},"children":["locale"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For example, if the configured ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["locale"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["'es-ES'"]},", the Spanish placeholders will be overridden but, the placeholders of non-Spanish ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["locales"]}," will not be overridden."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n placeholders: {\n card: {\n expiration: 'CAD.'\n }\n },\n locale: 'es-ES'\n });\n Framepay.on('ready', function () {\n var card = Framepay.card.mount('#mount-point');\n });\n document.getElementById('btn-update-1').addEventListener('click', function (e) {\n Framepay.update({\n locale: 'en-US'\n });\n });\n document.getElementById('btn-restore-1').addEventListener('click', function (e) {\n Framepay.update({\n locale: 'es-ES'\n });\n });\n})();\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In this example, the configured ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["locale"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["es-ES"]}," and the customized placeholder is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["card.expiration"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you press ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Update locale to en-US"]},", the English ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["card.expiration"]}," placeholder will not be customized."," ","If you press ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Update locale to es-ES"]},", the Spanish ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["card.expiration"]}," placeholder will be customized."]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--middle","src":"/examples/framepay-example-placeholders-5.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"i18n","__idx":20},"children":["i18n"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this configuration object to customize the displayed and returned ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error messages"]},"."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object"]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n i18n: {\n // Open developer tools, check the value of `navigator.language` in the console.\n // `en` should match with `navigator.language` exactly.\n // In another word, if the value is `en-US`, then use `en-US` instead of `en`.\n en: {\n validations: {\n // Below are the default validation message, customize them yourself\n\n // card\n [Framepay.errorCodes.invalidCardNumber]: `Invalid card number.`,\n [Framepay.errorCodes.invalidExpirationYearInPast]: `Your card is expired.`,\n [Framepay.errorCodes.invalidExpirationYearInFuture]: `Your card's expiration is too far in the future.`,\n [Framepay.errorCodes.invalidExpirationMonth]: `Your card's expiration month is invalid.`,\n [Framepay.errorCodes.incompleteCvv]: `Invalid CVV code.`,\n [Framepay.errorCodes.invalidExpiration]: `Invalid expiration date.`,\n [Framepay.errorCodes.invalidPaymentCard]: `Invalid card information.`,\n\n // bban\n [Framepay.errorCodes.incompleteRoutingNumber]: `Invalid bank routing number.`,\n [Framepay.errorCodes.incompleteAccountNumber]: `Invalid bank account number.`,\n [Framepay.errorCodes.invalidBbanAccount]: `Invalid bank account information.`,\n [Framepay.errorCodes.invalidLengthRoutingNumber]: `Your bank routing number must be 5 digits long`,\n [Framepay.errorCodes.invalidLengthAccountNumber]: `Your bank account number must less than or equal to 12 digits long`,\n [Framepay.errorCodes.invalidMaxLengthAccountNumber]: `Your bank account number must not be 16 digits long`,\n\n // iban\n [Framepay.errorCodes.invalidIBANNumber]: `Invalid IBAN number.`,\n [Framepay.errorCodes.invalidIBANCountry]: `Your IBAN should start with a two-letter country code.`,\n [Framepay.errorCodes.unsupportedIBANCountry]: `Your IBAN country is not supported.`,\n [Framepay.errorCodes.incompleteIBANNumber]: `Your IBAN number is incomplete.`,\n }\n },\n }\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"validations-i18n","__idx":21},"children":["Validations i18n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"payment-card-in-combined-mode","__idx":22},"children":["Payment card in combined mode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To see the details of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["change"]}," events in the following example, open your browser's console."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n i18n: {\n en: {\n validations: {\n [Framepay.errorCodes.invalidPaymentCard]: 'Please check your Payment Card',\n [Framepay.errorCodes.invalidCardNumber]: 'Please check Card Number field',\n [Framepay.errorCodes.invalidExpiration]: 'Please check Expiration field',\n [Framepay.errorCodes.incompleteCvv]: 'Please check CVV field',\n },\n },\n },\n });\n Framepay.on('ready', () => {\n var card = Framepay.card.mount('#mount-point');\n\n card.on('change', (data) => {\n console.log('change event data', data);\n document.getElementById('error').innerText = data.valid ? '' : data.error.message;\n });\n });\n\n\n document.getElementById('btn-update-1')\n .addEventListener('click', () => {\n alert('Soon');\n Framepay.update({\n i18n: {\n en: undefined,\n },\n });\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n\n
\n
\n
\n \n
\n

\n
\n\n\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mount-point {\n flex: .8;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n\n.btn-update {\n display: inline-block;\n width: auto;\n background: rgba(26, 188, 156, 0.6);\n}\n\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--middle","src":"/examples/framepay-example-errorcodes-1.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"payment-card-in-separated-mode","__idx":23},"children":["Payment card in separated mode"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To see the details of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["change"]}," events in the following example, open your browser's console."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n i18n: {\n en: {\n validations: {\n [Framepay.errorCodes.invalidCardNumber]: 'Please check Card Number field',\n [Framepay.errorCodes.incompleteExpiration]: 'Please check Expiration field',\n [Framepay.errorCodes.incompleteCvv]: 'Please check CVV field',\n },\n },\n },\n });\n\n Framepay.on('ready', () => {\n var [number, expiration, cvv] = [\n Framepay.card.mount('#mount-point-1', 'cardNumber'),\n Framepay.card.mount('#mount-point-2', 'cardExpiration'),\n Framepay.card.mount('#mount-point-3', 'cardCvv'),\n ];\n\n number.on('change', (data) => {\n console.log('change event data', data);\n document.getElementById('error').innerText = data.valid ? '' : data.error.message;\n });\n expiration.on('change', (data) => {\n console.log('change event data', data);\n document.getElementById('error').innerText = data.valid ? '' : data.error.message;\n });\n cvv.on('change', (data) => {\n console.log('change event data', data);\n document.getElementById('error').innerText = data.valid ? '' : data.error.message;\n });\n });\n\n document.getElementById('btn-update-1')\n .addEventListener('click', () => {\n alert('Soon');\n Framepay.update({i18n: {en: undefined}});\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n\n
\n
\n
\n
\n
\n
\n
\n \n
\n

\n
\n\n\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mount-point {\n flex: .7;\n display: flex;\n}\n\n#mount-point > #mount-point-1 {\n flex: .5;\n}\n\n#mount-point > #mount-point-2 {\n flex: .3;\n margin-left: 1rem;\n}\n\n#mount-point > #mount-point-3 {\n flex: .15;\n margin-left: 1rem;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n\n.btn-update {\n display: inline-block;\n width: auto;\n background: rgba(26, 188, 156, 0.6);\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--middle","src":"/examples/framepay-example-errorcodes-2.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"expiration","__idx":24},"children":["expiration"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this option to customize the payment card ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["expiration"]}," render type."," ","The expiration field supports 2 render types."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["text"]}," (simple input type text)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dropdown"]}," (styled dropdowns and native select on mobile)"]}]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default value"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"text\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Supported values"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"text\""]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"dropdown\""]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"expiration-dropdown-in-combined-mode","__idx":25},"children":["Expiration dropdown in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["combined"]}," mode"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n card: {\n expiration: {\n type: 'dropdown'\n }\n }\n });\n Framepay.on('ready', function () {\n var card = Framepay.card.mount('#mount-point');\n }); // the expiration type is non-updatable property\n // document.getElementById('btn-update-1')\n // .addEventListener('click', (e) => {\n // Framepay.update({card: {expiration: {type: 'text'}}});\n // });\n})();\n\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n\n
\n
\n
\n
\n \n
\n
\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mount-point {\n flex: .7;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n\n.btn-update {\n display: inline-block;\n width: auto;\n background: rgba(26, 188, 156, 0.6);\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--middle","src":"/examples/framepay-example-expiration-dropdown-1.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"expiration-dropdown-in-separated-mode","__idx":26},"children":["Expiration dropdown in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["separated"]}," mode"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\nFramepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n card: {\n expiration: {\n type: 'dropdown'\n }\n }\n});\nFramepay.on('ready', function () {\n Framepay.card.mount('#mount-point-1', 'cardNumber');\n Framepay.card.mount('#mount-point-2', 'cardExpiration');\n Framepay.card.mount('#mount-point-3', 'cardCvv');\n}); // the expiration type is non-updatable property\n// document.getElementById('btn-update-1')\n// .addEventListener('click', (e) => {\n// Framepay.update({card: {expiration: {type: 'text'}}});\n// });\n})();\n\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mount-point {\n flex: .7;\n display: flex;\n}\n\n#mount-point > #mount-point-1 {\n flex: .5;\n}\n\n#mount-point > #mount-point-2 {\n flex: .3;\n margin-left: 1rem;\n}\n\n#mount-point > #mount-point-3 {\n flex: .15;\n margin-left: 1rem;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n\n.btn-update {\n display: inline-block;\n width: auto;\n background: rgba(26, 188, 156, 0.6);\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"700px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--middle","src":"/examples/framepay-example-expiration-dropdown-2.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"cvv","__idx":27},"children":["cvv"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this option to customize the payment card ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cvv"]}," render type."," ","The cvv field supports 2 render types."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"text\""]}," (simple input type text)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"password\""]}," (input type password)"]}]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["String"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Default value"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"text\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Supported values"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"text\""]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"password\""]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\nFramepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n card: {\n cvv: {\n type: 'password'\n }\n }\n});\nFramepay.on('ready', function () {\n var card = Framepay.card.mount('#mount-point');\n});\ndocument.getElementById('btn-update-1').addEventListener('click', function (e) {\n Framepay.update({\n card: {\n cvv: {\n type: 'text'\n }\n }\n });\n});\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n\n
\n
\n
\n
\n \n
\n
\n\n\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mount-point {\n flex: .7;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n\n.btn-update {\n display: inline-block;\n width: auto;\n background: rgba(26, 188, 156, 0.6);\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--middle","src":"/examples/framepay-example-cvv.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"style","__idx":28},"children":["style"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this option to override the default FramePay styles."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To customize the look of the rendered elements, use these keys:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]},": state applied to the elements regardless of validation state."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focus"]},": state applied when an element has been focused by the user clicking or tabbing through the fields."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valid"]},": validation state applied when the input data is correct or complete after each user interaction."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalid"]},": validation state applied when the input data is incorrect or incomplete after each user interaction."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n style: {\n base: {\n color: 'blue',\n ':focus': {\n color: 'lightblue',\n },\n },\n valid: {\n color: 'green',\n },\n invalid: {\n color: 'yellow',\n },\n },\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--small","src":"/examples/framepay-example-style.html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Additionally, for the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["account type"]}," element in the bank account payment method setup, you can use a nested ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttons"]}," object:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttons"]},": another set of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focus"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["active"]}," states to define the look of the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["account type"]}," buttons."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"common-states","__idx":29},"children":["Common States"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focus"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valid"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalid"]}," states can define these ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CSS properties"]},":"," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFamily"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontStyle"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontVariant"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontStretch"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFeatureSettings"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontKerning"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["webkitFontSmoothing"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mozOsxFontSmoothing"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["letterSpacing"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lineHeight"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textDecoration"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textShadow"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textTransform"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textAlign"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textRendering"]},","]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["pseudo-classes"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["pseudo-elements"]}," can also be styled with the above properties, as a nested object."]},{"$$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":[":disabled"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":webkitAutofill"]}," (Only ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["webkitTextFillColor"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]}," properties are available)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["::placeholder"]}," (Includes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["wordSpacing"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["opacity"]}," properties)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["::selection"]}," (Only ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["background"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textShadow"]}," properties are available)"]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"buttons","__idx":30},"children":["Buttons"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["focus"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["active"]}," button states are compatible with these ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["CSS properties"]},":"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["color"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFamily"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontSize"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontStyle"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontVariant"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontStretch"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontWeight"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontFeatureSettings"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["fontKerning"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["webkitFontSmoothing"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mozOsxFontSmoothing"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["background"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderColor"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderWidth"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderStyle"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["borderRadius"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lineHeight"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["textTransform"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hover"]}," selector can be added for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["base"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["active"]}," states as a nested object containing the above properties."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":[":hover"]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n style: {\n buttons: {\n base: {\n background: 'lightblue',\n ':hover': {\n background: 'yellow',\n },\n },\n active: {\n background: 'green',\n ':hover': {\n background: 'orange',\n },\n },\n },\n },\n });\n Framepay.on('ready', () => {\n var [\n accountType,\n ] = [\n Framepay.bban.mount('#mount-point-1', 'bbanType'),\n ];\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTMl"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTMl","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n
\n
\n
\n
\n
\n","lang":"HTMl"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":"# no css\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--small","src":"/examples/framepay-example-buttons.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"classes","__idx":31},"children":["classes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this object to define ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["custom class names"]}," for the fields that are injected into your checkout form."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object"]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you modify the default classes, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["framepay.css"]}," will no longer apply any styles to the fields."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can define the following properties:"]},{"$$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":"200","data-label":"Class"},"children":["Class "]},{"$$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":"code","attributes":{},"children":["base"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The class shared by all the element containers."," ","This is considered the default state."," ","Default value: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-framepay"]}]}]},{"$$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":["The class applied when an element is focused after a user interaction."," ","Default value: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-framepay-focus"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["valid"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The class applied when an element becomes valid through validation."," ","Default value: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-framepay-valid"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["invalid"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The class applied when an element becomes invalid through validation."," ","Default value: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-framepay-invalid"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["webkitAutofill"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The class applied when an element value is autofill by the browser (Only in Chrome and Safari)."," ","Default value: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-framepay-webkit-autofill"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buttons"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The class applied to the element container for buttons."," ","Only applicable to the bank ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["account type"]}," field."," ","Default value: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-framepay-buttons"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["secondary"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The class applied to the element container for additional elements, like hidden dropdowns, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"#expiration"},"children":["card expiration dropdown"]},"."," ","Default value: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-framepay-secondary"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dropdown"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["secondary"]}," element type ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dropdown"]},", the element will have 2 classes ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["secondary"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["dropdown"]},", see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"#expiration"},"children":["card expiration dropdown"]},"."," ","Default value: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-framepay-dropdown"]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["group"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The class applied to the parent node which contains 2 and more rebilly elements, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"#expiration"},"children":["card expiration dropdown"]},"."," ","Default value: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-framepay-group"]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example:"]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"JavaScript","key":"JavaScript"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","data-label":"JavaScript","header":{"controls":{"copy":{}}},"source":"(function () {\n Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n classes: {\n base: 'custom-base',\n focus: 'custom-focus',\n valid: 'custom-valid',\n invalid: 'custom-invalid',\n },\n });\n Framepay.on('ready', () => {\n var card = Framepay.card.mount('#mounting-point');\n });\n})();\n","lang":"JavaScript"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"HTML","key":"HTML"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","data-label":"HTML","header":{"controls":{"copy":{}}},"source":"\n\n\n
\n
\n
\n \n
\n
\n\n","lang":"HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"CSS","key":"CSS"},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"CSS","data-label":"CSS","header":{"controls":{"copy":{}}},"source":".field {\n display: flex;\n}\n\n.field > #mounting-point {\n flex: .8;\n}\n\n.field > button {\n flex: .2;\n margin-left: 20px;\n}\n\nbutton {\n position: relative;\n border: none;\n padding: 8px 16px;\n color: #FFF;\n margin: 0 auto;\n border-radius: 6px;\n background: #1abc9c;\n font-size: 14px;\n text-align: center;\n font-style: normal;\n width: 100%;\n box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -moz-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -o-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -ms-box-shadow: 0 2px 5px 0 rgba(26, 188, 156, 0.5);\n -webkit-transition: all 0.4s;\n -o-transition: all 0.4s;\n -moz-transition: all 0.4s;\n transition: all 0.4s;\n}\n\nbutton:hover {\n background: #000000;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);\n cursor: pointer;\n}\n\n.custom-base {\n outline: 2px solid black !important;\n height: 36px;\n padding: 0 8px;\n border-radius: 4px;\n box-shadow: 0 1px 1px 0 rgba(161, 178, 193, 0.3) inset;\n -webkit-transition: border 150ms ease, box-shadow 150ms ease;\n -moz-transition: border 150ms ease, box-shadow 150ms ease;\n -o-transition: border 150ms ease, box-shadow 150ms ease;\n transition: border 150ms ease, box-shadow 150ms ease;\n box-sizing: border-box;\n overflow: hidden;\n}\n\n.custom-focus {\n outline: 2px solid blue !important;\n}\n\n.custom-valid {\n outline: 2px solid green !important;\n}\n\n.custom-invalid {\n outline: 2px solid red !important;\n}\n","lang":"CSS"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"style":{"marginBottom":"8px","width":"600px","border":"0"},"frameBorder":"0","scrolling":"no","className":"configuration-example-frame configuration-example-frame--small","src":"/examples/framepay-example-classes-1.html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"paypal","__idx":32},"children":["paypal"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This property contains configuration values that change the appearance of the PayPal button."," ","For a complete example, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-paypal-method"},"children":["Set up PayPal"]},"."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://developer.paypal.com/docs/business/checkout/reference/style-guide/"},"children":["PayPal Buttons style guide"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n organizationId: 'your-company-organization-id',\n websiteId: 'your-rebilly-website-id',\n transactionData: {\n currency: 'USD',\n amount: 10,\n },\n paypal: {\n buttonColor: 'blue',\n buttonShape: 'pill',\n buttonHeight: 55,\n }\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"applepay","__idx":33},"children":["applePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This property contains configuration values that change the appearance of the Apple Pay button."," ","For a complete example, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-apple-pay"},"children":["Set up Apple Pay"]},"."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object"]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://applepaydemo.apple.com"},"children":["Apple Pay on the Web Interactive Demo"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n organizationId: 'your-company-organization-id',\n websiteId: 'your-rebilly-website-id',\n transactionData: {\n currency: 'USD',\n amount: 10,\n label: 'Demo purchase from docs example page.',\n lineItems: [\n {\n label: 'Subtotal',\n amount: '8.70',\n },\n {\n label: 'Tax',\n amount: '1.30',\n }\n ]\n },\n applePay: {\n buttonColor: 'white-outline',\n buttonType: 'buy',\n buttonLanguage: 'ar-AB',\n }\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"samsungpay","__idx":34},"children":["samsungPay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This property contains configuration values that change the appearance of the Samsung Pay button."," ","For a complete example, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-samsung-pay"},"children":["Set up Samsung Pay"]},"."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object"]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n organizationId: 'your-company-organization-id',\n websiteId: 'your-rebilly-website-id',\n transactionData: {\n currency: 'USD',\n amount: 10,\n label: 'Demo purchase from docs example page.',\n lineItems: [\n {\n label: 'Subtotal',\n amount: '8.70',\n },\n {\n label: 'Tax',\n amount: '1.30',\n }\n ]\n },\n samsungPay: {\n buttonColor: 'white',\n }\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"googlepay","__idx":35},"children":["googlePay"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This property contains configuration values that change the appearance of the Google Pay™ button."," ","For a complete example, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/docs/dev-docs/setup-google-pay"},"children":["Set up Google Pay™"]},"."]},{"$$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":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Required"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["False"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Updatable"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["True"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Type"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Object"]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"Framepay.initialize({\n publishableKey: 'pk_sandbox_Lvl5rm8lLrtAV6iSL3CIdYLAburumF4Ld8b1KDs',\n organizationId: 'your-company-organization-id',\n websiteId: 'your-rebilly-website-id',\n transactionData: {\n currency: 'USD',\n amount: 10,\n label: 'Demo purchase from docs example page.',\n lineItems: [\n {\n label: 'Subtotal',\n amount: '8.70',\n },\n {\n label: 'Tax',\n amount: '1.30',\n }\n ]\n },\n googlePay: {\n buttonColor: 'black',\n buttonType: 'buy',\n buttonHeight: '48px',\n shippingAddressRequired: true,\n }\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"google-pay-brand-guidelines","__idx":36},"children":["Google Pay™ brand guidelines"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Google Pay™ provides specific guidelines on how the Google Pay™ button must be used."," ","For the full guidelines, see Google's ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://developers.google.com/pay/api/web/guides/brand-guidelines"},"children":["Brand guidelines"]},"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["As a quick reference, here are some general guidelines:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use black buttons on white or light backgrounds to provide contrast."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use white buttons on dark or colorful backgrounds."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Use the same style of button throughout your site."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Ensure that the size of the Google Pay™ buttons remains equal to or larger than other buttons."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Always maintain the minimum clear space of 8 dp on all sides of the payment button."," ","Ensure the clear space is never broken with graphics or text."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For information on UX best practices when using Google Pay™, see ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://developers.google.com/pay/api/web/guides/ux-best-practices"},"children":["UX best practices"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"kountaccountid","__idx":37},"children":["kountAccountId"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configures the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://kount.com/"},"children":["Kount"]}," account used to generate the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["kountFraudSessionId"]},", which"," ","is included in requests to BlueSnap payment gateways."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-structure-example","__idx":38},"children":["Configuration structure example"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This is an example of the structure of the configuration object."," ","To browse the full list of options, see the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"#framepay-configuration-reference"},"children":["configuration reference"]},"."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"{\n publishableKey:'',\n organizationId:'',\n locale: 'auto',\n icon: {\n display: true,\n color: null,\n },\n placeholders: {\n card: {\n number: null,\n expiration: null,\n cvv: null,\n expirationSeparator: null,\n expirationMonth: null,\n expirationYear: null,\n },\n bban: {\n bicTitle: '',\n bicPlaceholder: '',\n bankNameTitle: '',\n bankNamePlaceholder:'',\n routingNumber: null,\n accountNumber: null,\n type: {\n savings: null,\n checking: null,\n other: null,\n },\n },\n iban: {\n bicTitle:'',\n bicPlaceholder: '',\n bankNameTitle:'',\n bankNamePlaceholder:'',\n accountNumber: null\n },\n },\n i18n: {\n en: {\n validations: {\n ... // see i18n configuration details\n [Framepay.errorCodes[codeName]]: 'String value',\n ...\n }\n },\n es: {\n validations: {\n ... // see i18n configuration details\n [Framepay.errorCodes[codeName]]: 'String value',\n ...\n }\n }\n },\n card: {\n expiration: {\n type: 'text',\n },\n cvv: {\n type: 'text'\n },\n brands: {allowed: null},\n },\n style: {\n base:{\n color: null,\n fontFamily: null,\n fontFeatureSettings: null,\n fontKerning: null,\n fontSize: null,\n webkitFontSmoothing: null,\n mozOsxFontSmoothing: null,\n fontStretch: null,\n fontStyle: null,\n fontVariant: null,\n fontWeight: null,\n letterSpacing: null,\n lineHeight: null,\n textAlign: null,\n textDecoration: null,\n textRendering: null,\n textShadow: null,\n textTransform: null,\n ':focus': {/** all base styles **/ },\n ':hover': {/** all base styles **/ },\n ':disabled': {/** all base styles **/ },\n ':webkitAutofill': {/** all base styles **/ },\n '::placeholder': {/** all base styles **/ },\n '::selection': {/** all base styles **/ },\n },\n focus:{ /** all basic styles + placeholders **/},\n valid:{ /** all basic styles + placeholders **/},\n invalid:{ /** all basic styles + placeholders **/},\n buttons:{\n base: {\n background: null,\n borderColor: null,\n borderRadius: null,\n borderStyle: null,\n borderWidth: null,\n color: null,\n fontFamily: null,\n fontFeatureSettings: null,\n fontKerning: null,\n fontSize: null,\n webkitFontSmoothing: null,\n mozOsxFontSmoothing: null,\n fontStretch: null,\n fontStyle: null,\n fontVariant: null,\n fontWeight: null,\n letterSpacing: null,\n lineHeight: null,\n textAlign: null,\n textDecoration: null,\n textRendering: null,\n textShadow: null,\n textTransform: null,\n ':hover': {/** all button base styles **/ }\n }\n focus: { /** all button base styles + :hover **/ }\n active: { /** all button base styles + :hover **/ }\n },\n },\n classes: {\n base: 'rebilly-framepay',\n focus: 'rebilly-framepay-focus',\n valid: 'rebilly-framepay-valid',\n invalid: 'rebilly-framepay-invalid',\n secondary: 'rebilly-framepay-secondary',\n dropdown: 'rebilly-framepay-dropdown',\n group: 'rebilly-framepay-group',\n buttons: 'rebilly-framepay-buttons',\n webkitAutofill: 'rebilly-framepay-webkit-autofill',\n },\n}\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"FramepayToast","attributes":{},"children":[]}]},"headings":[{"value":"FramePay configuration reference","id":"framepay-configuration-reference","depth":1},{"value":"publishableKey","id":"publishablekey","depth":2},{"value":"organizationId","id":"organizationid","depth":2},{"value":"websiteId","id":"websiteid","depth":2},{"value":"leadSource","id":"leadsource","depth":2},{"value":"locale","id":"locale","depth":2},{"value":"methods","id":"methods","depth":2},{"value":"Automatic payment method details","id":"automatic-payment-method-details","depth":3},{"value":"Manual payment method details","id":"manual-payment-method-details","depth":3},{"value":"transactionData","id":"transactiondata","depth":2},{"value":"Icon","id":"icon","depth":2},{"value":"Display","id":"display","depth":3},{"value":"Color","id":"color","depth":3},{"value":"Payment card example","id":"payment-card-example","depth":4},{"value":"IBAN element example","id":"iban-element-example","depth":4},{"value":"placeholders","id":"placeholders","depth":2},{"value":"payment card placeholders","id":"payment-card-placeholders","depth":3},{"value":"custom expiration placeholder","id":"custom-expiration-placeholder","depth":4},{"value":"Bank account placeholders","id":"bank-account-placeholders","depth":3},{"value":"Placeholders and locale","id":"placeholders-and-locale","depth":3},{"value":"i18n","id":"i18n","depth":2},{"value":"Validations i18n","id":"validations-i18n","depth":3},{"value":"Payment card in combined mode","id":"payment-card-in-combined-mode","depth":4},{"value":"Payment card in separated mode","id":"payment-card-in-separated-mode","depth":4},{"value":"expiration","id":"expiration","depth":3},{"value":"Expiration dropdown in combined mode","id":"expiration-dropdown-in-combined-mode","depth":4},{"value":"Expiration dropdown in separated mode","id":"expiration-dropdown-in-separated-mode","depth":4},{"value":"cvv","id":"cvv","depth":3},{"value":"style","id":"style","depth":2},{"value":"Common States","id":"common-states","depth":3},{"value":"Buttons","id":"buttons","depth":4},{"value":"classes","id":"classes","depth":2},{"value":"paypal","id":"paypal","depth":2},{"value":"applePay","id":"applepay","depth":2},{"value":"samsungPay","id":"samsungpay","depth":2},{"value":"googlePay","id":"googlepay","depth":2},{"value":"Google Pay™ brand guidelines","id":"google-pay-brand-guidelines","depth":3},{"value":"kountAccountId","id":"kountaccountid","depth":2},{"value":"Configuration structure example","id":"configuration-structure-example","depth":2}],"frontmatter":{"seo":{"title":"FramePay configuration reference","description":"Learn about FramePay.","keywords":"Developer docs, FramePay","lang":"en-US"},"redirects":{"/docs/developer-docs/framepay/configuration/":{},"/docs/developer-docs/framepay/framepay-configuration-reference/":{},"/docs/content/dev-docs/concept/framepay-configuration-reference/":{},"/docs/content/concepts-and-features/concept/framepay-configuration-reference/":{},"/docs/concepts-and-features/concept/framepay-configuration-reference/":{}},"excludeFromSearch":true},"lastModified":"2026-01-12T11:16:51.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/framepay-configuration-reference","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}