Extending the Salesforce B2C LINK Cartridge
Extend the Salesforce B2C LINK Cartridge.

Custom code

Important: Follow the instructions below only when you cannot use the cartridge directly, or you need to resolve conflicts with other cartridges on your project. Otherwise, you must compile the client-side scripts and styles, upload the cartridge, and add it to your storefront cartridge path. Cartridge int_digitalriver_sfra already contains all templates and script changes described in Custom code.

SFRA version 5.3.0 templates

We provide the following templates and describe how to change them.

Add payment

The add payment (addPayment.isml) template allows you to add payment cards to the customer's account. Modify the template to add Drop-in functionality (DigitalRiver.js), Drop-in styles (DigitalRiver.css), and place Drop-in on the account page.
Template path: cartridge\templates\default\account\payment\addPayment.isml
Add this Digital River script to Drop-in functionality on the page and apply the changes to Drop-in styles.
1
<script src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>
2
<link rel="stylesheet" href="https://js.digitalriverws.com/v1/css/DigitalRiver.css" type="text/css"/>
Copied!
And apply the changes to Drop-in styles.
1
assets.addCss('/css/digitalRiver.css');
Copied!
Put the following condition inside the card-body div.
1
<iscomment> Include Digital River Drop-in </iscomment>
2
<isset name="useDigitalRiverDropIn" value="${require('dw/system/Site').getCurrent().getCustomPreferenceValue('drUseDropInFeature')}" scope="page" />
3
<isif condition="${useDigitalRiverDropIn}">
4
<isinclude template="account/payment/dropinForm"/>
5
<isinclude url="${URLUtils.url('DigitalRiver-DisplayCompliance', 'complianceId', 'compliancePayment')}" />
6
<iselse/>
7
<iscomment> Default Payment form </iscomment>
8
<isinclude template="account/payment/paymentForm"/>
9
<iscomment> Default Payment form </iscomment>
10
<isinclude template="account/payment/paymentForm"/>
11
</isif>
Copied!

Dashboard profile cards

The dashboard profile cards (dashboardProfileCards.isml) template contains the script required to add a Digital River Tax Certificates section to your Profile Dashboard page. The following image shows the out-of-the-box (OOTB) Dashboard Profile Dashboard page for Salesforce B2C Link Cartridge.
When you apply the dashboard profile cards template, it adds Tax Certificates.
Template: cartridge\templates\default\account\dashboardProfileCards.isml
Add the Digital River tax certificate section on the page.
1
<!---Digital River Tax Certificates--->
2
<isinclude template="digitalriver/account/drTaxCertificateCard"/>
Copied!

Cart totals

The cart totals (cartTotals.isml) template allows you to include the Digital River Order Summary on your Checkout page.
Template path: cartridge\templates\default\cart\cartTotals.isml
Include the Digital River Taxations section in the cart totals template after the discount section.
1
<!-- Digital River Taxations -->
2
<isif condition="${require('dw/system/Site').getCurrent().getCustomPreferenceValue('drUseDropInFeature')}">
3
<isif condition="${pdict.totals.isImporterOfRecordTax || pdict.totals.duty.value !== 0}">
4
<div class="row">
5
<div class="col-8">
6
<p>${Resource.msg('label.order.sales.duty','digitalriver', null)}</p>
7
</div>
8
<div class="col-4">
9
<p class="text-right duty-total">${pdict.totals.duty.formatted}</p>
10
</div>
11
</div>
12
</isif>
13
<isif condition="${pdict.totals.isImporterOfRecordTax || pdict.totals.importerTax.value !== 0}">
14
<div class="row">
15
<div class="col-8">
16
<p>${Resource.msg('label.order.sales.importerTax','digitalriver', null)}</p>
17
</div>
18
<div class="col-4">
19
<p class="text-right importerTax-total">${pdict.totals.importerTax.formatted}</p>
20
</div>
21
</div>
22
</isif>
23
<isif condition="${pdict.totals.isImporterOfRecordTax || pdict.totals.totalFees.value !== 0}">
24
<div class="row">
25
<div class="col-8">
26
<p>${Resource.msg('label.order.sales.totalFees','digitalriver', null)}</p>
27
</div>
28
<div class="col-4">
29
<p class="text-right totalFees-total">${pdict.totals.totalFees.formatted}</p>
30
</div>
31
</div>
32
</isif>
33
</isif>
Copied!

Payment options summary

The payment options summary (paymentOptionsSummary.isml) template allows you to extend the payment condition with the DIGITAL_RIVER_DROPIN payment method on the Checkout page.
Template path: cartridge\templates\default\checkout\billing\paymentOptions\paymentOptionsSummary.isml
Extend the condition with the ‘DIGITAL_RIVER_DROPIN’ payment method.
1
<iselseif condition="${payment.paymentMethod === 'DIGITAL_RIVER_DROPIN'}" />
2
<isinclude template="checkout/billing/paymentOptions/dropInSummary" />
Copied!

