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`. 1. Go to **Setup** and search **flows** in the **Search** field.\
2. Click **Subflow - Shipping Address**. \ 
3. Click the **Shipping Address** screen. \
4. Click the screen in the flow and drag the **Buyer Info** component. \ 
5. 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})
* **Shipping Address ID**: ({!contactPointAddressId}) \ 
6. Click **Done**.
7. Click **Save As**. \ 
8. Enter the name of the custom subflow (for example, DR Shipping Address) and click **Save**. \ 
9. Click **Activate**.
### Configure the delivery method subflow
To configure the Delivery Method subflow:
1. Go to **Setup** and search flows in the **Search** field.
2. Click **Subflow - Delivery Method**. \ 
3. Click the **Delivery Method** screen. \ 
4. Add the `drb2b_DRUtil` component to the screen and enter the API name (drb2b\_Util or any name).
5. Click **Done**. \ 
6. Click **Save As**. \ 
7. Enter the Delivery Method subflow name (for example, DR Delivery Method).
8. Click **Save**, then click **Activate**. \ 
### 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:
1. Go to **Setup** and search flows in the **Search** field.
2. Click **Subflow - Checkout Summary**. \ 
3. Click the **Manager** tab and then click **New Resource**. \ 
4. Complete the following fields:
* **Resource Type**: Variable
* **API Name**: Saved\_Tax\_Identifier (or other name as desired)
* **Data Type**: Text
5. Check the **Available for input** and **Available for output** checkboxes.
6. Click **Done**. \ 
{% hint style="info" %}
This variable will be used to display payment information in a later step.
{% endhint %}
#### Add custom components to the checkout summary subflow
To add custom components for this subflow:
1. Click into the **Cart to Order Summary** screen.
2. Remove all OOTB components from the subflow except the **Shipping Address** and **Delivery Method** components.
3. Add the `drb2b_DRutil` component and define the name. \ 
4. Add the `drb2b_taxIdentifier` and enter the **API Name**, **Cart Id**, **Selected Tax Identifier**, and **Selected Tax Identifier**. \ 
* **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})
5. Add the `drB2B_DrTermsElement` and enter the **API Name** and **Cart Id**. \ 
* **API Name**: `DR_Terms` or any name
* **Cart Id**: ({!cartId})
6. Click **Done**.
7. Click **Save As**. \ 
8. Enter the custom subflow name (for example, DR Checkout Summary) and click **Save**. \ 
9. Click **Activate**. \ 
### Configure the payment subflow
This subflow must be customized to add **My Wallet** and **Digital River Payment Details** support. To configure the payment subflow:
1. Go to **Setup** and search **flows** in the **Search** field. \ 
2. Click **Subflow - Payment and Billing Address**. \ 
3. Click the **Manager** tab, then click **New Resource**. \ 
4. Complete the following fields:
* **Resource Type**: Variable
* **API Name**: Payment\_Details (or other name as desired)
* **Data Type**: Text\ 
5. Click **Done**.
#### Add custom components to a screen
To add custom components to a screen:
1. Drag the screen element showing on the left panel to create a new screen and name the new screen (for example, **placeOrderConfirmation**).\
2. Click the custom screen **placeOrderConfirmation**. \
**Note**: See [Link screen components](https://docs.digitalriver.com/salesforce-lightning/salesforce-lightning-b2b-commerce-api-1.0.1/integrate-the-salesforce-lightning-app/step-15-integrate-the-digital-river-components-into-the-checkout-flow) for instructions on linking the screen. \ 
3. Drag **Display Text** from the left panel to screen and enter the **API Name** (for example, **Payment\_Information**) and insert **Resource Payment\_Details**. This is the variable resource created in the previous section.\ 
4. Drag the `drb2b_OrderSummary` component from the left panel and enter the **API Name**, **Record Id**, **Show Duty**, **Show IOR tax**, **Show Regulatory Fee**, **Show Shipping**, and **Show Tax**. \ 
* **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})
5. Drag the `drb2b_DRUtil` component from the left panel and enter the **API Name** (`drb2b_Util` or other desired name).\ 
6. Click **Done**.
#### Edit the paymentMethodScreen screen
To edit the **paymentMethodScreen** screen:
1. Click the **paymentMethodScreen** screen.
2. Delete the OOTB components and add the `drb2b_Payments` component. \ 
3. Enter the **API Name**, **Record Id**, **Payment Detail**, **Payment Type**, **Payment Detail**, and **Payment Type** that is under the **Advanced** section, which will be visible by selecting the **Manually assign variables** check box. \ 
* **API Name**: (DR\_Payments or any other name with no restriction)
* **Record Id**: ({!cartId})
* **Payment Detail**: ({!Payment\_Detail})
* **Payment Type**: ({!paymentType})
4. Click **Done**.
#### Edit decision boxes
To edit decision boxes:
1. Click the **Decision** box (which payment type is selected). \ 
2. Add the new **Outcome** and enter the **Label**, **Outcome API Name**, and **Condition Requirements to Execute Outcome** (for example, **Resource** `paymentType` equals `DigitalRiver`). \ 
3. Click **Done**, then click the **Update address if changed** decision box. \ 
4. Add the new **Outcome** and enter the **Label**, **Outcome API Name**, and **Condition Requirements to Execute Outcome** (for example, **Resource** `paymentType` equals `DigitalRiver`).\
5. Click **Done**.
#### Link screen components
{% hint style="info" %}
To delete the existing link, click the link and press the **Delete** button on your keyboard.
{% endhint %}
1. Link **PaymentMethodScreen** to the **placeOrderConfirmation** screen (custom screen).
2. Link **placeOrderConfirmation** (custom screen) to subflow (Validate Checkout State).
3. Link **Decision** box (which payment type is selected) element to **Assignment** (Assign PO to null) element when the paymentType is Digital River.
4. Link from **Decision** box (Update Address if changed) to Subflow (Set State).\
5. Click **Save** **As** and enter a name for the custom subflow (for example, DR payments). \ 
6. Click **Activate**. \ 
## Configure main checkout flow
To configure the main checkout flow:
1. Click the **Checkout Flow Template** (OOTB flow).
2. 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.
* Drag the subflow from the left panel and enter the **Referenced Flow**, **Label**, **cardID**, **currentState**, and **nextState**. \ 
* 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}
4. Click **Save As** and enter a name for the main checkout flow. \ 
5. 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.
dRB2B_MyWallet is a wrapper component.
Its constituent components are drb2b_StoredPayments and drb2bNewPayments
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.
drb2b_Buyer Info is a wrapper component.
Its constituent component is drb2bUsersTaxCertificates.
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 drb2bAddTaxCertificate.
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.
drb2b_OrderSummary is a wrapper component.
Its constituent component is drb2b_CheckoutSummary.
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.
drb2b_taxIdentifier is a wrapper component
Its constituent component is
drb2b_MyTaxIdentifier.
This component is configured in the checkout flow.
| | drb2b\_MyTaxIdentifier | My Tax Identifiers |This component is used for Tax Identifier functionality.
drb2b_MyTaxIdentifieris a wrapper component.
Its constituent component is drb2b_CountryPicklist.
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).
drb2b_Payments is a wrapper component.
Its constituent components are drb2b_Dropin and
drb2b_MyWalletpayment.
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.
5. Scroll down at the bottom and the **+New Page** option will be available to create the custom page. Once the page has been created, it will appear in the **Pages** section. \ 
\
The page will also appear on the **Menu Item**.\
{% hint style="info" %}
If you want to add any page for the **Menu Item**, select the particular page from the page picklist under the **Menu Item**.
{% endhint %}
### Create a custom menu
To add a menu:
1. Go to **Setup**.
2. Search **All Sites** in the **Search** field.
3. Click **Builder**.
4. Click the user profile dropdown at the top right.\
5. Click **Authenticated User Options**. \ 
6. Click the **Edit Default User** profile menu. \ 
7. Click **+Add Menu item**.\
8. Select **Site Page** as the **Type**. The **Name** field will appear.
* Enter the desired name for the **Menu Item**.
* Select the desired custom page as the **Page**.\ 
9. Click **Save Menu**.
10. Click **Publish**.
### Add a custom component to a page
To add a custom component to a page:
1. Go to **Setup**.
2. Search **All Sites** in the **Search** field.
3. Click **Builder**.
4. Click **Home** at the top left corner and select the desired page. The custom components will appear at the bottom of the dropdown.
5. Drag and drop the custom component on the page.
6. Click **Publish**.
### Add a custom component to a custom page
To add a custom component to a custom page:
1. Go to **Setup**.
2. Search **All Sites** in the **Search** field.
3. Click **Builder**.
4. Click **Home** at the top left corner.
5. Type the name for the custom page in the **Search** field.
6. Click the selected page.
7. 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.
8. Drag and drop the custom component on the custom page.
9. Click **Publish**.
10. Repeat the above steps for other custom components you want to add to various pages.
{% hint style="info" %}
This custom component can be placed on other UI pages.
{% endhint %}
### 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:
1. Go to **Setup**.
2. Search **All Sites** in the **Search** field.
3. Click **Builder**.
4. Click **Home** at the top left corner.
5. Type **My Account** in the **Search** field. \ 
6. Click the selected page and click the lightning icon to add the custom component. The custom component will appear at the bottom of the dropdown. \ 
7. Drag and drop the custom component on the **My Account** page. \ 
8. Click **Publish**.\