Adding Payments with Javascript

There a variety of ways to send payment data to Spreedly. We recommend using the iFrame payment form or Spreedly Express to incur the least amount of PCI compliance scope.

That being said, there may be scenarios when you’d like to asynchronously submit payment information using JSONP or CORS. It is not possible to automatically retain the payment information added via JSONP or CORS. It may be retained via a separate API call.

JSONP

Spreedly supports JSONP for adding payment methods. This will make an asynchronous call to add the payment method while your app remains active.

JavaScript based requests must adhere to a policy known as same origin policy. With the JSONP methodology, the request to the server is made with a GET request and all the parameters are sent in the querystring.

Due to the limitations of some browsers, we do not support the data parameters that can be done using the CORS method.

This example uses jQuery to handle browser differences in implementation. You can adapt this example to any other JavaScript framework you might be using.

var card = {
  "kind": "credit_card",
  "first_name": "Joe",
  "last_name":"Jones",
  "number": "5555555555554444",
  "verification_value": "423",
  "month": "3",
  "year": "2032",
  "email": "joey@example.com"
}

// Serialize and URI encode parameters.
var paramStr = $.param(card);


var url = "https://core.spreedly.com/v1/payment_methods.js?environment_key=C7cRfNJGODKh4Iu5Ox3PToKjniY&" + paramStr;

$.ajax({
  type: "GET",
  url: url,
  dataType: "jsonp"
}).success(function(data) {
  console.log(data);
  if (data.status === 201) {
    alert(data.transaction.payment_method.token);
  } else {
    alert('validation error')
  }
});

In this short example all we are doing is displaying the payment method token in an alert window. What you will want to do next is send that token back to your server for storage.

Here is the full output you will receive. Notice that there is a token for the payment method which you can use to execute a purchase against:


{
  "transaction": {
    "token": "AXWwxPZDT8NdwnMJODnX7qBgMMV",
    "created_at": "2017-07-27T17:51:31Z",
    "updated_at": "2017-07-27T17:51:31Z",
    "succeeded": true,
    "transaction_type": "AddPaymentMethod",
    "retained": false,
    "message": "Succeeded!",
    "message_key": "messages.transaction_succeeded",
    "payment_method": {
      "token": "8UdoI6ITx9M42B7dEpMku7n8vze",
      "data": null,
      "storage_state": "cached",
      "email": "joey@example.com",
      "created_at": "2017-07-27T17:51:31Z",
      "updated_at": "2017-07-27T17:51:31Z",
      "errors": [

      ],
      "payment_method_type": "credit_card",
      "first_name": "Joe",
      "last_name": "Jones",
      "full_name": "Joe Jones",
      "card_type": "master",
      "last_four_digits": "4444",
      "first_six_digits": "555555",
      "month": 3,
      "year": 2032,
      "address1": null,
      "address2": null,
      "city": null,
      "state": null,
      "zip": null,
      "country": null,
      "phone_number": null,
      "eligible_for_card_updater": true,
      "shipping_address1": null,
      "shipping_address2": null,
      "shipping_city": null,
      "shipping_state": null,
      "shipping_zip": null,
      "shipping_country": null,
      "shipping_phone_number": null,
      "company": null,
      "verification_value": "XXX",
      "number": "XXXX-XXXX-XXXX-4444",
      "fingerprint": "b5fe350d5135ab64a8f3c1097fadefd9effb"
    }
  },
  "status": 201
}

CORs

As an alternative to using JSONP, Spreedly also supports using CORS. Support in browsers is not as widespread as JSONP, however there are some other benefits for using this method. It uses the HTTP POST action rather than GET which is generally more appropriate for adding an element to a system. Also since it has a post body this makes is possible to add data elements.

This example uses jQuery to handle browser differences in implementation. You can adapt this example to any other JavaScript framework you might be using.

var card = {
  "payment_method":{
    "credit_card":{
      "first_name": "Joe",
      "last_name": "Jones",
      "number":"5555555555554444",
      "verification_value": "423",
      "month":"3",
      "year":"2032",
      "email": "joey@example.com"
    },
    "data": {
      "my_payment_method_identifier": "448",
      "extra_stuff": {
        "some_other_things": "Can be anything really"
      }
    }
  }
} 
var url = "https://core.spreedly.com/v1/payment_methods.json?environment_key=C7cRfNJGODKh4Iu5Ox3PToKjniY";

$.ajax({
  type: "POST",
  url: url,
  dataType: "json",
  data: card
}).success(function(data) {
  console.log(data);
  alert(data.transaction.payment_method.token);
}).error(function(request, status, error) {
  console.log(error);
  alert('error');
});

Spreedly will give you back the following output:


{
  "transaction": {
    "token": "MUn2wNmRCnxhNfXClPTE0nDQ7sI",
    "created_at": "2017-07-27T17:51:30Z",
    "updated_at": "2017-07-27T17:51:30Z",
    "succeeded": true,
    "transaction_type": "AddPaymentMethod",
    "retained": false,
    "state": "succeeded",
    "message_key": "messages.transaction_succeeded",
    "message": "Succeeded!",
    "payment_method": {
      "token": "Vv2Rvt0GJptSjupHjBK9q5KP3lO",
      "created_at": "2017-07-27T17:51:30Z",
      "updated_at": "2017-07-27T17:51:30Z",
      "email": null,
      "data": {
        "my_payment_method_identifier": 448,
        "extra_stuff": {
          "some_other_things": "Can be anything really"
        }
      },
      "storage_state": "cached",
      "test": true,
      "last_four_digits": "4444",
      "first_six_digits": "555555",
      "card_type": "master",
      "first_name": "Joe",
      "last_name": "Jones",
      "month": 3,
      "year": 2032,
      "address1": null,
      "address2": null,
      "city": null,
      "state": null,
      "zip": null,
      "country": null,
      "phone_number": null,
      "company": null,
      "full_name": "Joe Jones",
      "eligible_for_card_updater": true,
      "shipping_address1": null,
      "shipping_address2": null,
      "shipping_city": null,
      "shipping_state": null,
      "shipping_zip": null,
      "shipping_country": null,
      "shipping_phone_number": null,
      "payment_method_type": "credit_card",
      "errors": [

      ],
      "fingerprint": "b5fe350d5135ab64a8f3c1097fadefd9effb",
      "verification_value": "XXX",
      "number": "XXXX-XXXX-XXXX-4444"
    }
  }
}