{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"Flute Elements","siteUrl":"https://developer.flute.com","description":"Documentation and API reference for integrating Flute payment processing.","lang":"en-US","llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"flute-elements","__idx":0},"children":["Flute Elements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Flute Elements is a drop-in JavaScript library that embeds PCI-compliant payment fields directly into your checkout page."," ","It lets you collect card details without sensitive data ever touching your servers, as the embedded elements are securely rendered and managed by Flute's infrastructure."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Flute Elements renders secure, isolated payment input fields, such as card number, expiry, and CVV, inside your page by iframes managed by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flute.js"]}," library."," ","This means:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["PCI-DSS compliance"]},". Card data is captured and transmitted through Flute's secure infrastructure, not your servers."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom user experience"]},". You control the flow after submission, either by handling the result inline with a callback or redirecting the customer to a custom result page."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Full styling control"]},". Customize fonts, colors, borders, and layout to match your branding."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"using-flute-elements","__idx":1},"children":["Using Flute Elements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The integration with Flute Elements follows three steps:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Step 1: Loading the flute.js library"]}," into your checkout page."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Step 2: Building the payment form"]}," using a payment session identifier from your backend."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Step 3: Submitting the form"]}," and retrieving the result from your backend."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"step-1-loading-the-flutejs-library","__idx":2},"children":["Step 1: Loading the flute.js Library"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add the script tag to your checkout page:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n \n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"step-2-building-the-payment-form","__idx":3},"children":["Step 2: Building the Payment Form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To build the payment form, you need to create a payment session from your backend process and then initialize the Flute Elements form in the front-end using the session ID."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"creating-a-payment-session-backend-process","__idx":4},"children":["Creating a Payment Session (backend process)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Your backend process must create a payment session before initializing the Flute Elements form in the front-end."," ","To create the session, call the payment session endpoint from your backend processer."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Sandbox Environment:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","header":{"controls":{"copy":{}}},"source":"POST https://sandbox.api.flute.com/pay-int-api/payment-sessions\n","lang":"HTML"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Production Environment:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","header":{"controls":{"copy":{}}},"source":"POST https://api.flute.com/pay-int-api/payment-sessions\n","lang":"HTML"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["An API token is needed when creating payment sessions."," ","For more information, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-reference/v1/api-suite-fundamentals/generating-an-api-token"},"children":["Generating an API Token"]}," in the API reference guide."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Request Body Parameters:"]}]},{"$$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":"Field"},"children":["Field"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"center","data-label":"Required"},"children":["Required"]},{"$$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":["amount"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["number",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"(float)"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"center"},"children":["Yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Specifies the base charge amount. For example, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["129.50"]}," for $129.50."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["mode"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"center"},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Specifies what the session is allowed to do. Omit or set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]}," to use the default. Accepted values:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"• ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Payment\""]}," (default) — processes a payment without storing the card.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"• ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"PaymentAndSave\""]}," — processes a payment and optionally or mandatorily stores the card.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"• ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"SaveMethod\""]}," — stores the card in the vault without processing a payment (requires ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amount: 0"]},")."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["referenceId"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"center"},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Specifies the merchant-supplied identifier (max 100 characters) used for duplicate payment detection. When provided, payments with the same ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["referenceId"]}," within the duplicate-detection window are rejected. Omit or set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]}," when not needed."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["skipAddressVerification"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"center"},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Specifies using the AVS (address verification) system checks for this session.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"If ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", skips the AVS system checks.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"If ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},", use the AVS system checks.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"The default is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["tipAmount"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["number",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"(float)"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"center"},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Specifies the tip amount charged on top of the base amount For example, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["5.00"]}," for $5.00. Omit or set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["null"]}," when no tip applies. Only accepted when tips are enabled for the merchant."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["customerId"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string (UUID)"]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"center"},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Specifies the customer identifier to associate vault entries with. Only relevant for vault-enabled sessions (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SaveMethod"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PaymentAndSave"]},").",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["If omitted"]},", a new customer is created automatically and the resulting ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customerId"]}," is returned in the confirm response through ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["GET /pay-int-api/payment-sessions/{paymentSessionId}"]},". Store it to reuse in future sessions.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"• ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["If provided"]},", the new payment method is vaulted under that existing customer."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following is a sample request for the sandbox environment."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"curl -X POST 'https://sandbox.api.flute.com/pay-int-api/payment-sessions' \\\n -H 'Accept: application/json' \\\n -H 'Authorization: Bearer ' \\\n -H 'Content-Type: application/json' \\\n -d '{\n \"amount\": 129.50,\n \"mode\": \"PaymentAndSave\",\n \"referenceId\": \"order-8675309\",\n \"skipAddressVerification\": false,\n \"tipAmount\": 5.00,\n \"customerId\": \"123e4567-e89b-12d3-a456-426614174000\"\n }'\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following is a sample response from the previous call."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"id\": \"0cdddcb6-fa98-4c46-b096-a2723b56c750\"\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The payment session endpoint response contains the session identifier in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," field)."," ","The front-end process uses this value to initialize the form."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"adding-the-form-wrapper-element-front-end-process","__idx":5},"children":["Adding the form wrapper element (front-end process)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add a wrapper element that will contain the Flute Elements embedded form."," ","You can also add a submit button or use your existing checkout button to trigger the form submission."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"

