Welcome to the Digital River Drop-in Builder! Before you begin, you may want to:
When building your store, you will want to include the following JavaScript and CSS references on the pages where you want it to appear (for example, the Checkout or My Account page). If you'd like to customize the styles, simply override the Drop-in CSS file (DigitalRiver.css) with your own.
<script type="text/javascript" src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>
<link rel="stylesheet" href="https://js.digitalriverws.com/v1/css/DigitalRiver.css" type="text/css"/>
Initialize the DigitalRiver.js library with your public API key and any optional parameters. Updating your configuration options will change what this code block displays. Please reference the Drop-in integration guide for more details.
let digitalriver = new DigitalRiver("YOUR_PUBLIC_API_KEY", {
"locale": "en-US"
});
let digitalriverpayments = new DigitalRiver("##APIKEY##", {
"locale": "##LOCALE##"
});
let configuration = ##CONFIGURATION##,
onSuccess: function(data) {},
onError: function(data) {},
onReady: function(data) {},
onCancel: function(data) {}
}
let dropin = digitalriverpayments.createDropin(configuration);
dropin.mount("drop-in");
Create a container element for the Drop-in and place it on the page where you want it to appear within your experience.
<div id="drop-in"></div>
Congratulations! You have successfully created a Checkout session with your selected products and user information. Now it’s time to add payment details!
Guidelines and Best Practices - Tax / Fee Considerations
Since you decided to create a user, we will take the opporunity now to create a new customer object so we can attach the customerId to the checkout session. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key.
POST https://api.digitalriver.com/customersBased on the customer information that you submitted, here is the code that would be submitted to create a new customer instance.
Upon successfully creating a customer, we will be using the id value and tying it to the checkout.
We are posting to this endpoint to create a checkout session. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key.
POST https://api.digitalriver.com/checkoutsBehind the scenes, based on the product and customer information you entered up to this point, we created the Payload and sent it as a POST to the https://api.dgitalriver.com/checkouts endpoint for you!
Also, behind the scenes, the tool responded with a Checkout id (id) and Payment Session Id (payment.session.id). When you are building your store, you will want to save these as they will be used to create and accept payments.
Since the customer meets the following conditions
This endpoint is used upload a new create and validate a new tax identifier. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key.
POST https://api.digitalriver.com/tax-identifiersThis is the attached payload based on your billing country and VAT Number.
Upon successful creation/validation of the tax identifier, if the state is anything other than "not_valid", we will move on and attach the identifierId to the checkout and the customer flow.
This endpoint is how we update the existing checkout. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key.
The only thing we need in the payload is the identifier that was created in the previous step.
Here we should receive an update on the checkout object.
If this is a logged in/saved customer session, we should attach the tax identifier to the customer for future use. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key.
Here we should receive an update on the customer object.
Since the customer meets the following conditions
This endpoint is used upload a new file. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key.
https://api.digitalriver.com/filesThe payload identified here is actually not exactly what you are sending. For the file attribute, you will be converting/sending a binary representation of your file.
{
"sourceId": "{{sourceId}}"
}Upon successful upload/creation of a file, we will take the id and use that in the next step.
This endpoint is used to create a file link. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key.
https://api.digitalriver.com/file-links/Based on the file we previously updated and our certificate expiration date, here is the code that would be submitted to create a checkout instance.
{
"sourceId": "{{sourceId}}"
}This is the response from creating a file link.
This endpoint will be used to update our customer object to contain the certificate information. The numbers at the end identify the specific customer. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key.
Here we are attaching the fileId generated from Step 1. The rest of the information is from the Tax Exemption Application form.
{
"attachfileId": "{{attachfileId}}"
}The updated customer object is returned. As you can see, that taxCertificates node has been added.
Technically, tax exemption is calculated when the Checkout is created. Since the checkout object was created before this step, it is still identifying that tax will need to be paid. Theoretically, we could have placed the Tax Exemption application before the checkout creation was initiated. However, since it was placed after the checkout object was created, we can do a simple POST to update/refresh the checkout session. In this case, we are updating it with the same customer id.
This endpoint is used to update an existing checkout. The string at the end identifies the checkout ID. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key.
Here we are simply identifying the same customer id that was already loaded.
{
"updatecheckoutId": "{{updatecheckoutId}}"
}Upon successfully updating the checkout, you can see that totalTax value should now indicate 0.
Below is the response from your Drop-in submission.
From this response data, we will grab the source.id (id) value and add it to our checkout.
Since the user has selected to save the payment information, we see that our drop-in payment response (source) has both readyForStorage and supportsStorage values set to true. As a result, we will take our source.id and assign it to our logged in customer
This is the endpoint we will use to assign our new source to the logged in customer. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key. For more information, reference the Digital River API Reference Guide.
Lorem Ipsum dolor....
This endpoint will attach the returned source to the existing checkout session. The checkoutId is used in the POST URL. All Digital River API requests should be happening from server side calls containing a Bearer Authorization with your Secret Key. For more information, reference the Digital River API Reference Guide.
Here we specify what the sourceId value is.
{
"sourceId": "{{sourceId}}"
}The updated checkout object is returned to us.
CONGRATULATIONS! You have successfully completed an order! Look at the Response message and be prepared to capture the following information so it can be displayed on the final/Order Confirmation or Thank You page and email.
API Endpoint
POST https://api.digitalriver.com/ordersPayload included in the POST
{
"checkoutId": "{{checkoutId}}"
}JSON response
Payment methods displayed for Drop-in are reflective of those set up for your test key and Drop-in configuration. However, these methods will not function as part of this test tool. To proceed with entering Credit Card info, click OK.
If you are using a test key/account, you can using the following credit card numbers. Refer to testing scenarios.
| Number | Card Type |
|---|---|
| 4444222233331111 | Visa |
| 5466160000000008 | MasterCard |
| 6011987698769876 | Discover |
| 343456789012341 | American Express |
Payment methods displayed on the Drop-in modal are reflective of those set up for your test key and Drop-in configuration. However, these methods will not function as part of this test tool. To proceed with enteringCredit Card info, click OK.
If you are using a test key/account, you can using the following credit card numbers:
| Number | Card Type |
|---|---|
| 4444222233331111 | Visa |
| 5466160000000008 | MasterCard |
| 6011987698769876 | Discover |
| 343456789012341 | American Express |