Billing

The billing (billing.isml) template allows you to add accordion components to the Billing page. The following image shows the out-of-the-box (OOTB) Payment section of the Checkout page for Salesforce B2C Link Cartridge.
When you apply the dashboard profile cards template, it adds the ability to choose whether the purchase is tax-exempt and the payment method.
Template path: cartridge\templates\default\checkout\billing\billing.isml
There were changes to paymentOptions.isml between version 5.3.0 AND 6.0.
Add the accordion components to the billing page.
1
<iscomment> DigitalRiver accordion section </iscomment>
2
<isif condition="${pdict.digitalRiverUseDropInFeature}">
3
<div class="accordion" id="accordionBilling">
4
<div class="dr-accordion-card">
5
<div class="dr-accordion-card-header" id="headingBilling">
6
<h2 class="mb-0">
7
<span class="btn btn-link dr-accordion-btn" data-toggle="collapse" data-target="#collapse-billing" aria-expanded="true" aria-controls="collapse-billing">
8
${Resource.msg('button.billing', 'digitalriver', null)}
9
</span>
10
</h2>
11
</div>
12
<div id="collapse-billing" class="collapse show" aria-labelledby="headingBilling" data-parent="#accordionBilling">
13
<div class="dr-accordion-card-body">
14
</isif>
Copied!
1
<isinclude template="digitalriver/checkout/billing/drTaxCertificatesSection" />
2
<iscomment> DigitalRiver accordion section </iscomment>
3
<isif condition="${pdict.digitalRiverUseDropInFeature}">
4
</div></div></div>
5
<iscomment>DigitalRiver tax identifier</iscomment>
6
<isif condition="${pdict.digitalRiverUseTaxIdentifier}">
7
<div class="dr-accordion-card">
8
<div class="dr-accordion-card-header" id="headingTaxIdentifier">
9
<h2 class="mb-0">
10
<span class="btn btn-link dr-accordion-btn" data-toggle="collapse" data-target="#collapse-taxidentifier" aria-expanded="false" aria-controls="collapse-taxidentifier">
11
${Resource.msg('button.taxidentifier', 'digitalriver', null)}
12
</span>
13
</h2>
14
</div>
15
<div id="collapse-taxidentifier" class="collapse" aria-labelledby="headingTaxIdentifier" data-parent="#accordionBilling">
16
<div class="dr-accordion-card-body">
17
<div id="tax-id" data-config-url="${URLUtils.url('DigitalRiver-TaxIdentifierConfig')}"></div>
18
<button class="btn btn-block btn-primary dr-btn-taxidentifier-submit" type="button" data-apply-url="${URLUtils.url('DigitalRiver-TaxIdentifierApply')}">
19
${Resource.msg('button.submit.taxidentifier', 'digitalriver', null)}
20
</button>
21
<div id="dr-list-of-applied-identifiers" data-delete-url="${URLUtils.url('DigitalRiver-TaxIdentifierDelete')}"></div>
22
</div>
23
</div>
24
</div>
25
</isif>
26
<iscomment>End of DigitalRiver tax identifier</iscomment>
27
<div class="dr-accordion-card">
28
<div class="dr-accordion-card-header" id="headingPayment">
29
<h2 class="mb-0">
30
<span class="btn btn-link dr-accordion-btn" data-toggle="collapse" data-target="#collapse-payment" aria-expanded="false" aria-controls="collapse-payment">
31
${Resource.msg('button.payment', 'digitalriver', null)}
32
</span>
33
</h2>
34
</div>
35
<div id="collapse-payment" class="collapse" aria-labelledby="headingPayment" data-parent="#accordionBilling">
36
<div class="dr-accordion-card-body">
37
</isif>
Copied!
Include the Digital River payment options template.
1
<isif condition="${pdict.digitalRiverUseDropInFeature}">
2
<isinclude template="digitalriver/checkout/billing/paymentOptions" />
3
<iselse/>
4
<isinclude template="checkout/billing/paymentOptions" />
5
</isif>
Copied!
Add the accordion components to the Billing page
1
<iscomment> Digital River accordion section </iscomment>
2
<isif condition="${pdict.digitalRiverUseDropInFeature}">
3
</div></div></div></div>
4
</isif>
5
Include Add Tax certificate modal window component
6
<isinclude template="digitalriver/checkout/billing/drTaxCertificateModal" />
Copied!

Stored payment instruments

