Pay Button

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.

The Pay Button can be added to your own flows or accessed from one of FinDock’s Flow templates, as shown here.

The component has two additional settings controlling its behavior:

• 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.
• A 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.

Click Configure Payment Intent Context to launch the configuration editor. The main view presents the different elements of a Payment Intent request.

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:

• General settings, like where to direct the payer upon success or failure. This can be an Experience Cloud site page or any other webpage.
• Payer details, for Contact, Account or Person Account records.
• One-time payment settings including amount and currency.
• Recurring payment settings, including amount, currency, frequency and dates.
• Payment method settings like processor, payment method and target
• Optional Package Actions that store data related to the payment for specific Source packages like Gift Aid or Fundraising tributes.

You can set the values in multiple ways, using familiar Flow features.

Value Type	Example
Hardcoded	Static URL for the Success URL field
Single Flow resource	Flow resource with a single value, like the output value of a Frequency selection
Variable Flow resource	Flow Variable Object output containing multiple values, like a Contact object built by an Assignment step in the Flow
LWC output	LWC with single or multiple values, like the output of Payment Method Selector

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.

There are four properties that can be set on the Pay Button:

• button-label (default Pay) the label to display on the button
• 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.
• show-error true/false (default true) hides the small red error message above the button. Useful when implementing your own error handling
• onResult is an event handler that is called when the pay button returns a result from the API.

The result retrieved from onResult is an object with these possible fields: paymentIntentId, redirectUrl, errorMessage, statusCode.

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.

customComponent.html

<template>
    <c-pay-button
        button-label={buttonLabel}
        payment-intent={paymentIntent}
        show-error={showError}
        onresult={handleResult}
    ></c-pay-button>
    <template lwc:if={resultText}>
        <p>{resultText}</p>
    </template>
</template>

customComponent.js

import { LightningElement } from 'lwc';

/**
 * Example Pay Button Wrapper
 *
 * A thin wrapper that renders the Pay Button with a hardcoded button label and
 * an example one-time payment intent payload, used to exercise the direct
 * payment intent path without Flow configuration.
 */
export default class CustomComponent extends LightningElement {
    buttonLabel = 'Pay now';
    showError = false;
    resultText;

    handleResult(event) {
        this.resultText = JSON.stringify(event.detail);
    }

    paymentIntent = {
        SuccessURL: 'https://example.com/success',
        FailureURL: 'https://example.com/failure',
        Payer: {
            Contact: {
                SalesforceFields: {
                    FirstName: 'Test',
                    LastName: 'Payment',
                    Email: 'test@findock.com',
                    MailingStreet: 'Any Street',
                    MailingCity: 'Any City',
                    MailingPostalCode: '00000',
                    MobilePhone: '012-3456789'
                }
            }
        },
        OneTime: {
            Amount: 10,
            CurrencyISOCode: 'EUR'
        },
        PaymentMethod: {
            Name: 'CreditCard',
            Processor: 'DummyExtension-PSP',
            Target: 'Account NL'
        }
    };
}