deer-roy · July 14, 2025 09:21
diff --git a/index.html b/index.html
 <!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 D6 Relay Sample</h1>

    <!-- static payment -->
    <!-- using d6 relay key for auto sign-in -->
    <!-- NOTE: this is using test user key pck-000, you will have to replace this with an actual pck from d6 relay -->
    <button
      class="sticitt-pay-button"
      data-payment-id="da9df1fc-83e7-40aa-8cf3-13d76fc3c802"
      data-relay-key="pck-000"
    >
      Static Pay Button
    </button>

    <!-- static payment with payment id resolve function -->
    <!-- using d6 relay key for auto sign-in -->
    <!-- NOTE: this is using test user key pck-000, you will have to replace this with an actual pck from d6 relay -->
    <button
      class="sticitt-pay-button"
      data-resolve-payment-id="resolvePaymentId"
      data-relay-key="pck-000"
    >
      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-dev.sticitt.co.za/js/lib/sdk.min.js"
      data-client-id="<app client id>"
      data-client-secret="<app client secret>"
    ></script>

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

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

      // This is for instances where want to fetch you payment id 
      // from an api call, perhaps to some internal api
      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);
      }

      // This is for instances where your buttons are created
      // at runtime, then make sure to call SticittPaySDK.AddButton
      // to register your button with the sdk. You can also attach
      // your own event listeners for onPaid, and onClosed SticittPaySDK
      // events.
      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);
          },

          // add d6 relay key
          // NOTE: this is using test user key pck-000, you will have to replace this with an actual pck from d6 relay
          relayKey: "pck-000"
        };

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

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

      // same as above method, except here, we're also fetching
      // the payment id through a fake api method
      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,

          // add d6 relay key
          // NOTE: this is using test user key pck-000, you will have to replace this with an actual pck from d6 relay
          relayKey: "pck-000"
        };

        // 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>
	<!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 D6 Relay Sample</h1>

	<!-- static payment -->
	<!-- using d6 relay key for auto sign-in -->
	<!-- NOTE: this is using test user key pck-000, you will have to replace this with an actual pck from d6 relay -->
	<button
	class="sticitt-pay-button"
	data-payment-id="da9df1fc-83e7-40aa-8cf3-13d76fc3c802"
	data-relay-key="pck-000"
	>
	Static Pay Button
	</button>

	<!-- static payment with payment id resolve function -->
	<!-- using d6 relay key for auto sign-in -->
	<!-- NOTE: this is using test user key pck-000, you will have to replace this with an actual pck from d6 relay -->
	<button
	class="sticitt-pay-button"
	data-resolve-payment-id="resolvePaymentId"
	data-relay-key="pck-000"
	>
	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-dev.sticitt.co.za/js/lib/sdk.min.js"
	data-client-id="<app client id>"
	data-client-secret="<app client secret>"
	></script>

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

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

	// This is for instances where want to fetch you payment id
	// from an api call, perhaps to some internal api
	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);
	}

	// This is for instances where your buttons are created
	// at runtime, then make sure to call SticittPaySDK.AddButton
	// to register your button with the sdk. You can also attach
	// your own event listeners for onPaid, and onClosed SticittPaySDK
	// events.
	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);
	},

	// add d6 relay key
	// NOTE: this is using test user key pck-000, you will have to replace this with an actual pck from d6 relay
	relayKey: "pck-000"
	};

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

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

	// same as above method, except here, we're also fetching
	// the payment id through a fake api method
	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,

	// add d6 relay key
	// NOTE: this is using test user key pck-000, you will have to replace this with an actual pck from d6 relay
	relayKey: "pck-000"
	};

	// 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>