The stored payment instruments (storedPaymentInstruments.isml) template allows you to display the stored payment instruments on the Billing page a list of saved payment cards in the customer's account.
Template path: cartridge\templates\default\checkout\billing\storedPaymentInstruments.isml
At the beginning of the file add the following code:
1
<isset name="isDRDropInEnabled" value="${require('dw/system/Site').getCurrent().getCustomPreferenceValue('drUseDropInFeature')}" scope="page" />
2
<div class="invalid-feedback" id="savedPaymentNotSelectedMessage">${Resource.msg('error.select.stored.card', 'digitalriver', null)}</div>
Copied!
Extend the card-image class condition as follows:
1
<img class="card-image" src="${paymentInstrument.cardTypeImage.src}" alt="${paymentInstrument.cardTypeImage.alt}">
Copied!
Also, wrap the security-code-input div with the following condition:
1
<isif condition="${!isDRDropInEnabled}"> <iscomment> Digital River - if enabled no cvv needed thus pictures are always shown instead of input </iscomment>
2
<div class="security-code-input ${loopState.first ? '' : 'checkout-hidden'}">
3
<label class="form-control-label" for="saved-payment-security-code">${Resource.msg('label.credit.card-security.code','checkout',null)}</label>
4
… security-code-unput goes here
5
</div>
6
</isif>
Copied!

Confirmation

We modified the standard confirmation (confirmation.isml) template for the B2C LINK Cartridge to include the Digital River compliance statement.
The customer should agree to the Terms of Sale and the Privacy Policy of Digital River and set the check box to complete the order. For more information on the Terms of Sale and the Privacy Policy of Digital River, visit the Digital River Legal Documentation website.
Compliance links are required to be displayed several different places throughout the storefront. The out-of-the-box (OOTB) cartridge displays the compliance links in all required locations. Consult your Digital River Project Manager before making modifications for your storefront. For more detailed information on the purpose of the compliance links, visit Compliance on the Digital River Legal Documentation website.
Template path: cartridge\templates\default\checkout\confirmation\confirmation.isml
Add the DigitalRiver.js script to the page.
1
<script type="text/javascript" src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>
2
<link rel="stylesheet" href="https://js.digitalriverws.com/v1/css/DigitalRiver.css" type="text/css"/>
Copied!
Add the Digital River compliance section to the page.
1
<div class="row">
2
<div class="${pdict.returningCustomer ? 'col-sm-6 offset-sm-3' : 'col-sm-6 offset-sm-3 offset-md-0 pull-md-6' }">
3
<isinclude template="digitalriver/compliance" />
4
</div>
5
</div>
Copied!

Shipping address

The shipping address (shippingAddress.isml) template allows you to extend the shipping address form with the email address input field. This information appears in the Shipping section on the Checkout page.
Template path : cartridge\templates\default\checkout\shipping\shippingAddress.isml
Extend the shipping address form with the email address input field.
1
<isif condition="${pdict.digitalRiverUseDropInFeature}">
2
<div class="row">
3
<div class="col-sm-12">
4
<div class="form-group
5
<isif condition=${pdict.forms.billingForm.contactInfoFields.email.mandatory === true}>required</isif>
6
${pdict.forms.billingForm.contactInfoFields.email.htmlName}">
7
<label class="form-control-label" for="email">${Resource.msg('field.customer.email','checkout',null)}</label>
8
9
<button type="button" class="info-icon">
10
<span class="icon" aria-hidden="true">i</span>
11
<span class="sr-only">${Resource.msg('button.help.assistive.text','common',null)}</span>
12
<span class="tooltip d-none">
13
${Resource.msg('tooltip.email','creditCard',null)}
14
</span>
15
</button>
16
17
<input type="text" class="form-control email" id="email"
18
value="${pdict.order.orderEmail||''}" <isprint value=${pdict.forms.billingForm.contactInfoFields.email.attributes} encoding="off"/>
19
aria-describedby="emailInvalidMessage" >
20
<div class="invalid-feedback" id="emailInvalidMessage"></div>
21
</div>
22
</div>
23
</div>
24
</isif>
Copied!

Checkout

