Skip to main content

JavaScript SDK

The Sticitt JS SDK is the secure bridge between your website and the Sticitt payment engine. It handles the UI for payment method selection, user authentication, and transaction feedback, ensuring you never have to handle sensitive user data directly.

1. Installation​

Include the SDK script at the bottom of your page <body>.

Critical Requirement: You must set the id attribute to sticitt-pay-sdk. The SDK uses this ID to bootstrap itself.

<script
    id="sticitt-pay-sdk"
    src="<JS SDK Source>/js/lib/sdk.min.js"
></script>

2. Usage: Pay Buttons (HTML)​

  • Best for: Static websites, PHP/Wordpress templates, or simple use cases.

The SDK automatically scans your page for buttons with the class sticitt-pay-button. You can configure the payment behavior using data- attributes.

Basic Button​

Simply add the class and the paymentId you received from your server.

<button
    class="sticitt-pay-button"
    data-payment-id="da9df1fc-83e7-40aa-8cf3-13d76fc3c802">
    Pay Now
</button>

Lazy Button​

If you don't have the paymentId when the page loads (e.g., you want to create the payment only when the user clicks), you can provide a global function name to resolve it.

<button
    class="sticitt-pay-button"
    data-resolve-payment-id="myResolverFunction">
    Pay Now
</button>

<script>
    // The SDK calls this function when the button is clicked
    function myResolverFunction(btn, setPaymentId) {
        // 1. Make an AJAX call to your server to create the payment
        // 2. Pass the ID back to the SDK using the callback
        fetch('/my-api/create-payment').then(data => {
            setPaymentId(data.id); 
        });
    }
</script>

Handling Events (onPaid / onClosed)​

You can link global JavaScript functions to SDK events using data-on-paid and data-on-closed.

  1. Define your functions in a script tag (they must be globally accessible).
  2. Pass the function name as a string in the data attribute.
<button 
    class="sticitt-pay-button"
    data-payment-id="da9df1fc-..."
    data-on-paid="mySuccessHandler"
    data-on-closed="myCloseHandler">
    Pay with Sticitt
</button>

<script>
    /**
     * Triggered when payment is successful
     * @param btn: HTMLElement - the button that was clicked
     * @param paymentId: string - the ID of the completed payment
     */
    function mySuccessHandler(btn, paymentId) {
        console.log("Payment Success!", paymentId);
        alert("Thank you for your payment!");
    }

    /**
     * Triggered when the modal is closed (by user or after success)
     */
    function myCloseHandler(btn, paymentId) {
        console.log("Modal closed", paymentId);
    }
</script>

3. Usage: Static Buttons (HTML - No Backend)​

  • Best for: Donations, Ad-hoc payments, or simple "Pay Me" buttons.

If you do not have a backend server, you can initiate a payment using only your Merchant ID.

In this mode:

  1. No PaymentID: is required beforehand.
  2. User Input: The Sticitt modal will ask the user to enter the amount they wish to pay.
  3. Reference: You provide a reference string to help identify these payments on your statement.
<button
    class="sticitt-pay-button"
    data-merchant-id="3fa85f64-5717-4562-b3fc-2c963f66afa6"
    data-reference="Donation-Campaign-A">
    Donate to School
</button>
Use Case Restriction

Static payments are not recommended for e-commerce or services where fulfillment verification is required. Use them only for simple, low-risk scenarios like donations. See Create Static Payments section for more details.

4. Usage: Programmatic (JavaScript)​

  • Best for: Single Page Applications (React, Vue, Angular) or dynamic content.

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)
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.