{"templateId":"markdown","versions":[{"version":"production","label":"July '26","link":"/docs/payments/pay-button","default":true,"active":true,"folderId":"a2557b8d"}],"sharedDataIds":{"sidebar":"sidebar-docs/@production/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["img"]},"redocly_category":"Accept & Collect","type":"markdown"},"seo":{"title":"Pay Button","description":"The FinDock Pay Button is a Lightning Web Component that can be used in Flows or custom LWCs.","siteUrl":"https://docs.findock.com","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]},"keywords":"payment experiences, pay button, lightning web component"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"pay-button","__idx":0},"children":["Pay Button"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The FinDock Pay Button Lightning Web Component (LWC) defines the payment details for your payment experience. In practice, this means you use the built-in configuration builder to define the payment intent payload that your Flow sends to the Payment API. The Pay Button represents all the functionality the API offers."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"getting-started","__idx":1},"children":["Getting Started"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Pay Button can be added to your own flows or accessed from one of FinDock’s Flow templates, as shown here."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/pay-button.fcfe25078826e18e88683e9126299f0adce09eec76903338783ce726f522e876.f78e0b2f.png","alt":"Payment Method Selector","framed":false,"withLightbox":true,"style":{"borderRadius":"5px","width":"600px"}},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The component has two additional settings controlling its behavior:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Button label"]},": can be used to change and/or translate the text shown on the button. Both a static text value as well as a Flow resource can be used."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["A ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Disabled"]},": behaves like the standard Flow Action Button component’s disabled setting. This can be used to control whether the button can or can not be clicked, based on whether required fields have been filled and input values pass validation. A simple formula field could be used to control this behavior."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"configuration-editor","__idx":2},"children":["Configuration editor"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click Configure Payment Intent Context to launch the configuration editor. The main view presents the different elements of a Payment Intent request."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The request configuration is broken down into the following sections, which reflect the overall structure of a Payment Intent payload callout to the Payment API:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["General"]}," settings, like where to direct the payer upon success or failure. This can be an Experience Cloud site page or any other webpage."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Payer"]}," details, for Contact, Account or Person Account records."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["One-time"]}," payment settings including amount and currency."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Recurring"]}," payment settings, including amount, currency, frequency and dates."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Payment method"]}," settings like processor, payment method and target"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Optional ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Package Actions"]}," that store data related to the payment for specific Source packages like Gift Aid or Fundraising tributes."]}]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/pay-button-configuration.d03c177ed63f3bab8f5c83b24c48becc8b9fa3ac9f764210ff3b8dafec2cfa23.f78e0b2f.png","alt":"Payment Method Selector","framed":false,"withLightbox":true,"style":{"borderRadius":"5px","width":"600px"}},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can set the values in multiple ways, using familiar Flow features."]},{"$$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":"Value Type"},"children":["Value Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Example"},"children":["Example"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Hardcoded"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Static URL for the Success URL field",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/pay-button-hardcoded-value.7520ba978d5fb3f7f98d4e35a6642d753dba8cc80a2603fa9bef3b9fe6ef7522.f78e0b2f.png","alt":"Component value as hardcoded value","framed":false,"withLightbox":true,"style":{"borderRadius":"5px","width":"300px"}},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Single Flow resource"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Flow resource with a single value, like the output value of a Frequency selection",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/pay-button-flow-resource-mapping.ffeb781c1d237844fae80f40314f88af62aafcd510270dbdfec0788ddb74d315.f78e0b2f.png","alt":"Component value as single Flow resource","framed":false,"withLightbox":true,"style":{"borderRadius":"5px","width":"300px"}},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Variable Flow resource"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Flow Variable Object output containing multiple values, like a Contact object built by an Assignment step in the Flow",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/pay-button-flow-variable-object-mapping.51e396bd6c9d2053beb6e6ff717cb480ca92b88da332a2e0a374b59bd38e6944.f78e0b2f.png","alt":"Component value as single Flow resource","framed":false,"withLightbox":true,"style":{"borderRadius":"5px","width":"300px"}},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/pay-button-flow-variable-object-mapping-config.85989fb9ca4e70f079a47b7006096c35f93adda62357f17661cd8f67e359cf1b.f78e0b2f.png","alt":"Component value as single Flow resource","framed":false,"withLightbox":true,"style":{"borderRadius":"5px","width":"300px"}},"children":[]}]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":["LWC output"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["LWC with single or multiple values, like the output of Payment Method Selector",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/pay-button-lwc-output-mapping.d435cb97fa3af4d3640bd7dcabc70cc9e4ddf58fe0f17f87076bac70c7d63032.f78e0b2f.png","alt":"Component value as single Flow resource","framed":false,"withLightbox":true,"style":{"borderRadius":"5px","width":"300px"}},"children":[]}]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"using-pay-button-in-lwc","__idx":3},"children":["Using Pay Button in LWC"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If pro-code development with LWC is preferred over the no-code options of Flow, the FinDock Pay Button can be implemented in a LWC component to simplify some of the API handling."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["There are four properties that can be set on the Pay Button:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["button-label (default Pay) the label to display on the button"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["payment-intent a payment intent API JSON payload that represents the Payment Intent object of the Payment API. For more information on the API, please see the API reference."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["show-error true/false (default true) hides the small red error message above the button. Useful when implementing your own error handling"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["onResult is an event handler that is called when the pay button returns a result from the API."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The result retrieved from onResult is an object with these possible fields:"," ","paymentIntentId, redirectUrl, errorMessage, statusCode."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When the callout encounters an error, errorMessage and statusCode will be filled with the error from the PaymentIntent API. When the callout is successful the payer is redirected automatically. You do not need to handle paymentIntentId and redirectUrl yourself."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["customComponent.html"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<template>\n    <c-pay-button\n        button-label={buttonLabel}\n        payment-intent={paymentIntent}\n        show-error={showError}\n        onresult={handleResult}\n    ></c-pay-button>\n    <template lwc:if={resultText}>\n        <p>{resultText}</p>\n    </template>\n</template>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["customComponent.js"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"javascript","header":{"controls":{"copy":{}}},"source":"import { LightningElement } from 'lwc';\n\n/**\n * Example Pay Button Wrapper\n *\n * A thin wrapper that renders the Pay Button with a hardcoded button label and\n * an example one-time payment intent payload, used to exercise the direct\n * payment intent path without Flow configuration.\n */\nexport default class CustomComponent extends LightningElement {\n    buttonLabel = 'Pay now';\n    showError = false;\n    resultText;\n\n    handleResult(event) {\n        this.resultText = JSON.stringify(event.detail);\n    }\n\n    paymentIntent = {\n        SuccessURL: 'https://example.com/success',\n        FailureURL: 'https://example.com/failure',\n        Payer: {\n            Contact: {\n                SalesforceFields: {\n                    FirstName: 'Test',\n                    LastName: 'Payment',\n                    Email: 'test@findock.com',\n                    MailingStreet: 'Any Street',\n                    MailingCity: 'Any City',\n                    MailingPostalCode: '00000',\n                    MobilePhone: '012-3456789'\n                }\n            }\n        },\n        OneTime: {\n            Amount: 10,\n            CurrencyISOCode: 'EUR'\n        },\n        PaymentMethod: {\n            Name: 'CreditCard',\n            Processor: 'DummyExtension-PSP',\n            Target: 'Account NL'\n        }\n    };\n}\n","lang":"javascript"},"children":[]}]},"headings":[{"value":"Pay Button","id":"pay-button","depth":1},{"value":"Getting Started","id":"getting-started","depth":2},{"value":"Configuration editor","id":"configuration-editor","depth":2},{"value":"Using Pay Button in LWC","id":"using-pay-button-in-lwc","depth":2}],"frontmatter":{"seo":{"title":"Pay Button","description":"The FinDock Pay Button is a Lightning Web Component that can be used in Flows or custom LWCs.","keywords":"payment experiences, pay button, lightning web component"}},"lastModified":"2026-07-19T15:54:03.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/payments/pay-button","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}