added error states

Author: zfedoran

packages/elements/example/index.html

@@ -38,16 +38,9 @@
 
       const { button } = code.elements.create('button', options);
 
-      button.on('error', () => { console.log('sdk-error'); });
+      button.on('error', (e) => { console.log('sdk-error', e); });
       button.on('cancel', (e) => { console.log('sdk-cancel', e); });
-      button.on('success', (e) => { console.log('sdk-success', e); alert('thank you'); });
-
-      /*
-      button.on('invoke', async () => {
-        await sleep(2000);
-        button.update({ idempotencyKey: '123xyz'+Math.random() });
-      });
-      */
+      button.on('success', (e) => { console.log('sdk-success', e); alert('thank you'); return true; });
 
       button.mount(id);
     }

packages/elements/src/components/elements/PaymentRequestModalDesktop.vue

@@ -12,6 +12,9 @@
         'clientRejectedPayment',
         'intentSubmitted',
         'channelCreated',
+        'error',
+        'streamTimeout',
+        'streamClosed',
     ]);
 
     const channel = new EventChannel<InternalEvents>();
@@ -30,6 +33,25 @@
         emit('intentSubmitted');
     });
 
+    // Error states
+    channel.on('error' , (err) => {
+        if (`${err}`.includes('NGHTTP2_INTERNAL_ERROR')) {
+            console.warn('CodeSDK: GRPC stream closed.');
+            emit(`streamClosed`);
+        } else {
+            console.error(`CodeSDK: ${err}`);
+            emit('error', err);
+        }
+    });
+    channel.on('streamTimeout' , () => {
+        console.warn('CodeSDK: Websocket Stream timeout.');
+        emit('streamTimeout');
+    });
+    channel.on('streamClosed' , () => {
+        console.warn('CodeSDK: Websocket Stream closed.');
+        emit('streamClosed');
+    });
+
     onMounted(() => {
         if (!el.value) { return; }
 

packages/elements/src/components/elements/PaymentRequestModalMobile.vue

@@ -11,7 +11,10 @@
         'codeScanned',
         'clientRejectedPayment',
         'intentSubmitted',
-        'channelCreated'
+        'channelCreated',
+        'error',
+        'streamTimeout',
+        'streamClosed',
     ]);
 
     const channel = new EventChannel<InternalEvents>();
@@ -35,6 +38,25 @@
         window.location.href = event.url;
     });
 
+    // Error states
+    channel.on('error' , (err) => {
+        if (`${err}`.includes('NGHTTP2_INTERNAL_ERROR')) {
+            console.warn('CodeSDK: GRPC stream closed.');
+            emit(`streamClosed`);
+        } else {
+            console.error(`CodeSDK: ${err}`);
+            emit('error', err);
+        }
+    });
+    channel.on('streamTimeout' , () => {
+        console.warn('CodeSDK: Websocket Stream timeout.');
+        emit('streamTimeout');
+    });
+    channel.on('streamClosed' , () => {
+        console.warn('CodeSDK: Websocket Stream closed.');
+        emit('streamClosed');
+    });
+
     onMounted(() => {
         if (!el.value) { return; }
 

packages/elements/src/components/flows/ButtonFlow.vue

@@ -121,6 +121,21 @@ async function onCancel() {
   }
 }
 
+async function onError(err: any) {
+  // Let the user know that something went wrong
+  await sdkEmit('error', { message: `${err}` });
+}
+
+async function onStreamTimeout() {
+  open.value = false;
+  await onError('stream_timed_out');
+}
+
+async function onStreamClosed() {
+  open.value = false;
+  await onError('stream_closed');
+}
+
 // Add an event listener for the 'visibilitychange' event
 document.addEventListener("visibilitychange", async () => {
   if (document.visibilityState === "visible") {
@@ -149,13 +164,19 @@ document.addEventListener("visibilitychange", async () => {
           @channel-created="onChannelCreated"
           @intent-submitted="onSuccess"
           @client-rejected-payment="onCancel"
+          @error="onError"
+          @stream-timeout="onStreamTimeout"
+          @stream-closed="onStreamClosed"
         />
 
         <PaymentRequestModalDesktop
           v-else
           @channel-created="onChannelCreated"
           @intent-submitted="onSuccess"
           @client-rejected-payment="onCancel"
+          @error="onError"
+          @stream-timeout="onStreamTimeout"
+          @stream-closed="onStreamClosed"
         />
       </div>
       <div v-else>