Migrate chargeio tokenization library to hosted fields

Introduction

This is intended to give a user an idea of how to migrate from the chargeio tokenization library to the hosted fields tokenization library. Each section of this document addresses a step in the migration, the code snippets prefixed with “chargeio” show a likely implementation using the chargeio tokenization library, the code snippets prefixed with “hosted fields” show a likely implementation using the hosted fields tokenization library.

This is in no way a complete reference, Refer to the hosted fields documentation for implementation details. This is intended for developers that have expertise in using the AffiniPay chargeio library and wish to switch to the AffiniPay hosted fields library. A user with no experience with the chargeio library might find starting from scratch using the hosted fields documentation more useful than following this migration guide.

Change gateway tokenization library for hosted fields tokenization library

Reference the new affinipay hosted fields library in place of the chargeio tokenization library.

chargeio

<script type="text/javascript" src="https://api.chargeio.com/assets/api/v1/chargeio.min.js"></script>

hosted fields

<script src="https://cdn.affinipay.com/hostedfields/release/fieldGen.js"></script>

Update your payment form

The new tokenization library requires <div> elements in place of input elements. the <div> elements will be replaced with hosted fields which are iframes that contain input elements.

chargeio

<div>
  <label>Name</label>
  <input type="text" name="name">
</div>
<div>
  <label>Card Number</label>
  <input type="text" name="number">
</div>
<div>
  <label>CVV</label>
  <input type="text" name="cvv">
</div>
<div>
  <label>Exp Month</label>
  <input type="text" name="exp_month">
</div>
<div class="form-group">
  <label>Exp Year</label>
  <input type="text" name="exp_year">
</div>
<div>
  <label>Zip Code</label>
  <input type="text" name="postal_code">
</div>

<button type="submit" id="pay" disabled>Submit</button>

hosted fields

<div>
  <label for="my_credit_card_field_id">Credit Card</label>
  <div id="my_credit_card_field_id"></div>
</div>
  <label for="exp_month">Exp Month</label>
  <input id="exp_month" type="text" name="exp_month">
</div>
<div>
  <label for="exp_year">Exp Year</label>
  <input id="exp_year" type="text" name="exp_year">
</div>
<div>
  <label for="my_cvv_field_id">CVV</label>
  <div id="my_cvv_field_id"></div>
<div>
<div>
  <label for="postal_code">Zip Code</label>
  <input id="postal_code" type="text" name="postal_code">
</div>
<input type="submit" value="Submit" />

Initialize the tokenization library with the merchant public key

The chargeio library requires you call ChargeIO.init with your merchant public key, the AffiniPay hosted fields library requires you call window.AffiniPay.hostedFields.initializeFields(config, callback) with your merchant public key as well as your hosted fields configuration and callback function.

chargeio

  <script type="text/javascript">ChargeIO.init({public_key: 'your merchant public key'});</script>

hosted fields

const creditCardFieldConfig = {
  selector: "#my_credit_card_field_id",
  input: {
    type: "credit_card_number"
  }
}

const cvvFieldConfig = {
  selector: "#my_cvv_field_id",
  input: {
    type: "cvv"
  }
}

const hostedFieldsConfiguration = {
  publicKey: 'm_1234567890',
  fields: [
    creditCardFieldConfig,
    cvvFieldConfig,
  ]
}

const hostedFieldsCallback = function (state) {
  console.log(JSON.stringify(state, null, 2))
}

const hostedFields = window.AffiniPay.HostedFields.initializeFields(hostedFieldsConfiguration, hostedFieldsCallback)

// Save the return value of initializeFields for later use
// hostedFields.getState()
// hostedFields.getPaymentToken(formData)

Call getPaymentToken(formData) instead of create_token(formData)

To get a payment token the chargeio library required you to call create_token(formData), for hosted fields call getPaymentToken(formData) after all fields have successfully been tokenized.

chargeio

ChargeIO.create_token(paymentJson, function(token) {
  $.post('<add your URL here>', { 'amount': amount, 'token_id': token.id }).done(function(data) {
    if (data.messages) {
      processErrorMessages(data.messages)
    }
    else {
      window.location = '<add your URL here>'
    }
  }).fail(function(xhr) {
    processErrorMessages([ { "message": "An unexpected error occurred" } ])
  })
})

hosted fields

hostedFields.getPaymentToken({ "postal_code": postal_code, "exp_year": exp_year, "exp_month": exp_month })
.then(function(result){
  console.log(result.data.id)
  // If getPaymentToken returns successfully you may pass your payment token to your backend service.
}).catch(function(err){
  console.log(err)
})

Example reference

Below are Javascript examples for each library.

chargeio

<script type="text/javascript" src="https://api.affinipay.com/assets/api/v1/chargeio.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
 ChargeIO.init({ public_key: 'your merchant public key' })

  function processErrorMessages(messages) {
    var msgList = $('#messages ul')
    $(msgList).empty()
    $.each(messages, function(index, item) {
      $(msgList).append("<li>" + item.message + "</li>")
    })

    $('#messages').show()
    $('#pay').prop("disabled", false)
  }

  ChargeIO.ready(function() {
    $('#pay').prop("disabled", false)
    $('#pay').click(function(event) {
      event.preventDefault()
      $('#pay').prop("disabled", true)
      var amount = parseInt($('#total').text().replace(/\D/g,''))
      var paymentJson = ChargeIO.payment_params($('form'))
      ChargeIO.create_token(paymentJson, function(token) {
        $.post('<add your URL here>', { 'amount': amount, 'token_id': token.id }).done(function(data) {
          if (data.messages) {
            processErrorMessages(data.messages)
          }
          else {
            window.location = '<add your URL here>'
          }
        }).fail(function(xhr) {
          processErrorMessages([ { "message": "An unexpected error occurred" } ])
        })
      })
    })
  })
</script>

hosted fields

<script type="text/javascript">
  const style = {
    border: "1px solid rgb(204, 204, 204)",
    'border-style': 'inset',
    color: "#000",
    "font-size": "11px",
    "font-weight": "400",
    padding: "8px",
    width: "100%"
  }
  const hostedFieldsConfiguration = {
    publicKey: "m_1234567890",
    fields: [
      {
        selector: "#my_credit_card_field_id",
        input: {
          type: "credit_card_number",
          css: style
        }
      },
      {
        selector: "#my_cvv_field_id",
        input: {
          type: "cvv",
          css: style
        }
      }
    ]
  }

  const hostedFieldsCallBack = function(state) {
    console.log(state)
  }

  const hostedFields = window.AffiniPay.HostedFields.initializeFields(
    hostedFieldsConfiguration,
    hostedFieldsCallBack
  )

  form.onsubmit = function(event) {
    event.preventDefault()
    console.log(hostedFields.getState())
    if(!hostedFields.getState()){
      //send error
      return
    }
    hostedFields.getPaymentToken({ "postal_code": postal_code, "exp_year": exp_year, "exp_month": exp_month })
      .then(function(result){
        console.log(result.data.id)
        // If getPaymentToken returns successfully you may pass your payment token to your backend service.
      }).catch(function(err){
        console.log(err)
    })
  }
</script>

Next step

Once you have a payment form, you can create a charge.