3DS

<script 
  src="https://secure.networkmerchants.com/js/v1/Gateway.js">
</script>

const gateway = Gateway.create(pretransactResponse.gatewayPublicKey);

const threeDS = gateway.get3DSecure();

const options = {
  paymentToken: "...", 
  currency: 'USD',
  amount: '100.00',
  firstName: 'John',
  lastName: 'Samuels',
  email: 'johnsamuels@example.com',
  address1: '11th Street 47 W',
  city: 'New York',
  state: 'NY',
  country: 'US',
  postalCode: '10001',
  phone: '+1 212-555-0123',
};

const threeDSUI = threeDS.createUI(options);

<div id="threeds-placeholder"></div>
  
...

threeDSUI.start('#threeds-placeholder');

// Listen for the 'challenge' callback to ask the user for a password
threeDSUI.on('challenge', (e) => {
  console.log('[3DS] Challenged', e);
});

// Listen for the 'complete' callback to provide all the needed 3DS data
threeDSUI.on('complete', (e) => {
  console.log('[3DS] complete', e);
});

// Listen for the 'failure' callback to indicate that the customer has failed to authenticate
threeDSUI.on('failure', (e) => {
  console.error('[3DS] failure', e);

  if (e.code === "TRANSACTION_STATUS_N" || e.code === "TRANSACTION_STATUS_R") {
    // hard stop, show error message

    // R — Rejected
    // Issuer rejected authentication
    // High fraud signal
    // ❌ Do not fall back

    // N — Not authenticated / Failed
    // Authentication attempted but failed
    // ❌ Do not fall back

    alert("Error while doing 3DS: " + e.message)
    return;
  }

  if (e.code === "TRANSACTION_STATUS_U") {
    if (e.cardHolderInfo?.toLowerCase() === "challenge cancelled by user") {
      alert("Verification was cancelled. Your payment wasn't completed. Please try again");
    } else {
       // Authentication unavailable / not enrolled
       // The card does NOT participate in 3DS
       // → ✅ Proceed with payment WITHOUT liability shift
    }
  }
});

// Listen for any errors that might occur
gateway.on('error', (e) => {
  console.error('[3DS] gateway general error', e);
})

// Listen for the 'complete' callback to provide all the needed 3DS data
threeDSUI.on('complete', async (e) => {
  console.log('[3DS] complete', e);

  doTransactRequest({   
    threeDS: { 
      cavv: e.cavv,
      xid: e.xid,
      eci: e.eci,
      cardHolderAuth: e.cardHolderAuth,
      threeDsVersion: e.threeDsVersion,
      directoryServerId: e.directoryServerId,
      // cardHolderInfo should not be passed into the API and should be displayed to the customer if a value is present.
      //
      // cardHolderInfo: e.cardHolderInfo
    }
  });
});

threeDSUI.on('failure', (e) => {
  ...

  if (e.code === "TRANSACTION_STATUS_U") {
    if (e.cardHolderInfo?.toLowerCase() === "challenge cancelled by user") {
      alert("Verification was cancelled. Your payment wasn't completed. Please try again");
    } else {
      // Authentication unavailable / not enrolled
      // The card does NOT participate in 3DS
      // → ✅ Proceed with payment WITHOUT liability shift

      doTransactRequest({});
    }
  };
});

const doTransactRequest = (3dsParams) => {
  const transactParams = {
    amount: "100.00",
    type: "fiat",
    opaqueData: { token },
    customer: {
      name: "John Samuels",
      email: "johnsamuels@example.com",
      phone: "+1 212-555-0123",
    },
    billingAddress: {
      street: "11th Street 47 W",
      unit: "",
      city: "New York",
      state: "NY",
      zipCode: "10001",
      countryCode: "US",
      phone: "+1 212-555-0123",
    },
    orderId: `externalOrderId_112233`,

    // 3DS data
    ...3dsParams,
  };

  const response = await fetch("https://api.chargx.io/transact", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-publishable-api-key": publishableApiKey,
    },
    body: JSON.stringify(transactParams),
  });

  if (!response.ok) {
    const errorText = await response.text();
    throw new Error(`Request failed (${response.status}): ${errorText}`);
  }

  const responseData = await response.json();
}