Javascript API
There are a variety of ways to send payment data to Spreedly. We recommend the iFrame or Express to incur minimal PCI scope.
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 an authenticated call.
Since methods shown in this guide are unauthenticated, a separate authenticated call from a secure environment is required to retain each payment method for future use.
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"
}
}
}
}
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"
}
}
}
Updated 5 months ago