Error on process bits purchase

Extensions
#1

When I try to run the useBits function I get a javascript error and the success or failed callbacks are not invoked.

Uncaught DOMException: Failed to execute 'postMessage' on 'Window': function Observable () {
if (arguments.length > 0) {
        // Write
        // Ignore writes i...<omitted>... } could not be cloned.
at Object.useBits (https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js:8:23059)

my code:

  Twitch.ext.bits.useBits(item.bitsSku);

EDIT: Twitch.ext.features.isBitsEnabled is false but Twitch.ext.bits.getProducts().then(function(products) { is still returning content

when the documentation says
This function returns a promise which resolves to an array of products available for Bits, for the extension, if the context supports Bits in Extensions actions. Otherwise, the promise rejects with an error

The extension is in a testing phase. I found an affiliate using our extension to install it. And thats where the error came from.

#2

You flagged this as “own mistake” what was the solution (to help others with a similar issue?)

#3

Sorry for the late reply, I thought the email reply feature on would auto post to the forum.

Twitch’s documentation is wrong. I did trial and error until I got everything setup.

Twitch’s documentation for bits states that when bits monetization is available, the callback for getting products will succeed, otherwise it will fail.

This is incorrect.

“This function returns a promise which resolves to an array of products available for Bits, for the extension, if the context supports Bits in Extensions actions. Otherwise, the promise rejects with an error;”

But the monetization page (Monetization | Twitch Developers) says

“You can check the twitch.ext.features.isBitsEnabled feature flag to determine if Bits in Extensions features will work in your extension on the current channel.”

Which, also, is a typo. It’s capital T for Twitch.ext.features.isBitsEnabled. Javascript is case sensitive 👍

I added a check to exit early, inside the getproducts callback using that above variable.

I don’t know what fixed my problem. Because the user DID have bits enabled, but isBitsEnabled was set to false and the extension DID support bits, and bits were turned ON for the extension. Eventually, after just testing it over and over, it just started working. isBitsEnabled became true (after doing nothing) and it started working.

Also there was another problem. Every single time you do useBits(), twitch REAUTHS the user to a DIFFERENT authorization token. This was breaking my authentication scheme. NO WHERE does it say this behavior exists. It was a race condition of safe checking the values when interacting with a websocket and it’s responses directly after a purchase. I would send the current information after the useBits() response to my backend server via socket, but by the time the data comes back, the auth scheme has changed.

P.S. Also the documentation is wrong for the models that are used in the bits transactions. Both the data inside the jwt and the data given raw. It’s literal trial and error to get it working.

TLDR: When Twitch.ext.features.isBitsEnabled is false, but getProducts() returns a successful promise, if you useBits() it throws that error.

#4

You’re right in that JS is case sensitive, but wrong that it’s a typo as it doesn’t have to be Twitch.
The helper is window.Twitch, but you can just as easily do const twitch = window.Twitch which is what many sample extensions do, hence the lowercase t and lack of window.

As for the errors you’re getting with isBitsEnabled being false when it should be true I can’t help with, but really if isBitsEnabled is returning false then you shouldn’t be attempting to call getProducts or useBits anyway.

#5

I’m not completely interested in defending everything I stated, because it’s all true, but I’ll give one go at it.

Yes it is a typo. These are twitch documentation docs. Not a library that wraps twitch. Twitches library is Twitch.ext, not twitch.ext. There’s no real argument to had here. Everywhere else in the docs it uses Twitch, not twitch. Any doc writer in the world would recognize this as a typo, as it is unequivocally incorrect of someone using the twitch library, which the documentation is documenting. Not a theoretical wrapper library.

For the isBitsEnabled, actually, your statement is incorrect. As I quote in the documentation. It says, if the context supports bits then getProducts() promise will be resolved, otherwise rejected. The context does not support bits, and the getProducts() promise was resolved, not rejected. Also, the reference guide should be the universal place for a person to get their documentation. Not scour for extra documents. The documentation reference is missing the isBitsEnabled section. At minimum it should be listed under useBits() as a warning to not invoke unless isBitsEnabled is true.

Furthermore, the useBits() is throwing an exception and not calling either the success or failure events. So this puts the application in a BROKEN state, waiting for a purchase to finish. Lets say someone wants to have it in a modal, and the modal goes away. Now they also have to add an arbitrary timer to detect when twitch fails to even do what it says it will do. The library is inconsistent. It should be capturing errors and passing it to the failure event, like every other javascript library. It’s expected behavior and currently it’s behaving unexpectedly.

#6

I’m not saying the docs are without issues, Twitch are well aware of some of these issues and are already working on revamping parts of the docs, but thank you for providing them your feedback so they know where people are struggling.