Dynamic Pay Buttons

Introduction

Static Pay buttons are great when your page content is known when the page is initially loaded, however in cases where your buttons are created dynamically, i.e. at runtime, you'll want to use Dynamic Sticitt Pay buttons.

Dynamic Pay buttons are elements (usually buttons) that are manually configured to open up the Sticitt Pay modal.

In order to configure a dynamic button you will need to call the SticittPay.AddPayButton function with the HTML element you'd like to set up as well a configuration object.

Configuration

The configuration has the following type:

type SticittPayButtonConfiguration = {
    onPaid?: (el: HTMLElement, paymentId: string) => void
    onClosed?: (el: HTMLElement, paymentId: string) => void
    getPaymentID?: (el: HTMLElement, setPayment: (paymentId: string) => void) => void
}

Here's an example of how you would do that.

const defaultConfig = {}

SticittPaySDK.AddButton(new SticittPaySDK.PayButton(myButton, {}));

Examples

// create button
const button = document.createElement("button")
button.setAttribute("data-payment-id", "your-payment-id")
button.innerText = "Dynamic Pay Button"

// create callback functions
function onPaid(button, paymentId){
    console.log("Payment payment paid", button, paymentId)
}

function onClosed(button, paymentId){
    console.log("Sticitt Pay modal closed", button, paymentId)
}

// register button on SticittPaySDK
SticittPaySDK.AddButton(
    new SticittPaySDK.PayButton(button, {
        onPaid,
        onClosed
    })
)

// add button to document
document.body.append(button)

// Example button component
export default function Button({paymentId}) {
    // create button reference
    const buttonRef = useRef(null)

    // create callback functions
    const onPaid = (button, paymentId) => {
        console.log("Payment payment paid", button, paymentId)
    }

    const onClosed = (button, paymentId) => {
        console.log("Sticitt Pay modal closed", button, paymentId)
    }

    // register button with SticittPaySDK
    useEffect(() => {
        if (buttonRef.current) {
            SticittPaySDK.AddButton(
                new SticittPaySDK.PayButton(buttonRef.current, {
                    onPaid,
                    onClosed
                })
            )
        }
    }, [buttonRef])

    // render button
    return (
        <button ref={buttonRef} data-payment-id={paymentId}>
            Dynamic Pay Button
        </button>
    )
}

Note: When using a Dynamic Pay Button you don't need to add the `sticitt-pay-button` class, because you'll be registering it manually.

Last modified: 20 February 2025