Configuring Credit Cards
Learn how to configure Credit Cards for DigitalRiver.js with Elements.
If you're using DigitalRiver.js with Elements, you can create a Credit Card payment method for your app or website in three easy steps:
Step 1: Build a Credit Card source request object
The Credit Card Source Request object requires the following fields.
Field
Value
Step 2: Create a Credit Card source using DigitalRiver.js
Create the elements
Use the DigitalRiver.js library to create and mount elements to the HTML container.
var options = {
style: {
base: {
color: "#fff",
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "16px",
}
}
}
//Create your elements
var cardNumber = digitalriver.createElement('cardnumber', options);
var cardExpiration = digitalriver.createElement("cardexpiration", options);
var cardCVV = digitalriver.createElement("cardcvv", options);
//Place the created elements on the page.
cardNumber.mount('card-number');
cardExpiration.mount('card-expiration');
cardCVV.mount('card-cvv');
Create the source
To create a credit card payment source, you must reference the created element and the supplemental data in your createSource request. DigitalRiver.js will retrieve and assemble the request on your behalf.
var payload = {
"type": "creditCard",
"sessionId": "69a47e2c-f8b3-4173-9c0d-40332abcaf98",
"owner": {
firstName: "John",
lastName: "Doe",
email: "[email protected]",
phoneNumber: "000-000-0000",
address: {
line1: "10380 Bren Road West",
line2: "Suite 123",
city: "Minnetonka",
state: "MN",
postalCode: "55343",
country: "US"
}
}
}
digitalriver.createSource(cardCVV,payload).then(function(result) {
if(result.error) {
//handle errors
} else {
var source = result.source;
//send source to back end
sendToBackend(source);
}
});
Credit Card source example
{
"clientId": "gc",
"channelId": "drdod15",
"liveMode": false,
"id": "b9914aea-d045-4160-8bd9-12277ee333b1",
"sessionId": "69a47e2c-f8b3-4173-9c0d-40332abcaf98",
"clientSecret": "b9914aea-d045-4160-8bd9-12277ee333b1_a2214aea-d045-4160-8bd9-12277ee333b1",
"type": "creditCard",
"reusable": false,
"owner": {
"firstName": "Destany",
"lastName": "Hackett",
"email": "[email protected]",
"phoneNumber": "000-000-0000",
"address": {
"line1": "1283 Cummings Squares",
"line2": "Suite 917",
"city": "Russelview",
"state": "CO",
"country": "US",
"postalCode": "85501-4084"
}
},
"state": "chargeable",
"creationIp": "209.87.178.4",
"createdTime": "2019-05-22T01:41:59.241Z",
"updatedTime": "2019-05-22T01:41:59.241Z",
"flow": "standard",
"creditCard": {
"brand": "Visa",
"expirationMonth": 2,
"expirationYear": 2022,
"lastFourDigits": "1111",
"paymentIdentifier": "13159976250000000000000500658101"
}
}
Step 3: Use the authorized source
Once authorized, you can use the source by attaching it to a checkout or a customer for multiple uses.
Option 1. Attach the source to a checkout
{
"customerId": "5774321008",
"sourceId": "src_a78cfeae-f7ae-4719-8e1c-d05ec04e4d37"
}
Option 2. Attach the source to a customer
{
"paymentOption": {
"nickName": "My Token",
"isDefault": "true",
"sourceId": "61033d62-c0f4-4a7e-b844-07daf26ba84e"
}
}
Testing Credit Cards
See Testing standard payment methods for testing instructions.
Last updated