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 from a web browser. It is not possible to automatically retain the payment information added via these methods. The payment method token may be retained via an authenticated API call.

CORS

The preferred method for capturing payment information in a browser is to use an HTTP POST via Cross-Origin Resource Sharing (CORS). Support is generally available in browsers. Also, this endpoint uses the HTTP POST verb rather than GET, which is generally more appropriate for adding an element to a system. Finally, 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"
    }
  }
}

JSONP (deprecated)

Spreedly still supports JSONP for adding payment methods, for very old browsers. 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 query string.

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

Do not use the JSONP endpoint for new implementations. Use the CORS method instead.

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
}