Javascript API

There may be scenarios where payment information should be submitted asynchronously from a web browser. It is not possible to automatically retain payment information added via this method, since the retained:true parameter only works using the direct API via a basic authenticated call.

Since methods shown in this guide do not use basic authentication, a separate authenticated call from a secure environment is required to retain each payment method for future use.

⚠️
Note
If Enhanced Security is enabled on your environment, all Create payment method requests will be impacted and require basic authentication or session nonce authentication. This includes tokenization requests through iFrame, the Javascript API, and the Direct API.

CORS

To capture payment information in a browser, the preferred method uses an HTTP POST via Cross-Origin Resource Sharing (CORS). Support is generally available in browsers. 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 it possible to add DATA elements.

The following example uses jQuery to handle browser differences in implementation. Simply adapt this to any other JavaScript framework in use.

var card = {
  "payment_method":{
    "credit_card":{
      "first_name": "Joe",
      "last_name": "Jones",
      "number":"5555555555554444",
      "verification_value": "423",
      "month":"3",
      "year":"2032",
      "email": "[email protected]"
    },
    "data": {
      "my_payment_method_identifier": "448",
      "extra_stuff": {
        "some_other_things": "Can be anything really"
      }
    }
  },
  // Enhanced Security fields
  "nonce": "RCC4CF4B-7DDA-490A-9FC7-MAMBGHKLD791",
  "timestamp": "1748633259",
  "certificate_token": "4N8ZLGH46S0N8R3CDXCGP45PYD",
  "signature": "bCKrDEpIYcBothNwl5bhMsdQHcJJlbymhkJHw3vpmTZAgRhOxOsBCV6lBe0ZlrlmVmhIGFO7Gy3h/f0SnWwfAVwEEvgFpazAOrbaWaShHpdcZ//Zag3gypn3GCcFuEqsqDmFLpJHzuSrdhcVD1w3HMlC6Hq7oq4NHz27HhZB9u/jCTRzCa3GfMoDQdGlwhZESBz58bLOpVk1TlT9oznbymhkJHw3+vpmTZAgRhOxOsBCV6lBe0ZlrlmVmhvYUAgGbCTYoldrwJahEDihf2COC8+PiyI7bjdJSBwnoGOikV3bi31bSdT6od6vzHdBe7EP9pMTLAj6W/LLbPLYRID0JBKlGwjqKfWVAvjZBMMWhSWNGmtedr0/TdVVFmnErKNfvbI+N9ppCScjK/Qbi31bSdT6od6vzHdBe7EP9pMTLAj6W/LLbPLYRID0JBKlGwjqKfWVAvjZBMMWhSWgNFQp2Rx2836KPp9pMP3z6yCCkN834V2csosGC3yFUirg+qRFSlYcE/KuWDYavYYSZK86b+yLyWFp4krlZR"
  
} 
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 return 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"
    }
  }
}

⚠️Note

CORS

⚠️
Note