The checkout (checkout.isml) template adds the Digital River styles, the Drop-in styles, and the check box to confirm agreement with the Terms of Sale and the Privacy Policy of Digital River to the Checkout page when the customer is ready to place an order. The customer should agree to the Terms of Sale and the Privacy Policy of Digital River and set the check box to complete the order.
Template: cartridge\templates\default\checkout\checkout.isml
There were no changes to checkout.isml between version 5.3.0 and 6.0.0.
Add the Digital River Drop-in styles.
1
<link rel="stylesheet" href="https://js.digitalriverws.com/v1/css/DigitalRiver.css" type="text/css"/>
Copied!
Include the Digital River styles.
1
assets.addCss('/css/digitalRiver.css');
2
assets.addCss('/css/drAccordion.css');
Copied!
Add the Digital River confirm disclosure checkbox to the checkout page.
1
<isinclude template="digitalriver/confirmDisclosure" />
Copied!
Add a condition that will control the submit payment button display.
1
<isset name="submitPaymentShow" value="${!pdict.digitalRiverUseDropInFeature || (pdict.customer.registeredUser && pdict.customer.customerPaymentInstruments.length) ? '' : 'digitalriver-hide'}" scope="page" />
2
<button class="btn btn-primary btn-block submit-payment ${submitPaymentShow}" type="submit" name="submit" value="submit-payment">
Copied!
Add the Digital River compliance section to the checkout page.
1
<div class="row">
2
<div class="col-12 next-step-button">
3
<div class="mb-sm-3" id="ch">
4
<isinclude url="${URLUtils.url('DigitalRiver-DisplayCompliance', 'complianceId', 'checkoutCompliance')}" />
5
</div>
6
</div>
7
</div>
Copied!

Order total summary

The order total summary (orderTotalSummary.isml) template allows you to add the Digital River Taxations section to your Checkout page.
Template: cartridge\templates\default\checkout\orderTotalSummary.isml
There were no changes to orderTotalSummary.isml between version 5.3.0 and 6.0.0.
Add the Digital River Taxations section.
1
<!--- Digital River Taxations --->
2
<isif condition="${require('dw/system/Site').getCurrent().getCustomPreferenceValue('drUseDropInFeature')}">
3
<div class="row leading-lines duty-item ${!pdict.order.totals.isImporterOfRecordTax && pdict.order.totals.duty.value === 0 ? 'hide-order-discount': ''}">
4
<div class="col-6 start-lines">
5
<p class="order-receipt-label"><span>${Resource.msg('label.order.sales.duty','digitalriver', null)}</span></p>
6
</div>
7
<div class="col-6 end-lines">
8
<p class="text-right"><span class="duty-total">${pdict.order.totals.duty.formatted}</span></p>
9
</div>
10
</div>
11
<div class="row leading-lines importerTax-item ${!pdict.order.totals.isImporterOfRecordTax && pdict.order.totals.importerTax.value === 0 ? 'hide-order-discount': ''}">
12
<div class="col-6 start-lines">
13
<p class="order-receipt-label"><span>${Resource.msg('label.order.sales.importerTax','digitalriver', null)}</span></p>
14
</div>
15
<div class="col-6 end-lines">
16
<p class="text-right"><span class="importerTax-total">${pdict.order.totals.importerTax.formatted}</span></p>
17
</div>
18
</div>
19
<div class="row leading-lines totalFees-item ${!pdict.order.totals.isImporterOfRecordTax && pdict.order.totals.totalFees.value === 0 ? 'hide-order-discount': ''}">
20
<div class="col-6 start-lines">
21
<p class="order-receipt-label"><span>${Resource.msg('label.order.sales.totalFees','digitalriver', null)}</span></p>
22
</div>
23
<div class="col-6 end-lines">
24
<p class="text-right"><span class="totalFees-total">${pdict.order.totals.totalFees.formatted}</span></p>
25
</div>
26
</div>
27
</isif>
Copied!

SFRA version 5.3.0 client scripts

We provide the following client scripts and describe how to change them.
Note: Do not forget to compile client-side scripts after implementing changes in the source code.

Checkout

