{"templateId":"markdown","versions":[{"version":"production","label":"September '26","link":"/docs/payments/building-payment-experiences","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":"Building payment Experiences","description":"FinDock's managed components for Payment Experiences can be easily used with Salesforce Flows custom Experience Could sites and orchestrating business processes.","siteUrl":"https://docs.findock.com","keywords":"payment experiences, flows"},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"building-payment-experiences","__idx":0},"children":["Building payment experiences"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We designed the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Pay Button"]}," and ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Payment Method Selector"]}," components of FinDock Payment Experiences for easy implementation in Flows. The key ingredient here is the Configuration Editor extension built into the core LWC technology of these components."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The diagram below gives you an idea of how the different building blocks work together in your custom digital experience development options."]},{"$$mdtype":"Tag","name":"Diagram","attributes":{"data-language":"mermaid","diagramType":"mermaid","diagramSource":"flowchart TB\n\n %% ================= Lane 1: Flow Configuration Editor =================\n subgraph lane1[\"Flow Configuration Editors (FinDock Managed)\"]\n direction LR\n pmsce[\"Payment Method Selector
Configuration Editor\"]\n pbce[\"PayButton
Configuration Editor\"]\n end\n\n %% ================= Lane 2: Components =================\n subgraph lane2[\"Components (FinDock Managed)\"]\n subgraph flow[\"Flow\"]\n direction LR\n pms[\"Payment Method Selector\"]\n pb[\"PayButton\"]\n end\n end\n\n %% ================= Lane 3: Payment API =================\n subgraph lane3[\"Payment API\"]\n payIntent[\"/PaymentIntent\"]\n end\n\n %% ================= Edges =================\n pmsce -->|\"Payment method config\"| pms\n pbce -->|\"Payment intent config\"| pb\n pms -->|\"PaymentMethod block\"| pb\n pb -->|\"Full payment intent\"| payIntent\n payIntent -->|\"RedirectURL + PaymentIntent Id\"| pb\n\n %% ================= Styling =================\n style payIntent stroke:#24315E\n style pmsce stroke:#24315E\n style pbce stroke:#24315E\n style pms stroke:#24315E\n style pb stroke:#24315E\n style lane1 fill:#8282FC,stroke:#24315E\n style lane2 fill:#8282FC,stroke:#24315E\n style lane3 stroke:#24315E\n style flow stroke:#24315E,stroke-dasharray:4 4\n","diagramHtml":"

Payment API

Components (FinDock Managed)

Full payment intent

RedirectURL + PaymentIntent Id

Payment method config

Payment intent config

Flow

PaymentMethod block

Payment Method Selector

PayButton

Flow Configuration Editors (FinDock Managed)

Payment Method Selector
Configuration Editor

PayButton
Configuration Editor

/PaymentIntent

","diagramHtmlDark":"

Payment API

Components (FinDock Managed)

Full payment intent

RedirectURL + PaymentIntent Id

Payment method config

Payment intent config

Flow

PaymentMethod block

Payment Method Selector

PayButton

Flow Configuration Editors (FinDock Managed)

Payment Method Selector
Configuration Editor

PayButton
Configuration Editor

/PaymentIntent

"},"children":["flowchart TB\n\n %% ================= Lane 1: Flow Configuration Editor =================\n subgraph lane1[\"Flow Configuration Editors (FinDock Managed)\"]\n direction LR\n pmsce[\"Payment Method Selector
Configuration Editor\"]\n pbce[\"PayButton
Configuration Editor\"]\n end\n\n %% ================= Lane 2: Components =================\n subgraph lane2[\"Components (FinDock Managed)\"]\n subgraph flow[\"Flow\"]\n direction LR\n pms[\"Payment Method Selector\"]\n pb[\"PayButton\"]\n end\n end\n\n %% ================= Lane 3: Payment API =================\n subgraph lane3[\"Payment API\"]\n payIntent[\"/PaymentIntent\"]\n end\n\n %% ================= Edges =================\n pmsce -->|\"Payment method config\"| pms\n pbce -->|\"Payment intent config\"| pb\n pms -->|\"PaymentMethod block\"| pb\n pb -->|\"Full payment intent\"| payIntent\n payIntent -->|\"RedirectURL + PaymentIntent Id\"| pb\n\n %% ================= Styling =================\n style payIntent stroke:#24315E\n style pmsce stroke:#24315E\n style pbce stroke:#24315E\n style pms stroke:#24315E\n style pb stroke:#24315E\n style lane1 fill:#8282FC,stroke:#24315E\n style lane2 fill:#8282FC,stroke:#24315E\n style lane3 stroke:#24315E\n style flow stroke:#24315E,stroke-dasharray:4 4\n"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"using-pay-button-in-flows","__idx":1},"children":["Using Pay Button in Flows"]},{"$$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":3,"id":"getting-started","__idx":2},"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":3,"id":"configuration-editor","__idx":3},"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":["Payer"]}," details, for Contact, Account or Person Account records."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Payment"]}," settings for one-time or recurring payments, 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":[{"$$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":["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.ce5f0959a07226dd3cbfb2dc2c11f50a90e076b52dc201f2434e1f081973173d.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.a8e59822bce1608c61ae48970c278a6a6ad12b30128fef15c69251c6ff8a756c.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.c07a0c43dfbc23c665c3bbfba7ff7cb066f4c5dcd8dacfb1d7ceb91765886a59.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.5147c7b73ff8c6cc201550b42c4e1c44c0060c6072cf03fa36e6e4b2decd9c60.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.b43a566ec1e46f57f5cbbde1ccc69189f0cb3063fc80d3ee8e0ea84e1a142a96.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-payment-method-selector-in-flows","__idx":4},"children":["Using Payment Method Selector in Flows"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The FinDock Payment Method Selector is a Lightning Web Component (LWC) that can be embedded in any Lightning-enabled context, including Flows and other LWCs. The selector uses advanced logic and a custom configuration editor to simplify the tasks of designing payment method selection in a digital payment experience."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"getting-started-1","__idx":5},"children":["Getting started"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Payment Method Selector 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/payment-method-selector.6810075733a8a48d50e685bf7624e59a24b82f5bdc00df4a76a6fa52d18fefd7.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 standard Properties and Style options you can adjust to fit your needs. In addition, you need to define the Payment Type and Payment Intent Response properties."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Payment Type can be configured as:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Empty: component uses the default frequency (usually oneTime)"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Static: component uses the provided string value"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dynamic: component uses a Flow variable to determine frequency"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Payment Intent Response property allows the response from the Pay Button component to be passed back to the Payment Method Selector if there is an error. The best approach for this property is to use the dynamic result value of the Pay Button component (as shown in the screenshot above)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configuration-editor-1","__idx":6},"children":["Configuration editor"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Click Configure Payment Methods to launch the configuration editor. The main view presents a table of all active payment methods in the org, as well as basic settings like Status and Default."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/payment-method-selector-configuration.e4fcb563ff712759273d4ae96210e69303983490ada0a6fa544d17b0bae7c38d.f78e0b2f.png","alt":"Payment Method Selector configuration","framed":false,"withLightbox":true,"style":{"borderRadius":"5px","width":"600px"}},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To configure a specific payment method, select the row or click the chevron icon to the right under the Configure column. This opens a details screen where you can configure the payment method settings for both one-time and recurring payments."]},{"$$mdtype":"Tag","name":"Image","attributes":{"src":"/assets/payment-method-selector-configuration-credit-card.6a51bdf7e6709d2f4927a659d688a9e0b7218a662bc73e87a562d69d4a271738.f78e0b2f.png","alt":"Payment Method Selector","framed":false,"withLightbox":true,"style":{"borderRadius":"5px","width":"600px"}},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Note that the basic settings on the main view are also presented here in the Payment Acceptance section of the setup."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"error-handling","__idx":7},"children":["Error handling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If a managed FinDock component encounters an error, a ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["PAYMENT_ERROR"]}," message is broadcast to Salesforce event-handling channels. For Screen Flows, the best channel for error handling is using ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.salesforce.com/docs/platform/lwc/guide/use-best-practices-reactivity.html"},"children":["Flow Attribute Change Events"]},". For more details, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/payments/pro-code-payment-experiences#error-handling"},"children":["Error handling"]},"."]}]},"headings":[{"value":"Building payment experiences","id":"building-payment-experiences","depth":1},{"value":"Using Pay Button in Flows","id":"using-pay-button-in-flows","depth":2},{"value":"Getting Started","id":"getting-started","depth":3},{"value":"Configuration editor","id":"configuration-editor","depth":3},{"value":"Using Payment Method Selector in Flows","id":"using-payment-method-selector-in-flows","depth":2},{"value":"Getting started","id":"getting-started-1","depth":3},{"value":"Configuration editor","id":"configuration-editor-1","depth":3},{"value":"Error handling","id":"error-handling","depth":2}],"frontmatter":{"seo":{"title":"Building payment Experiences","description":"FinDock's managed components for Payment Experiences can be easily used with Salesforce Flows custom Experience Could sites and orchestrating business processes.","keywords":"payment experiences, flows"}},"lastModified":"2026-09-20T13:07:07.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/payments/building-payment-experiences","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}