IMPORTANT: Follow the instructions below only when you can’t 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 .
Templates
Make the following changes to the template files:
Template: cartridge\templates\default\account\payment\addPayment.isml Add this Digital River script to Drop-in functionality on the page.
Put the following condition inside the card-body div.
<iscomment> Include Digital River Drop-In </iscomment>
<isset name="useDigitalRiverDropIn" value="${require('dw/system/Site').getCurrent().getCustomPreferenceValue('drUseDropInFeature')}" scope="page" />
<isif condition="${useDigitalRiverDropIn}">
<isinclude template="account/payment/dropinForm"/>
<iselse/>
<iscomment> Default Payment form </iscomment>
<isinclude template="account/payment/paymentForm"/>
</isif>
Template: cartridge\templates\default\cart\cartTotals.isml. Include the Digital River Duty section in the cart totals template after the discount section.
Template: cartridge\templates\default\checkout\billing\paymentOptions\paymentOptionsSummary.isml.
Extend the condition with the ‘DIGITAL_RIVER_DROPIN’ payment method.
Also, wrap the security-code-input div with the following condition:
<isif condition="${!pdict.digitalRiverUseDropInFeature}"> <iscomment> Digital River - if enabled no cvv needed thus pictures are always shown instead of input </iscomment>
… security-code-input goes here
</isif>
Template: cartridge\templates\default\checkout\shipping\shippingAddress.isml. Extend the shipping address form with the email address input field.
Make the following changes to the client script files:
Note: Do not forget to compile client-side scripts after implementing changes in the source code.
Script cartridge\client\default\js\checkout.js
Include the drDropIn script on the checkout page.
processInclude(require('./checkout/drDropIn'));
Script cartridge\client\default\js\checkout\checkout.js
Add the following code to the shipping submit success handler.
if (!data.error) {
$('body').trigger('digitalRiver:dropIn', data.digitalRiverConfiguration); // Digital River integration: call dropIn feature after checkoutCreate
}
Extend the code on line 222 as follows:
var paymentMethod = $('.payment-information').data('payment-method-id');
if (paymentMethod === 'CREDIT_CARD' || paymentMethod === 'DIGITAL_RIVER_DROPIN') { // Extended by Digital River Drop-in integration
Script cartridge\client\default\js\checkout\billing.js
Extend the condition inside the function.
/**
* Creates html to display payment summary for credit card payment
* @param {Object} order current order model
* @param {Object} selectedPaymentInstrument selected payment instrument model
* @returns {string} html for credit card payment
*/
function getCreditCardPaymentInfoHtml(order, selectedPaymentInstrument) {
return '<span>' + order.resources.cardType + ' '
+ selectedPaymentInstrument.type
+ '</span><div>'
+ selectedPaymentInstrument.maskedCreditCardNumber
+ '</div><div><span>'
+ order.resources.cardEnding + ' '
+ selectedPaymentInstrument.expirationMonth
+ '/' + selectedPaymentInstrument.expirationYear
+ '</span></div>';
}
And use it for creating HTML inside the <updatePaymentInformation> function.
var selectedPaymentInstrument = order.billing.payment.selectedPaymentInstruments[0];
if (selectedPaymentInstrument.paymentMethod === 'DIGITAL_RIVER_DROPIN') {
switch (selectedPaymentInstrument.paymentType) {
case 'creditCard':
htmlToAppend += getCreditCardPaymentInfoHtml(order, selectedPaymentInstrument);
break;
default: // extend switch with new cases or extend default if you want to show extended data for non-card payment types
htmlToAppend += '<span>' + selectedPaymentInstrument.paymentType
+ '</span>';
}
} else {
htmlToAppend += getCreditCardPaymentInfoHtml(order, selectedPaymentInstrument);
}
Wrap the <clearCreditCardForm> function content with the following condition.
if (!$('#dropInContainer').data('enabled')) {
… function content goes here
}
Wrap the <handleCreditCardNumber> content with the following condition.
if ($('.cardNumber').length > 0) { // if Digital River enabled card form will be replaced with Drop-in functionality
cleave.handleCreditCardNumber('.cardNumber', '#cardType');
}
Add the condition inside the <selectSavedPaymentInstrument>.
if (!$('#dropInContainer').data('enabled')) { // Digital River - if enabled no cvv needed thus pictures are always shown instead of input
$('.saved-payment-instrument .card-image').removeClass('checkout-hidden');
$('.saved-payment-instrument .security-code-input').addClass('checkout-hidden');
$('.saved-payment-instrument.selected-payment'
+ ' .card-image').addClass('checkout-hidden');
$('.saved-payment-instrument.selected-payment '
+ '.security-code-input').removeClass('checkout-hidden');
}
Add the following code in the <addNewPaymentInstrument> function.
// Digital River Drop-in section
if ($('#dropInContainer').data('enabled')) {
$('.drop-in-container').removeClass('checkout-hidden'); // show drop-in form to enter new payment
$('.submit-payment').addClass('digitalriver-hide'); // next step will be launched from drop-in button instead
}
Add the following code in the <addNewPaymentInstrument> function.
// Digital River Drop-in section
if ($('#dropInContainer').data('enabled')) {
$('.submit-payment').removeClass('digitalriver-hide');
$('.drop-in-container').addClass('checkout-hidden');
}
Script cartridge\client\default\js\paymentInstruments.js
Add the Drop-in script to the page.
There is a service sharing one profile and one credential.
DigitalRiver.http.service
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 as described below:
switch(source.type) in function saveDropInPaymentToWallet—to save any specific payment data from Drop-in to the customer wallet which will be used in further checkouts.
switch(paymentType) in function getPaymentInformationFromPaymentInstrument—to handle any payment type specific data which was saved in the customer profile.
switch(source.type) in function getPaymentInformationFromDropIn—to handle any payment type-specific data which was provided by Drop-in.
int_digitalriver_sfra\cartridge\models\payment.js
function extendDigitalRiverInfo—extract all information you want to be available in templates or be provided to the client-side as JSON.
switch(selectedPaymentInstrument.paymentType) in function updatePaymentInformation—add payment information to html. Make sure you have the necessary data provided by the Payment model.
The cartridge uses the Digital River API endpoints. You can find API service documentation on the Digital River website: .
Also, this cartridge uses the Digital River external script to handle client payments.
