Elements integration guide
Create a payment form using DigitalRiver.js.
To populate the fields in this example, click Populate Sample Data In Form. Then enter
4444222233331111 in the Credit Card field, 10/23 in the Expiration field, and 123 in the CVV field, and click Create Credit Card Source.Integrate the DigitalRiver.js into your app or website in four easy steps:
To use DigitalRiver.js as part of your experience, you must include the library and your API key. The key shown in the following example is your public API key. The DigitalRiver.js
createSource() and createElement() methods use the var that you assign.HTML
<script src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>
//Set Your API Key and Start DigitalRiver.js
var digitalriver = new DigitalRiver('YOUR_PUBLIC_API_KEY');
DigitalRiver.js provides and hosts HTML elements that you can place in your payments form to securely collect credit card details. You can seamlessly integrate these elements into an outside-hosted experience.
HTML
<form id="payment-form">
<div class="row">
<label for="card-number">Credit Card</label>
<div id="card-number" class="field"></div>
<label for="card-expiration">Credit Card Expiration</label>
<div id="card-expiration" class="field"></div>
<label for="card-security-code">Credit Card Security Code</label>
<div id="card-security-code" class="field"></div>
<div id="errors"></div>
</div>
</form>
HTML
var options = {
style: {
base: {
color: "#fff",
fontFamily: "Arial, Helvetica, sans-serif",
fontSize: "16px",
}
}
}
//Create your Card Number element
var cardNumber = digitalriver.createElement('cardnumber', options);
//Place the Card Number element within the container created above.
cardNumber.mount('card-number');
Follow the same pattern for additional credit card fields.
HTML
//Create your Card Expiration element
var cardExpiration = digitalriver.createElement('cardexpiration', options);
//Place the Card Expiration element within the container created above.
cardExpiration.mount('card-expiration');
//Create your Card Security Code element
var cardSecurityCode = digitalriver.createElement('cardcvv', options);
//Place the Card Security Code element within the container created above.
cardSecurityCode.mount('card-security-code');
Digital River securely transmits credit card details captured by the DigitalRiver.js for tokenization. You can use these payment sources in downstream API calls to place orders or save credit cards for later purchasing.
Create an event handler that will interact with the DigitalRiver.js library on submit and then create a payment source. Use the
createSource() method to tokenize the customer's details and payment information.Prerequisite: To create a Payment Source for a credit card, you must either know or capture the billing address information for the entered credit card. The
createSource method submits this information and uses it to create a payment source.HTML
// Create a token or display an error when the form is submitted.
var paymentForm = document.getElementById('payment-form');
paymentForm.addEventListener('submit', function(event) {
event.preventDefault();
var payload = {
"type": "creditCard",
"owner": {
firstName: document.getElementById('firstName').value,
lastName: document.getElementById('lastName').value,
email: document.getElementById('email').value,
address: {
line1: document.getElementById('address').value,
line2: document.getElementById('address2').value,
city: document.getElementById('city').value,
state: document.getElementById('state').value,
postalCode: document.getElementById('zip').value,
country: document.getElementById('country').value
}
}
}
digitalriver.createSource(cardNumber,payload).then(function(result) {
if(result.error) {
//Something went wrong, display the error message to the customer
handleErrors(result.error.message);
} else {
//Success! You can now send the token to your server for use in downstream API calls.
sendToMyServer(result.source);
}
});
});
Last modified 10mo ago