Extend the Salesforce B2C LINK Cartridge
Extend the Salesforce B2C LINK Cartridge.
Last updated
Extend the Salesforce B2C LINK Cartridge.
Last updated
You can extend the functionality and features of the Salesforce B2C LINK Cartridge to meet your integration needs. Read the following section to learn how you can do this.
This section describes changes applied to the most recent 6.0.0 templates provided with the cartridge. In addition, the section describes changes that may need to be made to templates to support specific client use cases and integration choices.
The following templates and their changes are described in this section:
Use the add payment (addPayment.isml
) template to add payment cards to the customer's account. You can use the template to add Drop-in payments functionality (DigitalRiver.js) and Drop-in payments in styles (DigitalRiver.css), as well as place Drop-in payments on an account page.
Template: cartridge/templates/default/account/payment/addPayment.isml
Added this Digital River script to provide Drop-in payments functionality on the page and apply related changes to Drop-in payments' styles.
Applied the changes to Drop-in payments' styles.
Added the following condition inside the card-body
div
.
Added the following code:
Use the dashboard profile cards (dashboardProfileCards.isml
) template 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
Added the Digital River tax certificate section on the page. In this example, tax certificates are displayed in My account only for the US locale. This section is available for US locale only.
Use the cart totals (cartTotals.isml
) template to include the Digital River Order Summary section on your Checkout page.
Template: cartridge/templates/default/cart/cartTotals.isml
Included the Digital River Taxations section in the cart totals template after the discount section.
As part of Billing, you can use the payment options summary template (paymentOptionsSummary.isml
) 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
This change extended the payment condition with the ‘DIGITAL_RIVER_DROPIN’
payment method.
Use the billing (billing.isml
) template 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
Added the accordion components to the billing page. In this example, accordion billing is used by extending the tag with id="accordionBilling"
.
Introduced a new templated purchase site within the parent template.
Extended the Digital River tax identifier section <div>
tag with the dr-accordion-card
class and the remove wrap expression in highlighted code.
Added accordion components to the billing page.
Modified tag with the following line:
Use the stored payment instruments (storedPaymentInstruments.isml
) template to display the stored payment instruments on the Billing page as a list of saved payment cards in the customer's account.
Template path: cartridge/templates/default/checkout/billing/storedPaymentInstruments.isml
Added the following code at the beginning of the file:
Extended the card-image
class condition as follows:
Wrapped the security-code-input div with the following condition:
Use the standard confirmation (confirmation.isml
) template for the B2C LINK Cartridge to include the Digital River compliance statement.
Template path: cartridge/templates/default/checkout/confirmation/confirmation.isml
Added the DigitalRiver.js script to the page.
Added the Digital River compliance section to the page.
Added a Digital River styles file.
Added an include
of delayedPaymentInstructions
(first highlighted section).
Added an include
of delayedPaymentInstructions
(second highlighted section).
Use the checkout (checkout.isml
) template to add 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
Added the Digital River Drop-in styles.
Included the Digital River styles.
Added the Digital River confirm disclosure checkbox to the checkout page.
Modified the button to submit shipping.
Added a condition that will control the submit payment button display.
Added the Digital River compliance section to the checkout page.
Added the following code to display a customer related error:
Use the order total summary (orderTotalSummary.isml
) template to add the Digital River Taxations section to your Checkout page.
Template path: cartridge/templates/default/checkout/orderTotalSummary.isml
Added the "Sales Tax" information text as conditional HTML content.
Added the Digital River Taxations section.
Added the Digital River gross site VAT info to the end of the file.
Use the Payment (payment.isml
) template to add a payment section to to your Checkout page.
Template path: cartridge/templates/default/checkout/payment.isml
Add the following code on lines 14-18, line 41:
This section describes the changes applied to the most recent 6.0.0 client scripts provided with the cartridge. In addition, the section describes changes that you may need to may need to be make to the client scripts to support your specific use cases and integration choices.
The following scripts and their changes are described in this section:
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 (drCertificate.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
Included the additional scripts on the checkout page.
Script path: cartridge/client/default/js/checkout/checkout.js
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.
Added the following line at the beginning of the file:
Added the retrieve stored card global variable at the beginning of the checkout function.
Added the following code to the shipping submit success handler.
Added the following code to the Retrieve stored card section.
Extended the code as follows.
Added the following code to the Retrieve stored card section.
Extended the billing code as follows:
Extended the code as follows:
Wrapped the contents of the placeOrder
stage function.
Use the billing.js
script to extend the checkout script functionality.
Script path: cartridge/client/default/js/checkout/billing.js
Modified the following and also modified row (see highlighted area).
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
).
Used proccessInclude
to extend the default paymentInstruments.js script. Once compiled, the paymentInstrumentsDropIn.js
extends 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/checkout/billing.js
Edit the updatePaymentInformation
as follows:
Modify the selectBillingAddress
function. An example is shown in line 267 of the following screenshot:
Add the clearCreditCardForm
function content and include the following condition:
Add the handleCreditCardNumber
function 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:
Script path: cartridge/client/default/js/checkout/summary.js
Add summary info rows (highlighted section).
Add rows (highlighted section).
Added the following code:
Use the shipping.js
script to extend the checkout functionality.
Script path: cartridge/client/default/js/checkout/shipping.js
Modify the updateMultiShipInformation
function with the following condition on line 20:
Use the dropinHelper.js to configure specific payment data used by Drop-in payments.
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 payments 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 SFCC paymentInstrument
object.
switch(source.type)
—returns object with specific fields from the Drop-In response object.
Use the payments.js
script to add 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 as paymentType
, maskedCreditCardNumber
, and so on) and makes it available in templates or the client-side as JSON.
Endpoint URL structure: {sandbox}/{site}/{locale}/HooksObserver-Debug
Example of endpoint URL: https://zzrk-032.sandbox.us01.dx.commercecloud.salesforce.com/on/demandware.store/Sites-DR-SFRA-Net-Site/en_US/HooksObserver-Debug
Use the following steps to use the controller portion of the handler:
File: cartridges/int_digitalriver/cartridge/controllers/HooksObserver.js
Individual handlers, not the controller, can optionally send an email.
Use the helper script part of the controller to:
Send an email (sendTechnicalMail(title, content)
).
Set the email address in Business Manager site preferences
Check the received request (checkSignature(signature, requestBodyAsString)
).
File: cartridges/int_digitalriver/cartridge/scripts/digitalRiver/hooksObserver/drHooksHelper.js
Use the handler script where custom handling is needed. The handler script contains simple examples of handlers, which can be modified and extended for custom handling. Examples are provided for the following event types:
refund.pending
refund.complete
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
Click Webhooks.
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 .
The customer should agree to the Terms of Sale and the Privacy Policy of Digital River and set the check box to complete an order. For more information on the and the of Digital River, visit the 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 on the website.
Note: Refer to the section of this documentation for more information on how to use the Checkout template when using the Customer Credit feature and theint_digitalriver_customercredit
cartridge.
Use the summary.js
script to extend the checkout script functionality that provides order summary information. For more information on this script and how it is used with the Customer Credit, refer to and .
Use the cartridge's endpoints and Digital River external script to handle client payments. The DigitalRiver.http.service shares one profile and one credential.
The webhook handler consists of a , , and .
Set webhook signature token in Business Manager site preferences. Otherwise, the handler returns an error and 500
response code. You can find the webhook signature token under Signing secret under in the .
If the hookType
(webhook's ) is set in the request body (see in ), the handler script handles events by the event type and returns a 200 OK
response.
To receive a notification when an event occurs (for example, when a refund occurs), create a webhook for that event in the .
Sign in to the .
using your production or test environment.