Extending the Salesforce B2C LINK Cartridge
Extend the Salesforce B2C LINK Cartridge.
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.
And apply the changes to Drop-in styles.
Put the following condition inside the card-body div.
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.
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.
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.
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.
Include the Digital River payment options template.
Add the accordion components to the Billing page
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:
Extend the card-image class condition as follows:
Also, wrap the security-code-input div with the following condition:
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.
Add the Digital River compliance section to the page.
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.
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
Add the Digital River Drop-in styles.
Include the Digital River styles.
Add the Digital River confirm disclosure checkbox to the checkout page.
Add a condition that will control the submit payment button display.
Add the Digital River compliance section to the checkout page.
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
Add the Digital River Taxations section.
SFRA version 5.3.0 client scripts
We provide the following client scripts and describe how to change them.
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.
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.
Add the retrieve stored card global variable at the beginning of the checkout function.
Add the following code to the shipping submit success handler.
Add the following code to line 230.
Extend the code on line 235 as follows:
Add the following code to line 237.
Add the following code to line 265.
Extend the code on line 282 as follows:
Extend the code on line 324 as follows:
Wrap the contents of the placeOrder stage function.
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.
Add the <getCreditCardPaymentInfoHtml> function.
And use it for creating HTML inside the <updatePaymentInformation> function. For switch (selectedPaymentInstrument.paymentType), add the payment information (for example, DIGITAL_RIVER_DROPIN).
Make sure you have the necessary data provided by the Payment model.
Wrap the <clearCreditCardForm> function content with the following condition.
Wrap the <handleCreditCardNumber> content with the following condition.
Add the condition inside the <selectSavedPaymentInstrument>.
Add the following code in the <addNewPaymentInstrument> function.
Add the following code in the <cancelNewPayment> function.
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.
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.
And apply the changes to Drop-in styles.
Put the following condition inside the card-body div.
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.
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.
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.
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.
Include the Digital River payment options template.
Add the accordion components to the billing page
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:
Extend the card-image class condition as follows:
Also, wrap the security-code-input div with the following condition:
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.
Add the Digital River compliance section to the page.
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
Add the Digital River Drop-in styles.
Include the Digital River styles.
Add the Digital River confirm disclosure checkbox to the checkout page.
Add a condition that will control the submit payment button display.
Add the Digital River compliance section to the checkout page.
Order total summary
The order total summary (orderTotalSummary.isml) template allows you to add the Digital River Taxations section to your Checkout page.
Template path: cartridge\templates\default\checkout\orderTotalSummary.isml
Add the Digital River Taxations section.
SFRA version 6.0.0 client scripts
We provide the following client scripts and describe how to change them.
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 path: cartridge\client\default\js\checkout.js
Include the additional scripts on the checkout page.
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.
Add the retrieve stored card global variable at the beginning of the checkout function.
Add the following code to the shipping submit success handler.
Add the following code to line 265.
Extend the code on line 269 as follows:
Add the following code to line 300.
Extend the code on line 317 as follows:
Extend the code on line 359 as follows:
Wrap the contents of the placeOrder stage function.
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.js will extend the 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
Edit the updatePaymentInformation as follows:
Add the <clearCreditCardForm> function content and include the following condition:
Add the <handleCreditCardNumber> fuction and include the following condition:
Add the following condition inside the <selectSavedPaymentInstrument> function.
Add the following code to the <addNewPaymentInstrument> function:
Add the following code to the <canceNewPayment> function:
Drop-in data handlers
The cartridge uses the Digital River API endpoints and the Digital River Drop-in external script to handle client payments. The DigitalRiver.http.service shares one profile and one credential.
dropinHelper.js
Use the dropinHelper.js to configure specific payment data used by Drop-in.
Path: int_digitalriver\cartridge\scripts\digitalRiver\dropinHelper.js
You can use use the following elements in dropinHelper.js to configure the payment data.
switch(source.type)—saves payment data (for example,creditCard) from Drop-in to the customer's wallet where it can be used the next time the customer goes to the Checkout page.switch(paymentType)—returns object with specific fields from the SFCCpaymentInstrumentobject.switch(source.type)—returns object with specific fields from the Drop-In response object.
payment.js
The payments.js script adds specific attributes to the core payment object. Templates and client-side scripts (JSON) use this object.
Path: int_digitalriver_sfra\cartridge\models\payment.js
extendDigitalRiverInfo—extract data (such aspaymentType,maskedCreditCardNumber, and so on) and makes it available in templates or the client-side as JSON.
Webhook handler
The webhook handler consists of a controller, a helper script, and a handler script.
Endpoint URL structure:
{sandbox}/{site}/{locale}/HooksObserver-DebugExample of endpoint URL:
https://zzrk-032.sandbox.us01.dx.commercecloud.salesforce.com/on/demandware.store/Sites-DR-SFRA-Net-Site/en_US/HooksObserver-Debug
Controller
A controller is prepared to:
File: cartridges/int_digitalriver/cartridge/controllers/HooksObserver.js
Step 1: Catch request data
Step 2: Use helper script to log request data
Step 3: Check the signature and handle hook
Step 4: Send an email
Individual handlers, not the controller, can optionally send an email.
Step 5: Return the response
Helper script
The helper script contains functions to:
Send an email (
sendTechnicalMail(title, content)).Set the email address in Business Manager site preferences
File: cartridges/int_digitalriver/cartridge/scripts/digitalRiver/hooksObserver/drHooksHelper.js
Handler script
The handler script contains simple examples of handlers, which can be modified and extended for custom handling. Examples are prepared for the following event types:
refund.pendingrefund.complete
If the hookType (webhook's event type) is set in the request body (see Step 1: Catch request data in Controller), the handler script handles events by the event type and returns a 200 OK response.
If a handler with a selected hookType does not exist or if the hookType is not set, the “default” handler is used and processes all other types and returns 200 response code.
If an error occurs, the handler returns a 500 response code.
To add a handler for a specific event type, simply create a function with a data attribute that returns a response code (for example, 200) and add a function name to the module.exports object.
File: cartridgees/int_digitalriver/cartridge/scripts/digitalRiver/hooksObserver/drHooksHandler.js
Creating webhooks
To receive a notification when an event occurs (for example, when a refund occurs), you need to create a webhook for that event in the Digital River Dashboard.
Sign in to the Digital River Dashboard.
Click Webhooks.
Create one webhook per site and configure each webhook to send one or more events using your production or test environment.
Last updated