Static Pay Buttons

Introduction

Sticitt Pay buttons are elements (usually buttons) that are configured to open up the Sticitt Pay modal when clicked, and can either be static or dynamic.

Static pay buttons are usually defined in the HTML code, and are available at the time the web page fires the load event. These kind of pay buttons must have sticitt-pay-button class name so that they can be automatically registered by the Sticitt Pay SDK on document load.

Passing payment ID

The static pay button must also be provided with the payment ID of the payment you wish the to complete.

The payment ID can be specified via the data-payment-id attribute like so,

    <button class="sticitt-pay-button"
            data-payment-id="your-payment-id">
        Pay with Sticitt
    </button>

Passing payment ID using retrieve function

The payment ID can also be provided through a retrieve payment ID function, which is useful when you want to perform a call in order to retrieve the payment ID, like a network call to your server.

To achieve this, first create a function that takes in a HTML element and a callback function. Here's an example of what that might look like:

    /**
    * @param btn: HTMLElement - the button that was clicked.
    * @param resolve: (paymentId: string) => void - callback to set the payment id
    */
    function retrievePaymentId(btn, setPaymentId) {
        console.log("Fetching PaymentID ....")
        fetchPaymentFromServer()
            .then(paymentId => setPaymentId(paymentId))
            .catch(err => "Failed to get payment from the server")
   }

Then set your button's data-retrieve-payment-id attribute to the name of your function. This function will be called when the pay button is clicked and only once the setPaymentId callback is called will the Sticitt Pay modal be opened with the given payment ID.

    <button class="sticitt-pay-button"
            data-retrieve-payment-id="retrievePaymentId">
        Pay with Sticitt
    </button>

Note: The function passed to data-retrieve-payment-id must be available in global scope, i.e., on the `window` object, at the time the document is loaded otherwise it will not be registered.

This will then retrieve the payment ID before opening the Sticitt Pay modal.

Optional OnPaid callback

If you want to run some code when a payment is completed you can do so by defining a function with any name that matches the following signature.

    /**
    * @param btn: HTMLElement - the button that was clicked.
    * @param paymentId: string - payment id of paid payment
    */
    function onPaid(btn, paymentId) {
        console.log(btn, paymentId);
   }

Now set the data-on-paid to the name of your function.

    <button class="sticitt-pay-button"
            data-payment-id="your-payment-id"
            data-on-paid="onPaid">
    Pay with Sticitt
</button>

Optional OnClosed callback

If you want to run some code when the Sticitt Pay modal is closed you can do so by defining a function with any name that takes in the .

    /**
    * @param btn: HTMLElement - the button that was clicked.
    * @param paymentId: string - payment ID of paid payment
    */
    function onClosed(btn, paymentId) {
        console.log(btn, paymentId);
   }

Now set the data-on-closed to the name of your function.

    <button class="sticitt-pay-button"
            data-payment-id="your-payment-id"
            data-on-closed="onClosed"
    >
        Pay with Sticitt
    </button>

Last modified: 20 February 2025