idmission-web-sdk 1.0.76 → 1.0.78

package/dist/components/selfie_capture/SelfieCaptureLoadingOverlay.d.ts

@@ -9,10 +9,10 @@ export type SelfieCaptureLoadingOverlayAssets = {
 export type SelfieCaptureLoadingOverlayClassNames = {
     container?: string;
     inner?: string;
-    headingContainer?: string;
     heading?: string;
     imageContainer?: string;
     image?: string;
+    buttonsRow?: string;
     continueBtn?: string;
     cameraAccessDenied?: CameraAccessDeniedOverlayClassNames;
 };

package/dist/components/submission/SubmissionProvider.d.ts

@@ -1,6 +1,44 @@
-import { ReactElement } from 'react';
-import { CardData, LivenessCheckRequest, PersonalData, SubmissionAction, SubmissionEnvironment, SubmissionRequest, SubmissionResponse } from '../../contexts/SubmissionContext';
+import React, { ReactElement } from 'react';
+import { CaptureAttemptMetadata, CardData, LiveCheckResponse, LivenessCheckRequest, PersonalData, SubmissionAction, SubmissionEnvironment, SubmissionRequest, SubmissionResponse, SubmissionStatus } from '../../contexts/SubmissionContext';
+import { UploadedDocument } from '../additional_document_capture/AdditionalDocumentCapture';
+import { SignatureData } from '../signature_capture/data';
+import { NetworkError, SubmissionError } from './Errors';
 export type TokenState = 'NOT_PARSED' | 'PARSING' | 'GOOD' | 'EXPIRED' | 'INVALID_FORMAT' | 'INVALID_SIGNATURE' | 'MISSING' | 'PUBLIC_KEY_LOAD_FAILED';
+export type SubmissionState = {
+    submit: () => Promise<SubmissionResponse | null>;
+    submissionStatus: SubmissionStatus;
+    submissionRequest: SubmissionRequest | null;
+    submissionResponse: SubmissionResponse | null;
+    submissionError: SubmissionError | NetworkError | null;
+    submissionEnvironment: SubmissionEnvironment;
+    idFrontImage: string | null;
+    idBackImage: string | null;
+    passportImage: string | null;
+    selfieImage: string | null;
+    signatureData: SignatureData | null;
+    signatureVideoUrl: string | null;
+    idCaptureVideoUrl: string | null;
+    idCaptureVideoIdFrontImage: string | null;
+    idCaptureVideoIdBackImage: string | null;
+    additionalDocuments: UploadedDocument[] | null;
+    setIdFrontImage: (image: string) => void;
+    setIdBackImage: (image: string) => void;
+    setPassportImage: (image: string) => void;
+    setSelfieImage: (image: string) => void;
+    setSignatureData: (signatureData: SignatureData) => void;
+    setSignatureVideoUrl: (videoDataUrl: string) => void;
+    setIdCaptureVideoUrl: (videoDataUrl: string) => void;
+    setIdCaptureVideoIdFrontImage: (image: string) => void;
+    setIdCaptureVideoIdBackImage: (image: string) => void;
+    setAdditionalDocuments: (uploadedDocuments: UploadedDocument[]) => void;
+    logIdFrontCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;
+    logIdBackCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;
+    logSelfieCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;
+    livenessCheckRequest: LivenessCheckRequest | null;
+    checkLiveness: (imageDataUrl: string) => Promise<LiveCheckResponse>;
+    retryLocationAccess: () => void;
+};
+export declare const SubmissionContext: React.Context<SubmissionState>;
 export type SubmissionProviderProps = {
     action: SubmissionAction;
     children: ReactElement;

package/dist/components/video_id/IdVideoCapture.d.ts

@@ -18,6 +18,8 @@ export type IdVideoCaptureVerbiage = {
 };
 export type IdVideoCaptureProps = {
     onComplete?: (videoUrl: string) => void;
+    onIdFrontImageCaptured?: (imageUrl: string) => void;
+    onIdBackImageCaptured?: (imageUrl: string) => void;
     onFaceNotDetected?: () => void;
     idCardFrontDetectionThreshold?: number;
     idCardFrontFocusThreshold?: number;
@@ -31,4 +33,4 @@ export type IdVideoCaptureProps = {
     verbiage?: IdVideoCaptureVerbiage;
     debugMode?: boolean;
 };
-export declare const IdVideoCapture: ({ onComplete, onFaceNotDetected, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, showIdCardBackDurationMs, skipShowIdCardBack, readTextPrompt, readTextTimeoutDurationMs, assets, colors, verbiage: rawVerbiage, debugMode, }: IdVideoCaptureProps) => ReactElement;
+export declare const IdVideoCapture: ({ onComplete, onIdFrontImageCaptured, onIdBackImageCaptured, onFaceNotDetected, idCardFrontDetectionThreshold, idCardFrontFocusThreshold, goodIdCardFrontFramesThreshold, showIdCardBackDurationMs, skipShowIdCardBack, readTextPrompt, readTextTimeoutDurationMs, assets, colors, verbiage: rawVerbiage, debugMode, }: IdVideoCaptureProps) => ReactElement;

package/dist/contexts/SubmissionContext.d.ts

@@ -1,7 +1,4 @@
-/// <reference types="react" />
 import { UploadedDocument } from '../components/additional_document_capture/AdditionalDocumentCapture';
-import { SignatureData } from '../components/signature_capture/data';
-import { NetworkError, SubmissionError } from '../components/submission/Errors';
 export declare enum SubmissionAction {
     NONE = "NONE",
     ENROLL = "ENROLL",
@@ -151,37 +148,6 @@ export type LiveCheckResponse = {
         cellPhone: 'true' | 'false';
     };
 };
-export type SubmissionState = {
-    submit: () => Promise<SubmissionResponse | null>;
-    submissionStatus: SubmissionStatus;
-    submissionRequest: SubmissionRequest | null;
-    submissionResponse: SubmissionResponse | null;
-    submissionError: SubmissionError | NetworkError | null;
-    submissionEnvironment: SubmissionEnvironment;
-    idFrontImage: string | null;
-    idBackImage: string | null;
-    passportImage: string | null;
-    selfieImage: string | null;
-    signatureData: SignatureData | null;
-    signatureVideoUrl: string | null;
-    idCaptureVideoUrl: string | null;
-    additionalDocuments: UploadedDocument[] | null;
-    setIdFrontImage: (image: string) => void;
-    setIdBackImage: (image: string) => void;
-    setPassportImage: (image: string) => void;
-    setSelfieImage: (image: string) => void;
-    setSignatureData: (signatureData: SignatureData) => void;
-    setSignatureVideoUrl: (videoDataUrl: string) => void;
-    setIdCaptureVideoUrl: (videoDataUrl: string) => void;
-    setAdditionalDocuments: (uploadedDocuments: UploadedDocument[]) => void;
-    logIdFrontCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;
-    logIdBackCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;
-    logSelfieCaptureAttempt: (attempt: CaptureAttemptMetadata) => void;
-    livenessCheckRequest: LivenessCheckRequest | null;
-    checkLiveness: (imageDataUrl: string) => Promise<LiveCheckResponse>;
-    retryLocationAccess: () => void;
-};
-export declare const SubmissionContext: import("react").Context<SubmissionState>;
 export declare function parseJwt(token: string): Record<string, unknown>;
 export declare function determineSubmissionHost(environment: SubmissionEnvironment, token?: string): string;
 export declare function determineSubmissionEndpoint(action: SubmissionAction, hasId: boolean, hasSelfie: boolean, hasToken: boolean): string;

package/dist/sdk2.cjs.development.js

@@ -46,7 +46,7 @@ var LanguageDetector__default = /*#__PURE__*/_interopDefaultLegacy(LanguageDetec
 var i18n__default = /*#__PURE__*/_interopDefaultLegacy(i18n);
 var SignatureCanvas__default = /*#__PURE__*/_interopDefaultLegacy(SignatureCanvas);
 
-var webSdkVersion = '1.0.76';
+var webSdkVersion = '1.0.78';
 
 function getPlatform() {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -88,72 +88,6 @@ var submissionHosts = {
   prod: 'https://api.idmission.com',
   demo: 'https://apidemo.idmission.com'
 };
-var SubmissionContext = /*#__PURE__*/React.createContext({
-  submit: function submit() {
-    return tslib.__awaiter(void 0, void 0, void 0, function () {
-      return tslib.__generator(this, function (_a) {
-        return [2 /*return*/, null];
-      });
-    });
-  },
-  submissionStatus: SubmissionStatus.READY,
-  submissionRequest: null,
-  submissionResponse: null,
-  submissionError: null,
-  submissionEnvironment: 'prod',
-  idFrontImage: null,
-  idBackImage: null,
-  passportImage: null,
-  selfieImage: null,
-  signatureData: null,
-  signatureVideoUrl: null,
-  idCaptureVideoUrl: null,
-  additionalDocuments: null,
-  setIdFrontImage: function setIdFrontImage() {
-    return null;
-  },
-  setIdBackImage: function setIdBackImage() {
-    return null;
-  },
-  setPassportImage: function setPassportImage() {
-    return null;
-  },
-  setSelfieImage: function setSelfieImage() {
-    return null;
-  },
-  setSignatureData: function setSignatureData() {
-    return null;
-  },
-  setSignatureVideoUrl: function setSignatureVideoUrl() {
-    return null;
-  },
-  setIdCaptureVideoUrl: function setIdCaptureVideoUrl() {
-    return null;
-  },
-  setAdditionalDocuments: function setAdditionalDocuments() {
-    return null;
-  },
-  logIdFrontCaptureAttempt: function logIdFrontCaptureAttempt() {
-    return null;
-  },
-  logIdBackCaptureAttempt: function logIdBackCaptureAttempt() {
-    return null;
-  },
-  logSelfieCaptureAttempt: function logSelfieCaptureAttempt() {
-    return null;
-  },
-  livenessCheckRequest: null,
-  checkLiveness: function checkLiveness() {
-    return tslib.__awaiter(void 0, void 0, void 0, function () {
-      return tslib.__generator(this, function (_a) {
-        throw new Error('checkLiveness is not implemented');
-      });
-    });
-  },
-  retryLocationAccess: function retryLocationAccess() {
-    return null;
-  }
-});
 function parseJwt(token) {
   var base64Url = token.split('.')[1];
   var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
@@ -642,6 +576,80 @@ var TokenPublicKeyErrorOverlay = function TokenPublicKeyErrorOverlay(_a) {
   }, "support@idmission.com"), ".")));
 };
 
+var SubmissionContext = /*#__PURE__*/React.createContext({
+  submit: function submit() {
+    return tslib.__awaiter(void 0, void 0, void 0, function () {
+      return tslib.__generator(this, function (_a) {
+        return [2 /*return*/, null];
+      });
+    });
+  },
+  submissionStatus: SubmissionStatus.READY,
+  submissionRequest: null,
+  submissionResponse: null,
+  submissionError: null,
+  submissionEnvironment: 'prod',
+  idFrontImage: null,
+  idBackImage: null,
+  passportImage: null,
+  selfieImage: null,
+  signatureData: null,
+  signatureVideoUrl: null,
+  idCaptureVideoUrl: null,
+  idCaptureVideoIdFrontImage: null,
+  idCaptureVideoIdBackImage: null,
+  additionalDocuments: null,
+  setIdFrontImage: function setIdFrontImage() {
+    return null;
+  },
+  setIdBackImage: function setIdBackImage() {
+    return null;
+  },
+  setPassportImage: function setPassportImage() {
+    return null;
+  },
+  setSelfieImage: function setSelfieImage() {
+    return null;
+  },
+  setSignatureData: function setSignatureData() {
+    return null;
+  },
+  setSignatureVideoUrl: function setSignatureVideoUrl() {
+    return null;
+  },
+  setIdCaptureVideoUrl: function setIdCaptureVideoUrl() {
+    return null;
+  },
+  setIdCaptureVideoIdFrontImage: function setIdCaptureVideoIdFrontImage() {
+    return null;
+  },
+  setIdCaptureVideoIdBackImage: function setIdCaptureVideoIdBackImage() {
+    return null;
+  },
+  setAdditionalDocuments: function setAdditionalDocuments() {
+    return null;
+  },
+  logIdFrontCaptureAttempt: function logIdFrontCaptureAttempt() {
+    return null;
+  },
+  logIdBackCaptureAttempt: function logIdBackCaptureAttempt() {
+    return null;
+  },
+  logSelfieCaptureAttempt: function logSelfieCaptureAttempt() {
+    return null;
+  },
+  livenessCheckRequest: null,
+  checkLiveness: function checkLiveness() {
+    return tslib.__awaiter(void 0, void 0, void 0, function () {
+      return tslib.__generator(this, function (_a) {
+        throw new Error('checkLiveness is not implemented');
+      });
+    });
+  },
+  retryLocationAccess: function retryLocationAccess() {
+    return null;
+  }
+});
 var SubmissionProvider = function SubmissionProvider(_a) {
   var action = _a.action,
     children = _a.children,
@@ -731,26 +739,32 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     idCaptureVideoUrl = _6[0],
     setIdCaptureVideoUrl = _6[1];
   var _7 = React.useState(null),
-    additionalDocuments = _7[0],
-    setAdditionalDocuments = _7[1];
+    idCaptureVideoIdFrontImage = _7[0],
+    setIdCaptureVideoIdFrontImage = _7[1];
   var _8 = React.useState(null),
-    geolocationResult = _8[0],
-    setGeolocationResult = _8[1];
-  var _9 = React.useState(0),
-    geolocationAttempts = _9[0],
-    setGeolocationAttempts = _9[1];
-  var _10 = React.useState(false),
-    geolocationBlocked = _10[0],
-    setGeolocationBlocked = _10[1];
-  var _11 = React.useState([]),
-    idFrontCaptureAttempts = _11[0],
-    setIdFrontCaptureAttempts = _11[1];
-  var _12 = React.useState([]),
-    idBackCaptureAttempts = _12[0],
-    setIdBackCaptureAttempts = _12[1];
+    idCaptureVideoIdBackImage = _8[0],
+    setIdCaptureVideoIdBackImage = _8[1];
+  var _9 = React.useState(null),
+    additionalDocuments = _9[0],
+    setAdditionalDocuments = _9[1];
+  var _10 = React.useState(null),
+    geolocationResult = _10[0],
+    setGeolocationResult = _10[1];
+  var _11 = React.useState(0),
+    geolocationAttempts = _11[0],
+    setGeolocationAttempts = _11[1];
+  var _12 = React.useState(false),
+    geolocationBlocked = _12[0],
+    setGeolocationBlocked = _12[1];
   var _13 = React.useState([]),
-    selfieCaptureAttempts = _13[0],
-    setSelfieCaptureAttempts = _13[1];
+    idFrontCaptureAttempts = _13[0],
+    setIdFrontCaptureAttempts = _13[1];
+  var _14 = React.useState([]),
+    idBackCaptureAttempts = _14[0],
+    setIdBackCaptureAttempts = _14[1];
+  var _15 = React.useState([]),
+    selfieCaptureAttempts = _15[0],
+    setSelfieCaptureAttempts = _15[1];
   var logIdFrontCaptureAttempt = React.useCallback(function (attempt) {
     setIdFrontCaptureAttempts(function (attempts) {
       return tslib.__spreadArray(tslib.__spreadArray([], attempts, true), [attempt], false);
@@ -1096,12 +1110,12 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     setSubmissionStatus(SubmissionStatus.READY);
     retrySubmission();
   }, [retrySubmission]);
-  var _14 = React.useState('NOT_PARSED'),
-    tokenState = _14[0],
-    setTokenState = _14[1];
-  var _15 = React.useState(null),
-    tokenError = _15[0],
-    setTokenError = _15[1];
+  var _16 = React.useState('NOT_PARSED'),
+    tokenState = _16[0],
+    setTokenState = _16[1];
+  var _17 = React.useState(null),
+    tokenError = _17[0],
+    setTokenError = _17[1];
   React.useEffect(function () {
     (function () {
       return tslib.__awaiter(void 0, void 0, void 0, function () {
@@ -1184,6 +1198,8 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     signatureData: signatureData,
     signatureVideoUrl: signatureVideoUrl,
     idCaptureVideoUrl: idCaptureVideoUrl,
+    idCaptureVideoIdFrontImage: idCaptureVideoIdFrontImage,
+    idCaptureVideoIdBackImage: idCaptureVideoIdBackImage,
     additionalDocuments: additionalDocuments,
     setIdFrontImage: setIdFrontImage,
     setIdBackImage: setIdBackImage,
@@ -1192,6 +1208,8 @@ var SubmissionProvider = function SubmissionProvider(_a) {
     setSignatureData: setSignatureData,
     setSignatureVideoUrl: setSignatureVideoUrl,
     setIdCaptureVideoUrl: setIdCaptureVideoUrl,
+    setIdCaptureVideoIdFrontImage: setIdCaptureVideoIdFrontImage,
+    setIdCaptureVideoIdBackImage: setIdCaptureVideoIdBackImage,
     setAdditionalDocuments: setAdditionalDocuments,
     logIdFrontCaptureAttempt: logIdFrontCaptureAttempt,
     logIdBackCaptureAttempt: logIdBackCaptureAttempt,
@@ -10612,7 +10630,7 @@ var IdCaptureFallback = function IdCaptureFallback(_a) {
     accept: "image/*",
     onChange: onFileSelected,
     hidden: true
-  }), /*#__PURE__*/React__default['default'].createElement(StyledButtonsRow$6, {
+  }), /*#__PURE__*/React__default['default'].createElement(StyledButtonsRow$7, {
     className: classNames.buttonsRow
   }, images.length < 2 && ( /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
     variant: images.length > 0 ? 'secondary' : 'positive',
@@ -10638,7 +10656,7 @@ var Heading$7 = styled__default['default'].h3(templateObject_2$9 || (templateObj
 var Description$2 = styled__default['default'].p(templateObject_3$7 || (templateObject_3$7 = tslib.__makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
 var Instruction = styled__default['default'].p(templateObject_4$3 || (templateObject_4$3 = tslib.__makeTemplateObject(["\n  font-weight: bold;\n"], ["\n  font-weight: bold;\n"])));
 var ImageCol = styled__default['default'].div(templateObject_5$1 || (templateObject_5$1 = tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-grow: 1;\n  flex-basis: 0;\n"])));
-var StyledButtonsRow$6 = styled__default['default'](ButtonsRow)(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+var StyledButtonsRow$7 = styled__default['default'](ButtonsRow)(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
 var templateObject_1$f, templateObject_2$9, templateObject_3$7, templateObject_4$3, templateObject_5$1, templateObject_6;
 
 var CaptureState;
@@ -11371,7 +11389,7 @@ var SelfieCaptureFallback = function SelfieCaptureFallback(_a) {
     accept: "image/*",
     onChange: onFileSelected,
     hidden: true
-  }), /*#__PURE__*/React__default['default'].createElement(StyledButtonsRow$5, {
+  }), /*#__PURE__*/React__default['default'].createElement(StyledButtonsRow$6, {
     className: classNames.buttonsRow
   }, !image && ( /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
     variant: "positive",
@@ -11398,7 +11416,7 @@ var StyledOverlayInner = styled__default['default'](OverlayInner)(templateObject
 var Heading$6 = styled__default['default'].h3(templateObject_2$7 || (templateObject_2$7 = tslib.__makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
 var Description$1 = styled__default['default'].p(templateObject_3$6 || (templateObject_3$6 = tslib.__makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
 var ImageContainer$5 = styled__default['default'](OverlayImageContainer)(templateObject_4$2 || (templateObject_4$2 = tslib.__makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
-var StyledButtonsRow$5 = styled__default['default'](ButtonsRow)(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
+var StyledButtonsRow$6 = styled__default['default'](ButtonsRow)(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n  margin-top: 32px;\n"], ["\n  margin-top: 32px;\n"])));
 var templateObject_1$d, templateObject_2$7, templateObject_3$6, templateObject_4$2, templateObject_5;
 
 var initialState$3 = {
@@ -11939,17 +11957,17 @@ var SelfieCaptureLoadingOverlay = function SelfieCaptureLoadingOverlay(_a) {
     className: classNames.container
   }, /*#__PURE__*/React__default['default'].createElement(OverlayInner, {
     className: classNames.inner
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classNames.headingContainer
   }, /*#__PURE__*/React__default['default'].createElement("h3", {
     className: classNames.heading
-  }, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement(StyledGuidanceMessage, null, verbiage.removeEyeCoveringsText, /*#__PURE__*/React__default['default'].createElement("br", null), verbiage.avoidExcessiveBacklightingText)), /*#__PURE__*/React__default['default'].createElement(OverlayImageContainer, {
+  }, verbiage.headingText), /*#__PURE__*/React__default['default'].createElement(StyledGuidanceMessage, null, verbiage.removeEyeCoveringsText, /*#__PURE__*/React__default['default'].createElement("br", null), verbiage.avoidExcessiveBacklightingText), /*#__PURE__*/React__default['default'].createElement(OverlayImageContainer, {
     className: classNames.imageContainer
-  }, /*#__PURE__*/React__default['default'].createElement(StyledImage, {
+  }, /*#__PURE__*/React__default['default'].createElement("img", {
     className: classNames.image,
     alt: verbiage.headingText,
     src: assets.instructionImageUrl
-  })), /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
+  })), /*#__PURE__*/React__default['default'].createElement(StyledButtonsRow$5, {
+    className: classNames.buttonsRow
+  }, /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
     variant: "positive",
     disabled: !cameraReady || !modelsReady,
     finished: cameraReady && modelsReady,
@@ -11959,14 +11977,14 @@ var SelfieCaptureLoadingOverlay = function SelfieCaptureLoadingOverlay(_a) {
       setDismissed(true);
       onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();
     }
-  }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : verbiage.modelsWarmingUpText), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, cameraReady && modelsReady ? verbiage.continueText : modelsReady ? verbiage.cameraInitializingText : verbiage.modelsWarmingUpText)), /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       display: 'none'
     }
   }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null))));
 };
-var StyledGuidanceMessage = styled__default['default'](GuidanceMessage)(templateObject_1$c || (templateObject_1$c = tslib.__makeTemplateObject(["\n  max-width: 280px;\n  margin: 18px auto 12px;\n  line-height: 1.5;\n  padding: 12px 24px;\n"], ["\n  max-width: 280px;\n  margin: 18px auto 12px;\n  line-height: 1.5;\n  padding: 12px 24px;\n"])));
-var StyledImage = styled__default['default'].img(templateObject_2$6 || (templateObject_2$6 = tslib.__makeTemplateObject(["\n  position: relative;\n  top: 5%;\n"], ["\n  position: relative;\n  top: 5%;\n"])));
+var StyledGuidanceMessage = styled__default['default'](GuidanceMessage)(templateObject_1$c || (templateObject_1$c = tslib.__makeTemplateObject(["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"], ["\n  padding: 12px 24px;\n  font-weight: normal;\n  line-height: 1.5;\n  margin-bottom: -30px;\n"])));
+var StyledButtonsRow$5 = styled__default['default'](ButtonsRow)(templateObject_2$6 || (templateObject_2$6 = tslib.__makeTemplateObject(["\n  flex-direction: column;\n  padding-top: 25px;\n"], ["\n  flex-direction: column;\n  padding-top: 25px;\n"])));
 var templateObject_1$c, templateObject_2$6;
 
 var FaceLivenessSuccess = function FaceLivenessSuccess(_a) {
@@ -13286,6 +13304,8 @@ var IdVideoCaptureGuides = function IdVideoCaptureGuides(_a) {
 var IdVideoCapture = function IdVideoCapture(_a) {
   var _b, _c, _d, _e, _f, _g;
   var onComplete = _a.onComplete,
+    onIdFrontImageCaptured = _a.onIdFrontImageCaptured,
+    onIdBackImageCaptured = _a.onIdBackImageCaptured,
     onFaceNotDetected = _a.onFaceNotDetected,
     _h = _a.idCardFrontDetectionThreshold,
     idCardFrontDetectionThreshold = _h === void 0 ? 0.48 : _h,
@@ -13390,6 +13410,14 @@ var IdVideoCapture = function IdVideoCapture(_a) {
       }
     });
   }, [idCardFrontDetectionThreshold, onIdPredictionMade]);
+  var captureCanvas = React.useRef(null);
+  var captureFrame = React.useCallback(function () {
+    if (!captureCanvas.current || !videoRef.current) return;
+    drawToCanvas(captureCanvas.current, videoRef.current);
+    var imageUrl = captureCanvas.current.toDataURL('image/jpeg', 0.98);
+    clearCanvas(captureCanvas.current);
+    return imageUrl;
+  }, [videoRef]);
   var onIdBackCaptureComplete = React.useCallback(function () {
     if (readTextPrompt) {
       setRequestedAction('READ_TEXT');
@@ -13400,10 +13428,17 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   React.useEffect(function () {
     (function () {
       return tslib.__awaiter(void 0, void 0, void 0, function () {
+        var frame;
         return tslib.__generator(this, function (_a) {
           switch (_a.label) {
             case 0:
               if (!(goodFramesThresholdMet && requestedAction == 'SHOW_ID_FRONT')) return [3 /*break*/, 4];
+              if (onIdFrontImageCaptured) {
+                console.log('capturing front frame!');
+                frame = captureFrame();
+                console.log(frame);
+                frame && onIdFrontImageCaptured(frame);
+              }
               if (!skipShowIdCardBack) return [3 /*break*/, 3];
               if (!(skipShowIdCardBack === true)) return [3 /*break*/, 1];
               return [2 /*return*/, onIdBackCaptureComplete()];
@@ -13418,6 +13453,14 @@ var IdVideoCapture = function IdVideoCapture(_a) {
               setRequestedAction('FLIP_ID');
               setTimeout(function () {
                 setRequestedAction('SHOW_ID_BACK');
+                setTimeout(function () {
+                  if (onIdBackImageCaptured) {
+                    console.log('capturing rear frame!');
+                    var frame = captureFrame();
+                    console.log(frame);
+                    frame && onIdBackImageCaptured(frame);
+                  }
+                }, showIdCardBackDurationMs - 1000);
               }, 3500);
               _a.label = 4;
             case 4:
@@ -13426,7 +13469,7 @@ var IdVideoCapture = function IdVideoCapture(_a) {
         });
       });
     })();
-  }, [goodFramesThresholdMet, onIdBackCaptureComplete, requestedAction, skipShowIdCardBack]);
+  }, [captureFrame, goodFramesThresholdMet, onIdBackCaptureComplete, onIdBackImageCaptured, onIdFrontImageCaptured, requestedAction, showIdCardBackDurationMs, skipShowIdCardBack]);
   useTimeout(showIdCardBackDurationMs, onIdBackCaptureComplete, requestedAction !== 'SHOW_ID_BACK', false, requestedAction === 'SHOW_ID_BACK');
   var onReadTextTimeout = React.useCallback(function () {
     stopRecording();
@@ -13467,7 +13510,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
   return /*#__PURE__*/React__default['default'].createElement(PageContainer, {
     ref: ref,
     className: "flex"
-  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement(CameraVideoTag, null), /*#__PURE__*/React__default['default'].createElement(InvisibleCanvas, {
+    ref: captureCanvas
+  }), requestedAction === 'READ_TEXT' ? ( /*#__PURE__*/React__default['default'].createElement("div", {
     style: {
       position: 'absolute',
       width: '100%',
@@ -13509,9 +13554,9 @@ var IdVideoCapture = function IdVideoCapture(_a) {
     }
   }, timeRemaining), /*#__PURE__*/React__default['default'].createElement(LoaderButton, {
     variant: "positive",
-    finished: true,
     onClick: stopRecording,
-    colors: colors.readTextDoneBtn
+    colors: colors.readTextDoneBtn,
+    finished: true
   }, verbiage.readTextDoneBtnText)))) : ( /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(IdVideoCaptureGuides, {
     assets: assets.guides,
     verbiage: rawVerbiage.guides,
@@ -13616,7 +13661,9 @@ var VideoIdWizard = function VideoIdWizard(_a) {
   var _q = React.useContext(SubmissionContext),
     submissionStatus = _q.submissionStatus,
     idCaptureVideoUrl = _q.idCaptureVideoUrl,
-    setIdCaptureVideoUrl = _q.setIdCaptureVideoUrl;
+    setIdCaptureVideoUrl = _q.setIdCaptureVideoUrl,
+    setIdCaptureVideoIdFrontImage = _q.setIdCaptureVideoIdFrontImage,
+    setIdCaptureVideoIdBackImage = _q.setIdCaptureVideoIdBackImage;
   var _r = React.useState('CAPTURING_ID'),
     captureState = _r[0],
     setCaptureState = _r[1];
@@ -13718,6 +13765,8 @@ var VideoIdWizard = function VideoIdWizard(_a) {
         return /*#__PURE__*/React__default['default'].createElement(IdVideoCapture, {
           key: "id-video-capture-".concat(attempt),
           onComplete: onVideoCaptureComplete,
+          onIdFrontImageCaptured: setIdCaptureVideoIdFrontImage,
+          onIdBackImageCaptured: setIdCaptureVideoIdBackImage,
           onFaceNotDetected: onVideoCaptureFaceNotDetected,
           idCardFrontDetectionThreshold: idCardFrontDetectionThreshold,
           idCardFrontFocusThreshold: idCardFrontFocusThreshold,