Web SDK Sample

Here's an example of how you can setup the Web SDK client on a basic Web page.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticitt Web SDK Sample</title>
</head>

<body>


<h1>Sticitt Web SDK Sample</h1>

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

<!-- static payment with payment id resolve function -->
<button
        class="sticitt-pay-button"
        data-resolve-payment-id="resolvePaymentId"
>Static Pay Button (with resolved payment id)</button>

<p id="message">Creating dynamic buttons...</p>
<br><br>

<script
        id="sticitt-pay-sdk"
        src="https://sdk-test.sticitt.co.za/js/lib/sdk.min.js"
>
</script>

<script>
    function onClosed(btn, paymentId) {
        console.log(btn, "Closed =>", paymentId)
    }

    function onPaid(btn, paymentId) {
        console.log(btn, "Paid =>", paymentId)
    }

    function resolvePaymentId(btn, setPaymentId) {
      console.log("Resolving payment id after 3 seconds...")
      setTimeout(() => {
        const paymentId = "da9df1fc-83e7-40aa-8cf3-13d76fc3c802"
        console.log("Resolving payment id =>", paymentId)
        setPaymentId(paymentId)
      }, 3000)
    }

    function createDynamicButton() {
      const paymentId = "da9df1fc-83e7-40aa-8cf3-13d76fc3c802"
      const button = document.createElement("button")
      button.setAttribute('data-payment-id', paymentId)
      button.innerText = "Dynamic Pay Button"

      const config = {
        onPaid: (btn, paymentId) => { console.log(btn, "Dynamic: onPaid =>", paymentId) },
        onClosed: (btn, paymentId) => { console.log(btn, "Dynamic: onClosed =>", paymentId) },
      }

      // register button on SticittPaySDK
      SticittPaySDK.AddButton(
          new SticittPaySDK.PayButton(button, config)
      )

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

    function createDynamicButtonWithResolvePaymentId() {
      const paymentId = "bb273f8e-504e-423e-a238-8a318a05acbd"
      const button = document.createElement("button")
      button.setAttribute('data-payment-id', paymentId)
      button.innerText = "Dynamic Pay Button (with resolved payment)"

      const config = {
        onPaid: (btn, paymentId) => { console.log(btn, "Dynamic: onPaid =>", paymentId) },
        onClosed: (btn, paymentId) => { console.log(btn, "Dynamic: onClosed =>", paymentId) },
        getPaymentID: resolvePaymentId
      }

      // register button on SticittPaySDK
      SticittPaySDK.AddButton(
          new SticittPaySDK.PayButton(button, config)
      )

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

    // create dynamic buttons after 4 seconds
    setTimeout(() => {
      createDynamicButton()
      createDynamicButtonWithResolvePaymentId()

      document.getElementById("message").remove()
    }, 4000)

</script>
</body>
</html>
Last modified: 20 February 2025