Migrating from Secured Fields v1.1.4 to 1.3.0

Use these guidelines to update your integration with Adyen when you are migrating from Secured Fields 1.1.4 to 1.3.0 or later.

Step 1: Update the Secured Fields version

Update the script version in the <head> element of your payments page. The latest version is 1.5.2.

<script type="text/javascript" src="https://checkoutshopper-test.adyen.com/checkoutshopper/assets/js/sdk/checkoutSecuredFields.1.5.2.min.js"></script>

Step 2: Update Secured Fields elements

Remove data-hosted-id in the <div> in the <body> of your payments page. The data-cse attribute is now used to identify the holder for secured iframes.

<label class="pm-form-label">
  <span class="pm-form-label__text">Card number:</span>
  <span class="pm-input-field" data-hosted-id="hostedCardNumberField" data-cse="encryptedCardNumber" />
</label>

<label class="pm-form-label">
  <span class="pm-form-label__text">Card number:</span>
  <span class="pm-input-field" data-cse="encryptedCardNumber" />
</label>

Step 3: Review and update Secured Fields configuration

Check the configuration object at the bottom of the <body> and add properties if applicable.

   <script type="text/javascript">
   var csfSetupObj = {
      rootNode: '.cards-div',
      configObject : {
        originKey : "[ORIGIN KEY]",
        cardGroupTypes: ['maestro','visa','amex'] // OPTIONAL
        },
      allowedDOMAccess : false, // OPTIONAL  - Defaults to true
      showWarnings : true,// OPTIONAL  - Defaults to false
   };
   var securedFields = csf(csfSetupObj);
  </script>

originKey: Required. The Origin Key of your website. To find out how to generate one, see How to get an origin key.
cardGroupTypes: Optional. Configure supported card types. If card types are not provided, the configuration defaults to ['mc','visa','amex'].
allowedDOMAccess: Optional. Defaults to true. If allowedDOMAccess is set to true, Secured Fields adds encrypted values to hidden <input> fields in the <div> that holds the data-cse elements.
If you do not want Secured Fields to automatically add hidden input fields, set allowedDOMAccess to false. To get the encrypted card details when allowedDOMAccess is set to false, use the values from the blob property on the onFieldValid callback object. This callback is invoked as a specific field is validated and encrypted. See Secured Field callbacks for more information.
showWarnings: Optional. From Secured Fields version 1.3.1 and later, this configuration defaults to false. To continue receiving warnings for origin and data mismatches, set the value to true.

Next, if you are adding placeholder values in your configuration, replace the field names with encryptedCardNumber, encryptedExpiryDate, encryptedExpiryMonth, encryptedExpiryYear, and encryptedSecurityCode.

Lastly, review your callback implementation. We introduced the onBinValue callback and changed object values in version 1.3.0.

Callback changes in 1.3.0

For a complete description of the callbacks, see Secured Field callbacks page.

onAllValid

{
  allValid: false,
  type: "card"
}

onFieldValid

{
  blob: "adyenjs_0_1_22$IGaNbdJNru...",
  encryptedFieldName: "encryptedExpiryMonth",
  fieldType: "encryptedExpiryDate",
  uid: "card-encrypted-month",
  valid: true,
  txVariant: "card",
  markerNode: [HTML Node],
  type: "month"
}

** If you are upgrading from version 1.2.0, update type:"card" to txVariant:"card" and originalFieldType:"month" to type:"month".

onFocus

{
  action: "focus",
  focus: true,
  fieldType: "encryptedCardNumber",
  txVariant: "card",
  markerNode: [HTML Node]
}

onBinValue

This callback is available from version 1.3.1.

{
  binValue: "411111",
  txVariant: "card"
}