\n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Flute Elements will render the payment fields inside the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#flute-payment-form"]}," wrapper element."," ","The tag IDs (",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#flute-payment-form"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["#flute-payment-submit-btn"]},") can be customized, but they must match the IDs used in the mounting and event listener steps below."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"mounting-the-flute-elements-form-front-end-process","__idx":6},"children":["Mounting the Flute Elements Form (front-end process)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Pass the session identifier (the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," field returned by the backend process) to Flute Elements and mount the payment element."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"const flute = new window.Flute();\n\nconst elements = flute.elements({\n sessionId: 'SESSION_ID', // Requested - Payment session identifier from your backend process.\n appearance: {}, // Optional — See Customizing the Appearance below.\n});\n\nconst paymentElement = elements.create('payment');\n\npaymentElement.mount({\n component: 'flute-payment-form', // Identifier of the wrapper element in your page.\n});\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"step-3-submitting-the-form","__idx":7},"children":["Step 3: Submitting the Form"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Attach a click handler to your submit button."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"const submitButton = document.getElementById('flute-payment-submit-btn');\n\nsubmitButton.addEventListener('click', () => {\n flute.submit({\n confirmParams: {\n submission_callback: () => {\n // Payment interaction complete.\n // Call your backend process to `GET /pay-int-api/payment-sessions/{flute_session_id}`\n // to retrieve the transaction result.\n },\n error_callback: (message, code) => {\n alert(message);\n // If code is 3 or 4, generate a new payment session identifier from your backend process and refresh the form\n if (code === 3 || code === 4) {\n // Session is consumed, generate a new one and update the form\n const newSessionId = 'NEW_SESSION_ID_FROM_BACKEND';\n flute.updateSessionId(newSessionId);\n }\n },\n },\n });\n});\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Deprecated method"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flute.confirmPayment()"]}," is deprecated. Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flute.submit()"]}," instead. It has the same interface."]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Deprecated parameter"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["return_url"]}," is deprecated. Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["submission_callback"]}," instead and redirect manually when needed:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"submission_callback: () => {\n window.location.href = '/your-success-page';\n},\n","lang":"js"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"retrieving-the-session-result-backend-process","__idx":8},"children":["Retrieving the Session Result (backend process)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Always retrieve the Session Result from your backend process."," ","Never trust the front-end process for session status or results, as it can be spoofed and manipulated."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After the customer completes the form submission, your backend process must call the Payment Session endpoint to get the actual status and details."," ","This will return one of the following session statuses: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Created"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Completed"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Cancelled"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Failed"]},". The response will also contain more information about the session, such as transaction or customer details."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"GET /pay-int-api/payment-sessions/{flute_session_id}\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"error-handling","__idx":9},"children":["Error Handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When a payment submission fails, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["error_callback"]}," front-end callback method receives a message and the numeric error code."," ","For error codes ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["1"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["2"]}," the session has not been consumed and it can be retried, but for error codes ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["3"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["4"]},", the session is consumed and cannot be reused. In this case, you need to generate a new session identifier from the backend process and call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["flute.updateSessionId(newSessionId)"]}," to retry."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Error Codes:"]}]},{"$$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":{"align":"center","data-label":"Code"},"children":["Code"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Message"},"children":["Message"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Meaning"},"children":["Meaning"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"center"},"children":["1"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Something went wrong, check payment details and try again."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The payment was not submitted due to a validation error such as invalid BIN (card number) or duplicate transaction identified in a short time frame. Session remains open for new payment attempts."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"center"},"children":["2"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["An integration problem has been detected. Contact the administrator."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Integration or server-side error. Session stays open for retry. Recommended to review the payload data and mounted elements before retrying."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"center"},"children":["3"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Something went wrong, check the payment session identifier and try again."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Invalid or expired payment session identifier. Generate a new payment session identifier from your backend process and update the form."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{"align":"center"},"children":["4"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["The payment could not be completed. Check payment details and try again."]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Transaction declined, such as insufficient funds or an incorrect CVV. Generate a new payment session identifier to retry."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"address-verification-service-avs","__idx":10},"children":["Address Verification Service (AVS)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["AVS (address verification service) is a system that verifies the cardholder's billing address with the card issuer."," ","It attempts to reduce fraud and improve transaction approval rates."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Flute Elements can collect cardholder name and ZIP Code and postal codes through dedicated elements that you create alongside the payment element."," ","Each element supports a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hidden"]}," option to control visibility and a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["values"]}," option to set predefined values to these fields."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"creating-the-elements","__idx":11},"children":["Creating the Elements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After initializing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["elements"]}," with a session ID, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["elements.create()"]}," to add the cardholder elements before mounting."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"customer-name-element","__idx":12},"children":["Customer Name Element"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Collects the cardholder's first and last name."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"// Visible — fields are shown empty for the customer to fill in\nelements.create('customer-name');\n\n// Visible and Pre-filled — fields are shown pre-filled; the customer can edit them\nelements.create('customer-name', {\n values: { firstName: 'John', lastName: 'Doe' },\n});\n\n// Hidden — values are submitted without displaying the fields\nelements.create('customer-name', {\n hidden: true,\n values: { firstName: 'John', lastName: 'Doe' },\n});\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Option"},"children":["Option"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Required"},"children":["Required"]},{"$$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":["hidden"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", the fields are not rendered in the UI. When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," (or omitted), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["values"]}," act as optional defaults the customer can override. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["values.firstName"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Conditional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Cardholder first name. Required when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hidden"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},". Both ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["firstName"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lastName"]}," must be provided together."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["values.lastName"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Conditional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Cardholder last name. Required when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hidden"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},". Both ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["firstName"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lastName"]}," must be provided together."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"address-element","__idx":13},"children":["Address Element"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Collects the cardholder's billing address for AVS (address verification service) verification."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"// Visible — field is shown pre-filled; the customer can edit it\nelements.create('address', {\n values: { zipCode: '12345' },\n});\n\n// Hidden — value is submitted without displaying the field\nelements.create('address', {\n hidden: true,\n values: { zipCode: '12345' },\n});\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Option"},"children":["Option"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Required"},"children":["Required"]},{"$$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":["hidden"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["No"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},", the field is not rendered in the UI. When ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]}," (or omitted), ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["values"]}," acts as the default input value, which the customer can override. Defaults to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["values.zipCode"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Conditional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Postal or ZIP code. Required when ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["hidden"]}," is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mounting-all-elements","__idx":14},"children":["Mounting All Elements"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After creating the payment, customer-name, and address elements, mount them all into a single secure iframe. You can create the elements in any order."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"const flute = new window.Flute();\n\nconst elements = flute.elements({\n sessionId: 'SESSION_ID',\n appearance: {},\n});\n\nelements.create('customer-name');\nelements.create('payment');\nelements.create('address');\n\nelements.mount('#flute-payment-form');\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Elements are rendered in the order they are created. If ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["address"]}," is created before ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["payment"]},", the address fields will appear above the payment fields in the form. Adjust the order of your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["elements.create()"]}," calls to control the layout."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"card-vault","__idx":15},"children":["Card Vault"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Flute Elements supports saving a card to the customer vault in addition to, or instead of, processing an immediate payment. The vault mode is controlled by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveMethod"]}," option when creating the payment element, and by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mode"]}," set at session creation time on your backend."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"operating-modes","__idx":16},"children":["Operating Modes"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mode"]}," field (set when creating the session on the backend) and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveMethod"]}," (set on the front-end element) must be used together. The table below shows the valid combinations and their behavior."]},{"$$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":"mode (backend)"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mode"]}," (backend)"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"saveMethod (front-end)"},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveMethod"]}," (front-end)"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Behavior"},"children":["Behavior"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"Payment\""]}," (default)"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"em","attributes":{},"children":["(not applicable)"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Processes the payment only. Card is not stored."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"SaveMethod\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"vaultOnly\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Stores the card in the vault without charging. A disclosure notice is shown. If no ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customerId"]}," is provided, a new customer record is created automatically."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"PaymentAndSave\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"askConsent\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Processes the payment. A checkbox lets the customer opt-in to saving their card."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"PaymentAndSave\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"implicit\""]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Processes the payment and always saves the card. A disclosure notice is shown."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"backend-session-setup-for-vaulting","__idx":17},"children":["Backend Session Setup for Vaulting"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Payment session (default)"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"curl -X POST '.../pay-int-api/payment-sessions' \\\n -H 'Authorization: Bearer ACCESS_TOKEN' \\\n -H 'Content-Type: application/json' \\\n -d '{\n \"amount\": 129.50\n }'\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Payment with optional or mandatory vaulting"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"curl -X POST '.../pay-int-api/payment-sessions' \\\n -H 'Authorization: Bearer ACCESS_TOKEN' \\\n -H 'Content-Type: application/json' \\\n -d '{\n \"amount\": 129.50,\n \"mode\": \"PaymentAndSave\"\n }'\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Vault-only card storage"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"curl -X POST '.../pay-int-api/payment-sessions' \\\n -H 'Authorization: Bearer ACCESS_TOKEN' \\\n -H 'Content-Type: application/json' \\\n -d '{\n \"amount\": 0,\n \"mode\": \"SaveMethod\",\n \"customerId\": \"CUSTOMER_ID\"\n }'\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For vault-only sessions, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amount"]}," must be ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["0"]},"."," ","Optionally provide a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customerId"]}," to attach the card to an existing customer record."," ","If omitted, a new customer record is created automatically."," ","The resulting ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["customerId"]}," can be retrieved with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["GET /pay-int-api/payment-sessions/{paymentSessionId}"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"front-end-element-setup-for-vaulting","__idx":18},"children":["Front-end Element Setup for Vaulting"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveMethod"]}," when calling ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["elements.create('payment', options)"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"\n// For Session mode \"PaymentAndSave\":\n\n// Payment with optional vaulting — shows an opt-in checkbox\nconst paymentElement = elements.create('payment', {\n saveMethod: 'askConsent',\n});\n\n// Payment with mandatory vaulting — shows a disclosure\nconst paymentElement = elements.create('payment', {\n saveMethod: 'implicit',\n});\n\n// For Session mode \"SaveMethod\":\n\n// Vault-only — shows a disclosure, no payment is processed\nconst paymentElement = elements.create('payment', {\n saveMethod: 'vaultOnly',\n});\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"label-overrides","__idx":19},"children":["Label Overrides"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["askConsent"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["implicit"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vaultOnly"]}," save methods, Flute Elements displays a checkbox or disclosure to inform the customer about card vaulting."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The checkbox label (for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"askConsent\""]},") and the disclosure label (for ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"implicit\""]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["\"vaultOnly\""]},") can be overridden with the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labels"]}," option."," ","Values must not be empty strings."]},{"$$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":"Default Value"},"children":["Default Value"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Shown for"},"children":["Shown 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":["labels.saveConsent"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["\"Save this card for future payments.\""]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveMethod: \"askConsent\""]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["labels.disclosure"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["\"This card will be saved for future payments.\""]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveMethod: \"implicit\""]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["saveMethod: \"vaultOnly\""]}]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Example with custom checkbox label:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"const paymentElement = elements.create('payment', {\n saveMethod: 'askConsent',\n labels: {\n saveConsent: 'Remember my card for next time.',\n },\n});\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"retrieving-the-vault-result","__idx":20},"children":["Retrieving the Vault Result"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To get the vaulted payment method identifier and customer identifier, you can retrieve these values by calling ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["GET /pay-int-api/payment-sessions/{flute_session_id}"]}," from your backend."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"managing-customers-and-vaulted-cards","__idx":21},"children":["Managing Customers and Vaulted Cards"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Once a card is stored, your backend process can manage customers and their saved payment methods through the Customer API."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["List your customers:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"GET /v1/customers\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Get a specific customer:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"GET /v1/customers/{customerId}\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["List payment methods for a customer:"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"GET /v1/customers/{customerId}/payment-methods\n"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["See the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/api-reference/v1/customers"},"children":["Customers API Reference"]}," for full request or response schemas and pagination options."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customizing-the-appearance","__idx":22},"children":["Customizing the Appearance"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Flute Elements supports custom theming through the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["appearance"]}," option to make the form match your brand and design."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"const elements = flute.elements({\n sessionId: sessionId,\n appearance: {\n elements: {\n formBackgroundColor: '#e1e9eb',\n fontFamily: 'Verdana, sans-serif',\n fontSizeBase: '16px',\n labelColor: '#107b92',\n labelAsteriskColor: '#0000ff',\n inputTextColor: '#107b92',\n inputBorder: 'none',\n inputBackgroundColor: '#c8d6d9',\n inputBorderRadius: '6px',\n inputFocusedBottomBorderColor: '#107b92',\n inputErrorBackgroundColor: '#ecc9c9',\n errorFontSize: '14px',\n errorColor: '#cd2424',\n },\n },\n});\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Available Appearance 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":{"data-label":"Property"},"children":["Property"]},{"$$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":["formBackgroundColor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color of the payment form container."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["fontFamily"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Font family for all text elements."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["fontSizeBase"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Base font size for input fields"]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["labelColor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color of field labels."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["labelAsteriskColor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color of the required field asterisk."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["inputTextColor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color of text inside input fields."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["inputBorder"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Border style for input fields."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["inputBackgroundColor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color of input fields."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["inputBorderRadius"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Border radius of input fields."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["inputFocusedBottomBorderColor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Bottom border color when an input is focused."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["inputErrorBackgroundColor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Background color of input fields in an error state."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["errorFontSize"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Font size for error messages."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["errorColor"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Color of error message text."]}]}]}]}]}]},"headings":[{"value":"Flute Elements","id":"flute-elements","depth":1},{"value":"Using Flute Elements","id":"using-flute-elements","depth":2},{"value":"Step 1: Loading the flute.js Library","id":"step-1-loading-the-flutejs-library","depth":3},{"value":"Step 2: Building the Payment Form","id":"step-2-building-the-payment-form","depth":3},{"value":"Creating a Payment Session (backend process)","id":"creating-a-payment-session-backend-process","depth":4},{"value":"Adding the form wrapper element (front-end process)","id":"adding-the-form-wrapper-element-front-end-process","depth":4},{"value":"Mounting the Flute Elements Form (front-end process)","id":"mounting-the-flute-elements-form-front-end-process","depth":4},{"value":"Step 3: Submitting the Form","id":"step-3-submitting-the-form","depth":3},{"value":"Retrieving the Session Result (backend process)","id":"retrieving-the-session-result-backend-process","depth":4},{"value":"Error Handling","id":"error-handling","depth":2},{"value":"Address Verification Service (AVS)","id":"address-verification-service-avs","depth":2},{"value":"Creating the Elements","id":"creating-the-elements","depth":3},{"value":"Customer Name Element","id":"customer-name-element","depth":4},{"value":"Address Element","id":"address-element","depth":4},{"value":"Mounting All Elements","id":"mounting-all-elements","depth":3},{"value":"Card Vault","id":"card-vault","depth":2},{"value":"Operating Modes","id":"operating-modes","depth":3},{"value":"Backend Session Setup for Vaulting","id":"backend-session-setup-for-vaulting","depth":3},{"value":"Front-end Element Setup for Vaulting","id":"front-end-element-setup-for-vaulting","depth":3},{"value":"Label Overrides","id":"label-overrides","depth":3},{"value":"Retrieving the Vault Result","id":"retrieving-the-vault-result","depth":3},{"value":"Managing Customers and Vaulted Cards","id":"managing-customers-and-vaulted-cards","depth":3},{"value":"Customizing the Appearance","id":"customizing-the-appearance","depth":2}],"frontmatter":{"title":"Flute Elements","description":"Embed PCI-compliant payment forms into your website using Flute Elements, a drop-in JavaScript library for collecting payment details securely.","seo":{"title":"Flute Elements"}},"lastModified":"2026-06-08T15:37:23.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/online-payments/flute-elements","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}