// DIGITAL RIVER Version 2.0.0
let checkoutUpdated = false
const digitalRiverPaymentGroupClass = '.DigitalRiverPaymentGroup'
const digitalRiverPaymentGroupButtonID =
'payment-group-DigitalRiverPaymentGroup'
const digitalRiverPublicKey = 'pk_test_1234567890' // NOTE! Enter your Digital River public API key here
const paymentErrorTitle = 'Unable to check out with selected payment method.'
const paymentErrorDescription =
'Please try a different payment method and try again.'
const loginMessage = 'Please log in to continue payment.'
const loginButtonText = 'LOG IN'
const addressErrorTitle = 'Incomplete shipping address detected.'
const addressErrorDescription =
'Please check your shipping information and try again.'
const genericErrorTitle = 'Digital River checkout encountered an error.'
const genericErrorDescription =
'Please check your shipping information and try again.'
let digitalRiverCompliance
async function getCountryCode(country) {
__RUNTIME__.rootPath || ``
}/_v/api/digital-river/checkout/country-code/${country}`
function loadCompliance(orderForm) {
const locale = orderForm && orderForm.clientPreferencesData && orderForm.clientPreferencesData.locale;
const complianceOptions = {
if ($('#compliance').length == 0) {
$('.container-main').append('<div id="compliance"></div>')
digitalRiverCompliance = digitalriver.createElement('compliance', complianceOptions);
digitalRiverCompliance.mount('compliance');
digitalRiverCompliance.update(complianceOptions);
function renderErrorMessage(title, body, append = false) {
$(digitalRiverPaymentGroupClass).html(
`<div><div class='DR-card'><div class='DR-collapse DR-show'><h5 class='DR-error-message'>${title}</h5><div><p>${body}</p></div></div></div></div>`
$('#VTEX-DR-error').remove()
$('.DR-pay-button').after(
`<div id='VTEX-DR-error'><h5 class="DR-error-message">${title}</h5><div><p>${body}</p></div></div>`
async function updateOrderForm(method, checkoutId) {
const orderFormID = vtexjs.checkout.orderFormId
url: `${window.location.origin}${
__RUNTIME__.rootPath || ``
}/api/checkout/pub/orderForm/${orderFormID}/customData/digital-river/checkoutId`,
data: { value: checkoutId },
vtexjs.checkout.getOrderForm().done((orderForm) => {
const { clientPreferencesData } = orderForm
if (!clientPreferencesData) return
return vtexjs.checkout.sendAttachment(
function showBuyNowButton() {
$('.payment-submit-wrap').show()
function hideBuyNowButton() {
$('.payment-submit-wrap').hide()
function clickBuyNowButton() {
$('#payment-data-submit').click()
function loadDigitalRiverScript() {
const e = document.createElement('script')
;(e.type = 'text/javascript'),
(e.src = 'https://js.digitalriver.com/v1/DigitalRiver.js')
const [t] = document.getElementsByTagName('script')
t.parentNode.insertBefore(e, t)
const f = document.createElement('link')
(f.href = 'https://js.digitalriverws.com/v1/css/DigitalRiver.css')
const [u] = document.getElementsByTagName('link')
u.parentNode.insertBefore(f, u)
function loadStoredCards(checkoutId) {
fetch(`${__RUNTIME__.rootPath || ``}/_v/api/digital-river/checkout/sources?v=${new Date().getTime()}`)
.then(async (response) => {
if (response.customer && response.customer.sources) {
var sources = response.customer.sources
if (sources.length > 0) {
'<div class="stored-credit-cards-title" style="margin-bottom: 16px;"><span class="DR-payment-method-name DR-payment-method-name-with-image" style="color: rgba(0,0,0,.75); font-size: 1rem; font-weight: 400; line-height: 20px; margin: 0px;">Saved Cards</span></div>'
for (var i = 0; i < sources.length; i++) {
'<input name="DR-stored-cards" type="radio" id="' +
'<label style="display: inline-block; vertical-align: sub; margin-bottom: 8px; margin-left: 4px; font-size: 0.875rem" for="' +
sources[i].creditCard.brand +
sources[i].creditCard.lastFourDigits +
('0' + sources[i].creditCard.expirationMonth).slice(-2) +
sources[i].creditCard.expirationYear +
'<div class="stored-credit-cards" style="margin-top: 16px;"><button id="submit-stored-creditCard" style="background-color: #1264a3; color: #FFF; height: 56px; border-radius: .25rem; text-align: center; border-top: none!important; border: none; font-weight: 400; padding: 1rem; width: 250px; margin-bottom: 24px;">BUY NOW WITH SAVED CARD</button></div>'
'<div class="DR-stored-cards">' + radiosHtmls + '</div>'
$('#submit-stored-creditCard').click(function () {
var sourceId = $('input[name=DR-stored-cards]:checked').attr('id')
__RUNTIME__.rootPath || ``
}/_v/api/digital-river/checkout/update`,
return rawResponse.json()
$('#' + sources[0].id).click()
function loadDigitalRiver(orderForm) {
const locale = orderForm && orderForm.clientPreferencesData && orderForm.clientPreferencesData.locale
digitalriver = new DigitalRiver(digitalRiverPublicKey, {
locale: locale ?? 'en-US',
async function initDigitalRiver(orderForm) {
$('#drop-in-spinner').length ||
($('#drop-in').length && $('#drop-in').html().length)
$(digitalRiverPaymentGroupClass).html(
`<div id='drop-in-spinner'><i class="icon-spinner icon-spin"></i></div>`
$(digitalRiverPaymentGroupClass).append(`<div id='drop-in'></div>`)
if (!orderForm.canEditData) {
$(digitalRiverPaymentGroupClass).html(
`<div><div class='DR-card'><div class='DR-collapse DR-show'><h5 class='DR-error-message'>${loginMessage}</h5><div><a style='cursor: pointer;' onClick='window.vtexid.start()' class='DR-button-text'>${loginButtonText}</a></div></div></div></div>`
fetch(`${__RUNTIME__.rootPath || ``}/_v/api/digital-river/checkout/create`, {
body: JSON.stringify({ orderFormId: orderForm.orderFormId, taxIdPayload: { // NOTE: The taxIdPayload field is optional
.then(async (response) => {
const { checkoutId = null, paymentSessionId = null } = response
if (!checkoutId || !paymentSessionId) {
renderErrorMessage(genericErrorTitle, genericErrorDescription, false)
await updateOrderForm('PUT', checkoutId)
const country = await getCountryCode(
orderForm.shippingData.address.country
sessionId: paymentSessionId,
showComplianceSection: false,
showSavePaymentAgreement: true,
showTermsOfSaleDisclosure: true,
firstName: orderForm.clientProfileData.firstName,
lastName: orderForm.clientProfileData.lastName,
email: orderForm.clientProfileData.email,
phoneNumber: orderForm.clientProfileData.phone,
orderForm.shippingData.address.number
? `${orderForm.shippingData.address.number} `
}${orderForm.shippingData.address.street}`,
line2: orderForm.shippingData.address.complement,
city: orderForm.shippingData.address.city,
state: orderForm.shippingData.address.state,
postalCode: orderForm.shippingData.address.postalCode,
__RUNTIME__.rootPath || ``
}/_v/api/digital-river/checkout/update`,
sourceId: data.source.id,
readyForStorage: data.readyForStorage,
return rawResponse.json()
renderErrorMessage(paymentErrorTitle, paymentErrorDescription, true)
loadStoredCards(checkoutId)
const dropin = digitalriver.createDropin(configuration)
$('#drop-in-spinner').remove();
$('#drop-in').children().remove();
$(document).ready(function () {
loadDigitalRiverScript();
if (~window.location.hash.indexOf('#/payment')) {
$('.payment-group-item.active').attr('id') ===
digitalRiverPaymentGroupButtonID
vtexjs.checkout.getOrderForm().done(function (orderForm) {
loadDigitalRiver(orderForm);
initDigitalRiver(orderForm)
$(window).on('orderFormUpdated.vtex', function (evt, orderForm) {
loadDigitalRiver(orderForm);
loadCompliance(orderForm);
~window.location.hash.indexOf('#/payment') &&
$('.payment-group-item.active').attr('id') ===
digitalRiverPaymentGroupButtonID
!orderForm.shippingData.address ||
!orderForm.shippingData.address.street ||
!orderForm.shippingData.address.city ||
!orderForm.shippingData.address.state ||
!orderForm.shippingData.address.postalCode ||
!orderForm.shippingData.address.country
initDigitalRiver(orderForm)