Search…
Credit Cards
The Credit Cards payment method is a fast and secure shopping experience where the consumer can purchase goods or services on credit.
The Credit Card payment method supports the following credit cards: American Express, Diners, Discover, JCB, Maestro, MasterCard, Union Pay, and Visa
You can find an example of integration here.

Configuring Credit Card payments for DigitalRiver.js

Create a Credit Card payment method for your app or website in three easy steps:

Step 1: Build a Credit Card source request object

Build a Credit Card Source Request object. The Credit Card Source Request object requires the following fields.
Field
Value
type
creditCard
sessionId
The payment session identifier.
owner

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.
1
var options = {
2
style: {
3
base: {
4
color: "#fff",
5
fontFamily: "Arial, Helvetica, sans-serif",
6
fontSize: "16px",
7
}
8
}
9
}
10
11
//Create your elements
12
var cardNumber = digitalriver.createElement('cardnumber', options);
13
var cardExpiration = digitalriver.createElement("cardexpiration", options);
14
var cardCVV = digitalriver.createElement("cardcvv", options);
15
16
//Place the created elements on the page.
17
cardNumber.mount('card-number');
18
cardExpiration.mount('card-expiration');
19
cardCVV.mount('card-cvv');
Copied!

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.
1
var payload = {
2
"type": "creditCard",
3
"sessionId": "69a47e2c-f8b3-4173-9c0d-40332abcaf98",
4
"owner": {
5
firstName: "John",
6
lastName: "Doe",
7
8
phoneNumber: "000-000-0000",
9
address: {
10
line1: "10380 Bren Road West",
11
line2: "Suite 123",
12
city: "Minnetonka",
13
state: "MN",
14
postalCode: "55343",
15
country: "US"
16
}
17
}
18
}
19
20
digitalriver.createSource(cardCVV,payload).then(function(result) {
21
if(result.error) {
22
//handle errors
23
} else {
24
var source = result.source;
25
//send source to back end
26
sendToBackend(source);
27
}
28
});
Copied!

Credit Card source example

1
{
2
"clientId": "gc",
3
"channelId": "drdod15",
4
"liveMode": false,
5
"id": "b9914aea-d045-4160-8bd9-12277ee333b1",
6
"sessionId": "69a47e2c-f8b3-4173-9c0d-40332abcaf98",
7
"clientSecret": "b9914aea-d045-4160-8bd9-12277ee333b1_a2214aea-d045-4160-8bd9-12277ee333b1",
8
"type": "creditCard",
9
"reusable": false,
10
"owner": {
11
"firstName": "Destany",
12
"lastName": "Hackett",
13
"email": "[email protected]",
14
"phoneNumber": "000-000-0000",
15
"address": {
16
"line1": "1283 Cummings Squares",
17
"line2": "Suite 917",
18
"city": "Russelview",
19
"state": "CO",
20
"country": "US",
21
"postalCode": "85501-4084"
22
}
23
},
24
"state": "chargeable",
25
"creationIp": "209.87.178.4",
26
"createdTime": "2019-05-22T01:41:59.241Z",
27
"updatedTime": "2019-05-22T01:41:59.241Z",
28
"flow": "standard",
29
"creditCard": {
30
"brand": "Visa",
31
"expirationMonth": 2,
32
"expirationYear": 2022,
33
"lastFourDigits": "1111",
34
"paymentIdentifier": "13159976250000000000000500658101"
35
}
36
}
Copied!

Step 3: Use the authorized source

Once authorized, you can use the source by attaching it to a cart or attaching it to a shopper.

Option 1: Attach the source to a cart

POST /v1/shoppers/me/carts/active/apply-payment-method
1
{
2
"paymentMethod": {
3
"sourceId": "e7ba0595-059c-460c-bad8-2812123b9313"
4
}
5
}
Copied!

Option 2: Attach the source to a shopper

POST /v1/shoppers/me/payment-options
1
{
2
"paymentOption": {
3
"nickName": "My Token",
4
"isDefault": "true",
5
"sourceId": "61033d62-c0f4-4a7e-b844-07daf26ba84e"
6
}
7
}
Copied!

Supported markets

For information on supported markets and currencies for Drop-in and DigitalRiver.js, go to:
Last modified 4mo ago