Step 15: Integrate the Digital River components into the checkout flow
Learn how to integrate the Digital River components into the checkout flow.
The Salesforce Lightning application comes with a completely functional checkout flow out-of the-box (OOTB). However, many clients will choose to customize their checkout flow to suit their particular needs. This section describes how you can use the Salesforce Lightning components provided by the application in your storefront.
Custom components used in the checkout subflows
Custom subflow name | Custom component(s) used | Description |
DR Shipping Address | drb2b_BuyerInfo | This custom subflow will be used in the place of OOTB subflow – Shipping Address. |
DR Delivery Method | drb2b_DRUtil | This custom subflow will be used in the place of OOTB subflow – Delivery Method. |
DR Checkout Summary | drb2b_DRUtil drb2b_DrTermsElement drb2b_taxIdentifier | This custom subflow will be used in the place of OOTB subflow – Checkout Summary. |
DR Payments | drb2b_Order Summary drb2b_DRUtil drb2b_Payments | This custom subflow will be used in the place of OOTB subflow – Payment and Billing Address. |
Subflow configuration
Configure the shipping address subflow
This subflow will be used to capture buyer information such as Bill To
, Ship To
, and Email
.
Enter the API Name, Cart Id, Enable Tax Certificate, and Shipping Address ID (in the Advanced section and only visible by selecting Manually assign variables check box).
API Name: BuyerInfo or any other name with no restriction
Cart Id - ({!cartId})
Enable Tax Certificates: ({!$GlobalConstant.True}) OR ({!$GlobalConstant.False})
Click Done.
Click Activate.
Configure the delivery method subflow
To configure the Delivery Method subflow:
Go to Setup and search flows in the Search field.
Add the
drb2b_DRUtil
component to the screen and enter the API name (drb2b_Util or any name).Enter the Delivery Method subflow name (for example, DR Delivery Method).
Configure the checkout summary subflow
This subflow will be customized to add US Tax Certificate and Tax Identifier support.
Create a variable
To create a variable:
Go to Setup and search flows in the Search field.
Complete the following fields:
Resource Type: Variable
API Name: Saved_Tax_Identifier (or other name as desired)
Data Type: Text
Check the Available for input and Available for output checkboxes.
This variable will be used to display payment information in a later step.
Add custom components to the checkout summary subflow
To add custom components for this subflow:
Click into the Cart to Order Summary screen.
Remove all OOTB components from the subflow except the Shipping Address and Delivery Method components.
API Name: (Tax_Identifier or any name)
Cart Id: ({!cartId})
Selected Tax Identifier: ({!Saved_Tax_Identifier})
Selected Tax Identifier in the Advanced section: ({!Saved_Tax_Identifier})
API Name:
DR_Terms
or any nameCart Id: ({!cartId})
Click Done.
Configure the payment subflow
This subflow must be customized to add My Wallet and Digital River Payment Details support. To configure the payment subflow:
Complete the following fields:
Resource Type: Variable
API Name: Payment_Details (or other name as desired)
Click Done.
Add custom components to a screen
To add custom components to a screen:
API Name: OrderSummary or any name
Record Id: ({!cartId})
Show Duty: ({!$GlobalConstant.True})
Show IOR Tax: ({!$GlobalConstant.True})
Show Regulatory Fee: ({!$GlobalConstant.True})
Show Shipping: ({!$GlobalConstant.True})
Show Tax: ({!$GlobalConstant.True})
Click Done.
Edit the paymentMethodScreen screen
To edit the paymentMethodScreen screen:
Click the paymentMethodScreen screen.
API Name: (DR_Payments or any other name with no restriction)
Record Id: ({!cartId})
Payment Detail: ({!Payment_Detail})
Payment Type: ({!paymentType})
Click Done.
Edit decision boxes
To edit decision boxes:
Click Done.
Link screen components
To delete the existing link, click the link and press the Delete button on your keyboard.
Link PaymentMethodScreen to the placeOrderConfirmation screen (custom screen).
Link placeOrderConfirmation (custom screen) to subflow (Validate Checkout State).
Link Decision box (which payment type is selected) element to Assignment (Assign PO to null) element when the paymentType is Digital River.
Configure main checkout flow
To configure the main checkout flow:
Click the Checkout Flow Template (OOTB flow).
Create the subflow element for all the custom subflows (for example, DR Shipping Address, DR Payment, DR Checkout Summary, DR Shipping Address, and DR Delivery Method) which were created in the above steps.
Repeat the same steps for all custom subflows.
Subflow
Cart Id
Current state
Next state
Order Id
DR Shipping Address
{!cartId}
{!mainCheckoutSession.State}
Inventory
NA
DR Delivery Method
{!cartId}
{!mainCheckoutSession.State}
Taxes
NA
DR Checkout Summary
{!cartId}
{!mainCheckoutSession.State}
Cart To Order
NA
DR Payment
{!cartId}
{!mainCheckoutSession.State}
Activate Order
{!mainCheckout Session.OrderId}
Replace the OOTB flows with custom flows.
Shipping Address: DR Shipping Address
Delivery Method: DR Delivery Method
CheckoutSummary: DR Checkout Summary
Click Save, then click Activate.
Add custom components to pages
Salesforce Lightning components can be quickly and easily added to a record page to have an immediate view of information.
To use the custom Lightning component in your pages, you must assign your component to a theme layout in the Experience Builder.
After completion, drag and drop a custom component onto a particular page based on the business requirements.
List of custom components
The custom components listed here are either available in the Experience Builder or used in various flows.
If an optional custom component is NOT dropped onto relevant standard Salesforce UI pages, the downside is that custom fields (for example, Digital River custom fields) will not be visible on those UI pages.
Additionally, a given custom component can be dropped on one or more UI pages based on what the custom component does (for example, the Compliance footer custom component can be placed on multiple pages that require compliance footers).
The custom components listed in this section are provided as part of the app installation. However, they must be placed on the page(s) within the flows and subflows as described in the table below.
Some of the custom components are used on pages such as Tax Certificates, Tax Identifiers, My Wallet, and Stored Payments. Separate tabs are available for these pages. You can directly drag and drop the following custom components onto a particular page based on the user’s needs.
Custom Component | Page/Flow | Description |
B2B Sample Cart Contents | Checkout Page | This component is used to display cart item details such as item name, SKU, price per unit. and total price. This component is configured in the Experience Builder. |
dRB2B_AddressDetails | Checkout Page | This component is used to display address details such as Bill To and Ship To.
This component is configured in the Experience Builder. |
dRB2B_DrCompliance | All Checkout Pages
| This component is used to show the DR compliance link.
This component is configured in the Experience Builder. |
dRB2B_DrTermsElement | Sub Flow DR Checkout Summary | The checkbox in this component is used for the active acceptance of terms and conditions by the user.
This component is configured in the flow. |
dRB2B_MyWallet | My Wallet | This component is used for showing and adding new payment sources in the wallet.
Its constituent components are This component is configured in the Experience Builder. |
drb2b_PaymentDetails | Order Summary Detail, Order Confirmation | This component is used to show payment details and is configured in the Experience Builder. |
dRB2B_VatCreditMemo | Order Summary Detail | This component is used to show invoices and credit memos to the user and should be dropped on the Order Summary Detail page two times: one refers to the invoice and the other refers to the credit memo (type = Invoices or type = Credit Memos). This component is configured in the Experience Builder. |
drb2b_ProductDetail | Order Confirmation | This component is used to show product details.
This component is configured in Experience Builder. |
drb2b_BuyerInfo | Sub Flow-DR Shipping Address | This component is used to display user information such as Name, Email, Bill to and Ship to, etc.
Its constituent component is
This component is configured in the flow. |
DRB2B User Tax Certificates | My Tax Certificates | This component is used to upload tax certificates.
DRB2B User Tax Certificates is a wrapper component.
Its constituent component is
This component is configured in the Experience Builder. |
drb2b_OrderSummary | Order Confirmation | This component is used to display Sub Total, Shipping, Tax, and Grand Total, etc.
Its constituent component is
This component is configured in the Experience Builder and in the flow. |
drb2b_CheckoutSummary | Checkout Page | This component is used to display Sub Total, Shipping, Tax, and Grand Total, IOR Tax Regulatory Fee, and so on.
This component is configured in the Experience Builder. |
drb2b_DRUtil | Sub Flow-DR Checkout Summary and Delivery Method subflow | This component tells the Order Summary to get taxes and the subtotal from the cart.
This component is configured in the flow. |
drb2b_taxIdentifier | Sub Flow-DR Checkout Summary | This component is used to add a tax identifier in the checkout flow.
Its constituent component is
This component is configured in the checkout flow. |
drb2b_MyTaxIdentifier | My Tax Identifiers | This component is used for Tax Identifier functionality.
Its constituent component is This component is configured in the Experience Builder. |
drb2b_Payments
| Sub Flow-DR Payments | This component is used for payment sources (for example, Drop-in and Stored Payments).
Its constituent components are
This component is configured in the flow. |
drb2b_HideCheckoutSummary | As required | This component is added inside the screens of the flow and allows the client to conditionally show and hide the drb2b_CheckoutSummary component. This component is configured in the flow. |
The screenshots below show a mocked-up version of each of the pages mentioned in the table above. The screenshots demonstrate the components that are recommended to be added to each page in the Experience Builder.
Checkout
Order confirmation
Order summary detail
My Wallet (custom page)
My Tax Certificates (custom page)
My Tax Identifiers (custom page)
Drag and drop (custom) components
After the custom component is added into the Experience Builder, drag and drop the custom component on the page.
Custom pages and menu items
The app provides custom components for three custom pages: My Wallet, My Tax Certificates, and My Tax Identifiers. It is recommended that you create these custom pages as required.
To customize a page:
Go to Setup in the Experience Builder.
Search All Sites in the Search field.
Click Builder.
If you want to add any page for the Menu Item, select the particular page from the page picklist under the Menu Item.
Create a custom menu
To add a menu:
Go to Setup.
Search All Sites in the Search field.
Click Builder.
Select Site Page as the Type. The Name field will appear.
Enter the desired name for the Menu Item.
Click Save Menu.
Click Publish.
Add a custom component to a page
To add a custom component to a page:
Go to Setup.
Search All Sites in the Search field.
Click Builder.
Click Home at the top left corner and select the desired page. The custom components will appear at the bottom of the dropdown.
Drag and drop the custom component on the page.
Click Publish.
Add a custom component to a custom page
To add a custom component to a custom page:
Go to Setup.
Search All Sites in the Search field.
Click Builder.
Click Home at the top left corner.
Type the name for the custom page in the Search field.
Click the selected page.
Click the lightning icon on the upper left side to add the custom component. The custom component will appear at the bottom of the dropdown.
Drag and drop the custom component on the custom page.
Click Publish.
Repeat the above steps for other custom components you want to add to various pages.
This custom component can be placed on other UI pages.
Add Tax Certificates component on the My Account page
As an example of how to add a custom component to a page, here are the steps to place the Tax Certificates component on the My Account page.
To add a tax certificate component on the My Account page:
Go to Setup.
Search All Sites in the Search field.
Click Builder.
Click Home at the top left corner.
Click Publish.
Last updated