Overview

This article introduces the ACME Fraud Shield Javascript SDK and the steps required to integrate it into your checkout flow.  It is a simple integration but requires an underlying knowledge of embedding JS in websites to complete.


TABLE OF CONTENTS


Step 1: Readiness

  • Review the introduction to ACME Fraud Shield here: What is ACME Fraud Shield?
  • Understand the process of Creating a Custom eCommerce site using ACME APIs
  • Your production environment will need access to the underlying calls required for successful processing of data, ensure that these are part of your seller agreement with ACME.
  • Be sure to include conversations with your support team as historically after any successful fraud blocking mechanism, bad actors will seek other means of circumventing the technology.

Step 2: Integrate ACME Payments' SDK

Step 3: Implement the module

Usage (ES Module)

All of the examples also apply to the UMD version but instead of importing our library as an ES Module, it will be available under the global ACME object.


const acmeFraudShield = window.ACME.ACMEFraudShield.create({ mid : 'your_mid', // Use your provided merchant identification number (MID) publishableKey: 'your_publishable_key', // Use your provided publishable});
JavaScript

Handle Decisioning Data Session

Required data fields to properly decision:

Insufficient data may cause improper consumer identification or cause unnecessary friction in the transaction, forcing the user to return and retry.


In release 11.35.1 the requirements as we understand some venues have optimized less data as part of checkout flows. However, this may cause additional friction when it comes to identifying card owners to the card issuers. It is recommended to provide as much data as possible to ensure the least friction. 


import { ACMEFraudShield } from '@acmepayments/fraud-shield';const acmeFraudShield = ACMEFraudShield.create({  mid: 'your_mid',  publishableKey: 'your_publishable_key',});try {  const result = await acmeFraudShield.handle3DSSession({    amount: '',  //string, required    currencyCode: '840', // ISO 4217 numeric    externalId: '',  //string, optional    billingAddress1: '',  //string, optional    billingAddress2: '', //string, optional    billingCity: '',  //string, optional    billingState: '', //string, optional    billingCountryCode: '', // ISO 3166-1 numeric, optional    billingFirstName: '', //string, required    billingLastName: '', //string, required    billingPostalCode: '', //string, required    billingPhone: '', //string, optional    cardExpMonth: '', //string, required    cardExpYear: '', //string, required    cardNumber: '', //string, required    email: '', //string, required    // This allows you to pass a custom container for the stepup iframe, it will default to `document.body`    // container: {    //   selector: () => document.querySelector('...')    // }  });} catch (error) {  // handle error}
JavaScript


Step 4:  Return enhancedSecurity.acmeSessionId 

The response to this call:

interface ACMEFraudShieldResult {
  acmeSessionId: string;
  status: string;
  providerRefId: string;
  paymentProcessor: number;
  saleChannel: string;
  firstName: string;
  lastName: string;
  address1: string;
  zipCode: string;
  authChallengeCallbackRecordedOn: number;
  cavv: string;
  eci: string;
  threeDSProviderTransactionId: string;
  createdOn: number;
  updatedOn: number;
}

In your checkout call, you must include variable enhancedSecurity.acmeSessionId from above to complete a transaction, this references the transaction on ACME's security layer.