From 470e91d3802a196ed095aac19ea96a271965a0ad Mon Sep 17 00:00:00 2001
From: Javid Khan <javid90khan@gmail.com>
Date: Wed, 27 Sep 2023 17:23:55 +1000
Subject: [PATCH 1/2] feat: Adding button to invoke 3DS check

---
 fatzebra.js/harness.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/fatzebra.js/harness.html b/fatzebra.js/harness.html
index d342892..d04d2be 100644
--- a/fatzebra.js/harness.html
+++ b/fatzebra.js/harness.html
@@ -33,6 +33,7 @@ <h2 class='row-margin'>Payments Form</h2>
             <div class='col-md-12'>
               <button type='button' class='btn btn-outline-danger' id='reset'>Reset</button>
               <button type='button' class='btn btn-outline-primary' id='load-hpp'>Load Payments Page</button>
+              <button type='button' class='btn btn-outline-primary' id='verify-card'>Invoke 3DS</button>
               <button type='button' class='btn btn-outline-info' data-toggle='modal' data-target='#test-card-modal'>View Test Cards</button>
             </div>
           </div>

From b1d5ce0edb1981a4a4340e3a688e640db714c092 Mon Sep 17 00:00:00 2001
From: Ryan Bigg <me@ryanbigg.com>
Date: Mon, 30 Oct 2023 13:20:37 +1100
Subject: [PATCH 2/2] Subscribe to sca.* events once

---
 fatzebra.js/harness.js | 120 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 119 insertions(+), 1 deletion(-)

diff --git a/fatzebra.js/harness.js b/fatzebra.js/harness.js
index 04f3907..b694da1 100644
--- a/fatzebra.js/harness.js
+++ b/fatzebra.js/harness.js
@@ -247,9 +247,127 @@ const loadHPP = function() {
   })
 }
 
+function scaSuccess(event) {
+  console.log('scaSuccess');
+  console.log(JSON.stringify(event.detail))
+}
+
+function scaError(event) {
+  console.log('scaError');
+  console.log(JSON.stringify(event.detail))
+}
+
+const verifyCard = function () {
+  console.log('Invoking 3DS')
+  const accessToken  = $('#accessToken').val();
+  const username     = $('#username').val();
+  const sharedSecret = $('#sharedSecret').val();
+  const amount       = parseInt($('#amount').val());
+  const currency     = $('#currency').val();
+  const reference    = $('#reference').val();
+  const firstName    = $('#firstName').val();
+  const lastName     = $('#lastName').val();
+  const email        = $('#email').val();
+  const address      = $('#address').val();
+  const city         = $('#city').val();
+  const postcode     = $('#postcode').val();
+  const state        = $('#state').val();
+  const country      = $('#country').val();
+  const cardToken      = $('#cardToken').val();
+  window.localStorage.setItem('fz-access-token', accessToken);
+
+  const verification = CryptoJS.HmacMD5([reference, amount, currency].join(':'), sharedSecret).toString();
+
+  const fz = new FatZebra({
+    username,
+    test: true
+  });
+
+  // 1. verifyCard called
+  // 2. subscribe -> fz.sca.success
+  // 3. subscribe -> fz.sca.error
+  // 4. Event: fz.sca.error
+  // 5. verifyCard called again
+  // 6. subscribe -> fz.sca.success
+  // 7. subscribe -> fz.sca.error
+  // 8. Event: fz.sca.success
+
+  // fz.off('fz.sca.success', scaSuccess)
+  fz.onOnce('fz.sca.success', scaSuccess)
+
+  // fz.off('fz.sca.error', scaError)
+  fz.onOnce('fz.sca.error', scaError)
+
+  // fz.validation,error only captures errors related to SDK methods, such as renderPaymentsPage.
+  // Please subscribe to fz.form_validation.error for errors related to Hosted Payments Page.
+  fz.on('fz.validation.error', function(event) {
+    console.log('fz.validation.error');
+    console.log(JSON.stringify(event.detail))
+  })
+
+  // Capture form validation errors on the Hosted Payments Page.
+  // Only subscribe to this event if you'd like to customise call-to-action following validation errors.
+  fz.on('fz.form_validation.error', function(event) {
+    console.log('fz.form_validation.error');
+    console.log(JSON.stringify(event.detail))
+  })
+
+  fz.on('fz.tokenization.success', function(event) {
+    console.log('fz.tokenization.success');
+    console.log(JSON.stringify(event.detail))
+  })
+
+  fz.on('fz.tokenization.error', function(event) {
+    console.log('fz.tokenization.error');
+    console.log(JSON.stringify(event.detail))
+  })
+
+  fz.on('fz.payment.success', function(event) {
+    console.log('fz.payment.success');
+    console.log(JSON.stringify(event.detail))
+    // Verify data integrity with your backend via ajax before consuming transaction data.
+    alert('payment success!');
+
+  })
+
+  fz.on('fz.payment.error', function(event) {
+    console.log('fz.payment.error');
+    console.log(JSON.stringify(event.detail))
+    alert('payment error!');
+  })
+
+  fz.verifyCard({
+    customer: {
+      firstName,
+      lastName,
+      email,
+      address,
+      city,
+      postcode,
+      state,
+      country
+    },
+    paymentIntent: {
+      payment: {
+        amount,
+        currency,
+        reference
+      },
+      verification
+    },
+    paymentMethod: {
+      type: "card_on_file",
+      data: {
+        token: cardToken
+      }
+    }
+  })
+}
+
 const refreshPage = function() {
   location.reload();
 }
 
 $('#load-hpp').click(loadHPP);
-$('#reset').click(refreshPage);
\ No newline at end of file
+$('#reset').click(refreshPage);
+$('#verify-card').click(verifyCard);