The checkout (checkout.js) script is loaded on the Checkout page and includes the page frontend event handler. The script loads the base event handler (checkout.js) and additionally loads the Digital River US Tax Certificate handler (stdrCertificate.js) on the shipping stage of the checkout and the Global Tax ID handler (drTaxId.js) on the billing stage of checkout.
Script: cartridge\client\default\js\checkout.js
Include the additional scripts on the checkout page.
1
processInclude(require('./checkout/drDropIn'));
2
processInclude(require('./checkout/drCertificate'));
3
processInclude(require('./checkout/drTaxId'));
Copied!
The checkout script (checkout.js) is loaded on the Checkout page and includes a basic page frontend event handler. The changes introduced by this script extend the base functionality to correctly handle Digital River extensions.
Script path: cartridge\client\default\js\checkout\checkout.js
Add the following line at the beginning of the file.
1
var drHelper = require('./drHelper');
Copied!
Add the retrieve stored card global variable at the beginning of the checkout function.
1
// --- Digital River Retrieve Stored Card ---
2
var drStoredPayment = null;
Copied!
Add the following code to the shipping submit success handler.
1
if (!data.error && data.digitalRiverConfiguration) {
2
drHelper.updateComplianceEntity(data.digitalRiverComplianceOptions.compliance.entity);
3
$('body').trigger('digitalRiver:dropIn', data.digitalRiverConfiguration); // Digital River integration: call dropIn feature after checkoutCreate
4
$('body').trigger('digitalRiver:taxIdentifier', data.digitalRiverTaxIdConfig);
5
if (data.digitalRiverTaxExemptEnable) {
6
$('.us-tax-certificate-block').show();
7
} else {
8
$('.us-tax-certificate-block').hide();
9
}
10
}
Copied!
Add the following code to line 230.
1
drStoredPayment = null; // --- Digital River Retrieve Stored Card ---
Copied!
Extend the code on line 235 as follows:
1
var paymentMethod = $('.payment-information').data('payment-method-id');
2
if (paymentMethod === 'CREDIT_CARD' || paymentMethod === 'DIGITAL_RIVER_DROPIN') { // Extended by Digital River Drop-in integration
Copied!
Add the following code to line 237.
1
if ($('.saved-payment-instrument.selected-payment').length === 0) {
2
$('#savedPaymentNotSelectedMessage').show();
3
$('#collapse-payment').collapse('show');
4
defer.reject();
5
return defer;
6
}
Copied!
Add the following code to line 265.
1
/ --- Digital River Retrieve Stored Card ---
2
drStoredPayment = $savedPaymentInstrument.data('uuid');
Copied!
Extend the code on line 282 as follows:
1
$('#collapse-billing').collapse('show');
Copied!
Extend the code on line 324 as follows:
1
drHelper.renderDRConfirm();
Copied!
Wrap the contents of the placeOrder stage function.
1
// --- Digital River Retrieve Stored Card ---
2
var placeOrder = function (defer) {
3
4
… 'placeOrder' stage content goes here
5
6
}
7
drHelper.retrieveStoredCard(drStoredPayment, defer, placeOrder);
Copied!

Billing

The billing (billing .js) script is loaded into the checkout page and includes a basic frontend event handler for the billing stage. The changes introduced by this script extend the basic functionality for the correct processing of Digital River payment instruments and payment cards stored in the customer's account.
Script path: cartridge\client\default\js\checkout\billing.js
Extend the condition inside the function.
1
if (!$('#dropInContainer').data('enabled')
2
&& billing.payment && billing.payment.selectedPaymentInstruments
3
&& billing.payment.selectedPaymentInstruments.length > 0) {
Copied!
Add the <getCreditCardPaymentInfoHtml> function.
1
/**
2
* Creates html to display payment summary for credit card payment
3
* @param {Object} order current order model
4
* @param {Object} selectedPaymentInstrument selected payment instrument model
5
* @returns {string} html for credit card payment
6
*/
7
function getCreditCardPaymentInfoHtml(order, selectedPaymentInstrument) {
8
return '<span>' + order.resources.cardType + ' '
9
+ selectedPaymentInstrument.type
10
+ '</span><div>'
11
+ selectedPaymentInstrument.maskedCreditCardNumber
12
+ '</div><div><span>'
13
+ order.resources.cardEnding + ' '
14
+ selectedPaymentInstrument.expirationMonth
15
+ '/' + selectedPaymentInstrument.expirationYear
16
+ '</span></div>';
17
}
Copied!
And use it for creating HTML inside the <updatePaymentInformation> function. For switch (selectedPaymentInstrument.paymentType), add the payment information (for example, DIGITAL_RIVER_DROPIN).
Important: The DIGITAL_RIVER_DROPIN payment integration represents not one but multiple payment types such as credit card, PayPal, Wire Transfer, and so on. The Drop-in integration provides the selection of payment types, and the client-side/backend scripts handle it. We designed this cartridge mainly to handle the credit card payment type, though it will also successfully process any other payment type provided by the Drop-in integration. To add any business logic for a specific payment type or provide shoppers with a better customer experience, you can extend Drop-in data handlers.
Make sure you have the necessary data provided by the Payment model.
1
var selectedPaymentInstrument = order.billing.payment.selectedPaymentInstruments[0];
2
if (selectedPaymentInstrument.paymentMethod === 'DIGITAL_RIVER_DROPIN') {
3
switch (selectedPaymentInstrument.paymentType) {
4
case 'creditCard':
5
htmlToAppend += getCreditCardPaymentInfoHtml(order, selectedPaymentInstrument);
6
break;
7
default: // extend switch with new cases or extend default if you want to show extended data for non-card payment types
8
htmlToAppend += '<span>' + selectedPaymentInstrument.paymentType
9
+ '</span>';
10
}
11
} else {
12
htmlToAppend += getCreditCardPaymentInfoHtml(order, selectedPaymentInstrument);
13
}
Copied!
Wrap the <clearCreditCardForm> function content with the following condition.
1
if (!$('#dropInContainer').data('enabled')) {
2
3
… function content goes here
4
5
}
Copied!
Wrap the <handleCreditCardNumber> content with the following condition.
1
if ($('.cardNumber').length > 0) { // if Digital River enabled card form will be replaced with Drop-in functionality
2
cleave.handleCreditCardNumber('.cardNumber', '#cardType');
3
}
Copied!
Add the condition inside the <selectSavedPaymentInstrument>.
1
if (!$('#dropInContainer').data('enabled')) { // Digital River - if enabled no cvv needed thus pictures are always shown instead of input
2
$('.saved-payment-instrument .card-image').removeClass('checkout-hidden');
3
$('.saved-payment-instrument .security-code-input').addClass('checkout-hidden');
4
$('.saved-payment-instrument.selected-payment'
5
+ ' .card-image').addClass('checkout-hidden');
6
$('.saved-payment-instrument.selected-payment '
7
+ '.security-code-input').removeClass('checkout-hidden');
8
}
Copied!
Add the following code in the <addNewPaymentInstrument> function.
1
// Digital River Drop-in section
2
if ($('#dropInContainer').data('enabled')) {
3
$('.drop-in-container').removeClass('checkout-hidden'); // show drop-in form to enter new payment
4
$('.submit-payment').addClass('digitalriver-hide'); // next step will be launched from drop-in button instead
5
}
Copied!
Add the following code in the <cancelNewPayment> function.
1
// Digital River Drop-in section
2
if ($('#dropInContainer').data('enabled')) {
3
$('.submit-payment').removeClass('digitalriver-hide');
4
$('.drop-in-container').addClass('checkout-hidden');
5
}
Copied!

Payment instruments

The default storefront on the Checkout page uses the payment instruments (paymentInstruments.js) script. This JavaScript includes the frontend handler for payment cards. This frontend JavaScript must be completed and compiled before used on the site. When this JavaScript is loaded on the Checkout page, the script loads the base handler (paymentInstruments.js) and additionally loads the handler for the Digital River payment cards (paymentInstrumentsDropIn.js).
Use proccessInclude to extend the default paymentInstruments.js script. Once compiled, the paymentInstrumentsDropIn will extend Checkout page to display the available payment methods. The script contains functions to launch Drop-in, handle errors, and handle submitted payments.
Script path: cartridge\client\default\js\paymentInstruments.js
Add the Drop-in script to the page.
1
processInclude(require('./paymentInstruments/paymentInstrumentsDropIn'));
Copied!

SFRA version 6.0.0 templates

We provide the following templates and describe how to change them.

Add payment

The add payment (addPayment.isml) template allows you to add payment cards to the customer's account. Modify the template to add Drop-in functionality (DigitalRiver.js), Drop-in styles (DigitalRiver.css), and place Drop-in on the account page.
Template: cartridge\templates\default\account\payment\addPayment.isml
Add this Digital River script to Drop-in functionality on the page and apply the changes to Drop-in styles.
1
<script src="https://js.digitalriverws.com/v1/DigitalRiver.js"></script>
2
<link rel="stylesheet" href="https://js.digitalriverws.com/v1/css/DigitalRiver.css" type="text/css"/>
Copied!
And apply the changes to Drop-in styles.
1
assets.addCss('/css/digitalRiver.css');
Copied!
Put the following condition inside the card-body div.
1
<iscomment> Include Digital River Drop-in </iscomment>
2
<isset name="useDigitalRiverDropIn" value="${require('dw/system/Site').getCurrent().getCustomPreferenceValue('drUseDropInFeature')}" scope="page" />
3
<isif condition="${useDigitalRiverDropIn}">
4
<isinclude template="account/payment/dropinForm"/>
5
<isinclude url="${URLUtils.url('DigitalRiver-DisplayCompliance', 'complianceId', 'compliancePayment')}" />
6
<iselse/>
7
<iscomment> Default Payment form </iscomment>
8
<isinclude template="account/payment/paymentForm"/>
9
<iscomment> Default Payment form </iscomment>
10
<isinclude template="account/payment/paymentForm"/>
11
</isif>
Copied!

Dashboard profile cards

The dashboard profile cards (dashboardProfileCards.isml) template contains the script required to add a Digital River Tax Certificates section to your Profile Dashboard page. The following image shows the out-of-the-box (OOTB) Dashboard Profile Dashboard page for Salesforce B2C Link Cartridge.
When you apply the dashboard profile cards template, it adds Tax Certificates.
Template path: cartridge\templates\default\account\dashboardProfileCards.isml
Add the Digital River tax certificate section on the page.
1
<!---Digital River Tax Certificates--->
2
<isinclude template="digitalriver/account/drTaxCertificateCard"/>
Copied!

Cart totals

The cart totals (cartTotals.isml) template allows you to include the Digital River Order Summary section on your Checkout page.
Template: cartridge\templates\default\cart\cartTotals.isml
Include the Digital River Taxations section in the cart totals template after the discount section.
1
<!-- Digital River Taxations -->
2
<isif condition="${require('dw/system/Site').getCurrent().getCustomPreferenceValue('drUseDropInFeature')}">
3
<isif condition="${pdict.totals.isImporterOfRecordTax || pdict.totals.duty.value !== 0}">
4
<div class="row">
5
<div class="col-8">
6
<p>${Resource.msg('label.order.sales.duty','digitalriver', null)}</p>
7
</div>
8
<div class="col-4">
9
<p class="text-right duty-total">${pdict.totals.duty.formatted}</p>
10
</div>
11
</div>
12
</isif>
13
<isif condition="${pdict.totals.isImporterOfRecordTax || pdict.totals.importerTax.value !== 0}">
14
<div class="row">
15
<div class="col-8">
16
<p>${Resource.msg('label.order.sales.importerTax','digitalriver', null)}</p>
17
</div>
18
<div class="col-4">
19
<p class="text-right importerTax-total">${pdict.totals.importerTax.formatted}</p>
20
</div>
21
</div>
22
</isif>
23
<isif condition="${pdict.totals.isImporterOfRecordTax || pdict.totals.totalFees.value !== 0}">
24
<div class="row">
25
<div class="col-8">
26
<p>${Resource.msg('label.order.sales.totalFees','digitalriver', null)}</p>
27
</div>
28
<div class="col-4">
29
<p class="text-right totalFees-total">${pdict.totals.totalFees.formatted}</p>
30
</div>
31
</div>
32
</isif>
33
</isif>
Copied!

Payment options summary

The payment options summary (paymentOptionsSummary.isml) template allows you to extend the payment condition with the DIGITAL_RIVER_DROPIN payment method on the Checkout page.
Template path: cartridge\templates\default\checkout\billing\paymentOptions\paymentOptionsSummary.isml
Extend the condition with the ‘DIGITAL_RIVER_DROPIN’ payment method.
1
<iselseif condition="${payment.paymentMethod === 'DIGITAL_RIVER_DROPIN'}" />
2
<isinclude template="checkout/billing/paymentOptions/dropInSummary" />
Copied!
Important: The DIGITAL_RIVER_DROPIN payment integration represents not one but multiple payment types such as credit card, PayPal, Wire Transfer, and so on. The Drop-in integration provides the selection of payment types, and the client-side/backend scripts handle it. We designed this cartridge mainly to handle the credit card payment type, though it will also successfully process any other payment type provided by the Drop-in integration. To add any business logic for a specific payment type or provide shoppers with a better customer experience, you can extend Drop-in data handlers.

Billing

The billing (billing.isml) template allows you to add accordion components to the Billing page. The following image shows the out-of-the-box (OOTB) Payment section of the Checkout page for Salesforce B2C Link Cartridge.
When you apply the dashboard profile cards template, it adds the ability to choose whether the purchase is tax-exempt and the payment method.
Template path: cartridge\templates\default\checkout\billing\billing.isml
Add the accordion components to the billing page.
1
<iscomment> DigitalRiver accordion section </iscomment>
2
<isif condition="${pdict.digitalRiverUseDropInFeature}">
3
<div class="accordion" id="accordionBilling">
4
<div class="dr-accordion-card">
5
<div class="dr-accordion-card-header" id="headingBilling">
6
<h2 class="mb-0">
7
<span class="btn btn-link dr-accordion-btn" data-toggle="collapse" data-target="#collapse-billing" aria-expanded="true" aria-controls="collapse-billing">
8
${Resource.msg('button.billing', 'digitalriver', null)}
9
</span>
10
</h2>
11
</div>
12
<div id="collapse-billing" class="collapse show" aria-labelledby="headingBilling" data-parent="#accordionBilling">
13
<div class="dr-accordion-card-body">
14
</isif>
Copied!
1
<isinclude template="digitalriver/checkout/billing/drTaxCertificatesSection" />
2
<iscomment> DigitalRiver accordion section </iscomment>
3
<isif condition="${pdict.digitalRiverUseDropInFeature}">
4
</div></div></div>
5
<iscomment>DigitalRiver tax identifier</iscomment>
6
<isif condition="${pdict.digitalRiverUseTaxIdentifier}">
7
<div class="dr-accordion-card">
8
<div class="dr-accordion-card-header" id="headingTaxIdentifier">
9
<h2 class="mb-0">
10
<span class="btn btn-link dr-accordion-btn" data-toggle="collapse" data-target="#collapse-taxidentifier" aria-expanded="false" aria-controls="collapse-taxidentifier">
11
${Resource.msg('button.taxidentifier', 'digitalriver', null)}
12
</span>
13
</h2>
14
</div>
15
<div id="collapse-taxidentifier" class="collapse" aria-labelledby="headingTaxIdentifier" data-parent="#accordionBilling">
16
<div class="dr-accordion-card-body">
17
<div id="tax-id" data-config-url="${URLUtils.url('DigitalRiver-TaxIdentifierConfig')}"></div>
18
<button class="btn btn-block btn-primary dr-btn-taxidentifier-submit" type="button" data-apply-url="${URLUtils.url('DigitalRiver-TaxIdentifierApply')}">
19
${Resource.msg('button.submit.taxidentifier', 'digitalriver', null)}
20
</button>
21
<div id="dr-list-of-applied-identifiers" data-delete-url="${URLUtils.url('DigitalRiver-TaxIdentifierDelete')}"></div>
22
</div>
23
</div>
24
</div>
25
</isif>
26
<iscomment>End of DigitalRiver tax identifier</iscomment>
27
<div class="dr-accordion-card">
28
<div class="dr-accordion-card-header" id="headingPayment">
29
<h2 class="mb-0">
30
<span class="btn btn-link dr-accordion-btn" data-toggle="collapse" data-target="#collapse-payment" aria-expanded="false" aria-controls="collapse-payment">
31
${Resource.msg('button.payment', 'digitalriver', null)}
32
</span>
33
</h2>
34
</div>
35
<div id="collapse-payment" class="collapse" aria-labelledby="headingPayment" data-parent="#accordionBilling">
36
<div class="dr-accordion-card-body">
37
</isif>
Copied!
Include the Digital River payment options template.
1
<isif condition="${pdict.digitalRiverUseDropInFeature}">
2
<isinclude template="digitalriver/checkout/billing/paymentOptions" />
3
<iselse/>
4
<isinclude template="checkout/billing/paymentOptions" />
5
</isif>
Copied!
Add the accordion components to the billing page
1
<iscomment> Digital River accordion section </iscomment>
2
<isif condition="${pdict.digitalRiverUseDropInFeature}">
3
</div></div></div></div>
4
</isif>
5
Include Add Tax certificate modal window component
6
<isinclude template="digitalriver/checkout/billing/drTaxCertificateModal" />
Copied!

Stored payment instruments

The stored payment instruments (storedPaymentInstruments.isml) template allows you to display the stored payment instruments on the Billing page a list of saved payment cards in the customer's account.
Template path: cartridge\templates\default\checkout\billing\storedPaymentInstruments.isml
At the beginning of the file add the following code:
1
<isset name="isDRDropInEnabled" value="${require('dw/system/Site').getCurrent().getCustomPreferenceValue('drUseDropInFeature')}" scope="page" />
2
<div class="invalid-feedback" id="savedPaymentNotSelectedMessage">${Resource.msg('error.select.stored.card', 'digitalriver', null)}</div>
Copied!
Extend the card-image class condition as follows:
1
<img class="card-image" src="${paymentInstrument.cardTypeImage.src}" alt="${paymentInstrument.cardTypeImage.alt}">
Copied!
Also, wrap the security-code-input div with the following condition:
1
<isif condition="${!isDRDropInEnabled}"> <iscomment> Digital River - if enabled no cvv needed thus pictures are always shown instead of input </iscomment>
2
<div class="security-code-input ${loopState.first ? '' : 'checkout-hidden'}">
3
<label class="form-control-label" for="saved-payment-security-code">${Resource.msg('label.credit.card-security.code','checkout',null)}</label>
4
… security-code-unput goes here
5
</div>
6
</isif>
Copied!

Confirmation

We modified the standard confirmation (confirmation.isml) template for the B2C LINK Cartridge to include the Digital River compliance statement.
The customer should agree to the Terms of Sale and the Privacy Policy of Digital River and set the check box to complete the order. For more information on the Terms of Sale and the Privacy Policy of Digital River, visit the Digital River Legal Documentation website.
Compliance links are required to be displayed several different places throughout the storefront. The out-of-the-box (OOTB) cartridge displays the compliance links in all required locations. Consult your Digital River Project Manager before making modifications for your storefront. For more detailed information on the purpose of the compliance links, visit Compliance on the Digital River Legal Documentation website.
Template path: cartridge\templates\default\checkout\confirmation\confirmation.isml
Add the DigitalRiver.js script to the page.