Javascript API

🚧
Deprecation notice: non-secure API tokenization
Non-secure tokenization through the API will be deprecated on October 31, 2026, with end of life on December 31, 2028. This affects requests that add a payment method using an environment key without the secure tokenization parameters (nonce, timestamp, certificate_token, and signature).

To stay supported, include these parameters on every request, or tokenize with secure iFrame or the Checkout SDK.

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"
    }
  }
}