# Add custom components to pages (Aura)

You can quickly and easily add Salesforce Lightning components to a record page and immediately view the 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 or flow 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 you do not drop an optional custom component onto the relevant Salesforce UI pages, the fields associated with that custom component (for example, Digital River custom fields) will not be visible on those UI pages.

Additionally, you can drop a given custom component on one or more UI pages based on what the custom component does. For example, you can place the Compliance footer custom component on multiple pages that require compliance footers.

We provide the custom components listed below as part of the app installation. However, you must place them on the pages within the flows and subflows as described in the table below.

You can use some of the custom components 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 your needs.

{% hint style="info" %}
**Note:** You can use all components in both the asynchronous and synchronous checkout flows unless noted otherwise.
{% endhint %}

<table><thead><tr><th width="260">Custom Component</th><th width="319">Page/Flow</th><th width="248.33333333333331">Description</th></tr></thead><tbody><tr><td>drb2b_cartContents</td><td>Checkout Page</td><td>Use this component to display cart item details such as item name, SKU, price per unit, total price, and so on. You can configure this component in the Experience Builder.</td></tr><tr><td>drb2b_addressDetails</td><td>Checkout Page or Subflow</td><td><p>Use this component to display address details such as Bill To and Ship To.</p><p>You can configure this component in the Experience Builder or flow.</p></td></tr><tr><td>drb2b_drCompliance</td><td>All Checkout Pages</td><td>Use this component to show the Digital River compliance links. You can configure this component in the Experience Builder.</td></tr><tr><td>drb2b_drTermsElement</td><td>Sub Flow / Screen: <strong>Digital River Checkout Summary</strong> subflow or <strong>Checkout Summary</strong> screen</td><td>Use the checkbox in this component for the active acceptance of terms and conditions by the user.<br>You can configure this component in the flow.</td></tr><tr><td>drb2b_myWallet</td><td>My Wallet</td><td><p>Use this component to show and add new payment sources in the wallet. <code>dRB2B_MyWallet</code> is a wrapper component.<br>Its constituent components are <code>drb2b_StoredPayments</code> and <code>drb2bNewPayments</code>.</p><p>You can configure this component in the Experience Builder.<br></p></td></tr><tr><td>drb2b_paymentDetails</td><td>Pages: Order Summary Detail, Order Confirmation Sub flow / Screen: <strong>Digital River Payments</strong> subflow or <strong>Place Order Confirmation</strong> screen</td><td><p>This component shows payment details.</p><p>You can configure this component in the sub flow.</p></td></tr><tr><td>drb2b_vatCreditMemo</td><td>Order Summary Detail</td><td>Use this component to show invoices and credit memos to the user. It should appear on the Order Summary Detail page two times: one refers to the invoice and the other refers to the credit memo. You can configure this component in the Experience Builder.</td></tr><tr><td>drb2b_productDetail</td><td>Order Confirmation</td><td>Use this component to show the product details. You can configure this component in the Experience Builder.</td></tr><tr><td>drb2b_buyerInfo</td><td>Sub Flow / Screen: <strong>Digital River Shipping address</strong> subflow or <strong>Shipping Options</strong> screen</td><td>Use this component to display user information such as Name, Email, Bill to and Ship to, and so on.<br><code>drb2b_Buyer Info</code> is a wrapper component. Its constituent component is <code>drb2bUsersTaxCertificates</code>. You can configure this component in the flow.</td></tr><tr><td>drb2b_usersTaxCertificates</td><td>Page: My Tax Certificates</td><td>Use this component to upload tax certificates. <code>drb2b_usersTaxCertificates</code> is a wrapper component. Its constituent component is <code>drb2b_addTaxCertificate</code>. You can configure this component in the Experience Builder.<br></td></tr><tr><td>drb2b_orderSummary</td><td><p>Page: Order Confirmation</p><p>Sub flow / Screen: <strong>Digital River Payment</strong> subflow or <strong>Payment Screen</strong></p></td><td>Use this component to display Sub Total, Shipping, Tax, and Grand Total, and so on. <code>drb2b_orderSummary</code> is a wrapper component. Its constituent component is <code>drb2b_checkoutSummary</code>. You can configure this component in the Experience Builder or flow.</td></tr><tr><td>drb2b_checkoutSummary</td><td><p>Page: Checkout</p><p>Sub flow / Screen: can optionally be added to any subflow or screen</p></td><td>Use this component to display Sub Total, Shipping, Tax, and Grand Total, IOR Tax Regulatory Fee, and so on. You can configure this component in the Experience Builder or flow.</td></tr><tr><td>drb2b_drUtil</td><td>Subflow / Screen: <strong>DR Delivery Method, DR Checkout Summary, and DR Payments</strong> subflows or <strong>Delivery Method, Checkout Summary,</strong> and <strong>Place Order Confirmation</strong> screens</td><td>This component tells the Order Summary to get taxes and the subtotal from the cart. You can configure this component in the flow.</td></tr><tr><td>drb2b_taxIdentifier</td><td>Sub Flow / Screen: <strong>Digital River Checkout Summary</strong> subflow or <strong>Checkout Summary</strong> screen</td><td>Use this component to add a tax identifier in the checkout flow. <code>drb2b_taxIdentifier</code> is a wrapper component. Its constituent component is <code>drb2b_myTaxIdentifier</code>. You can configure this component in the flow. You can configure this component in the flow.<br><br></td></tr><tr><td>drb2b_myTaxIdentifier</td><td>My Tax Identifier</td><td>Use this component for the Tax Identifier functionality. <code>drb2b_myTaxIdentifier</code> is a wrapper component. Its constituent component is <code>drb2b_CountryPicklist.</code> You can configure this component in the Experience Builder.</td></tr><tr><td>drb2b_payments</td><td>Sub Flow / Screen: <strong>Digital River Payments</strong> subflow or <strong>Payment</strong> screen</td><td>Use this component for payment sources (for example, Drop-in and Stored Payments).  <code>drb2b_payments</code> is a wrapper component. Its constituent components are <code>drb2b_dropin</code> and <code>drb2b_myWalletPayment</code>. You can configure this component in the flow.</td></tr><tr><td>drb2b_placeOrder (optional)</td><td><p>Page: Checkout</p><p>Sub flow / screen: <strong>Digital River Payment</strong> subflow or <strong>Place Order Confirmation Screen</strong> or the <strong>Checkout Page</strong> (template)</p></td><td>Optionally, use this component to add the Place Order button to the Checkout Page or on the Place Order Confirmation screen. Use this component in conjunction with the <code>drb2b_orderSummary</code> component for the Place Order button to appear. You can configure this component in the Experience Builder or in the flow.<br><br>Alternatively, use this component on the Place Order Confirmation screen, also in conjunction with the <code>drb2b_orderSummary</code> component.</td></tr><tr><td>drb2b_hideCheckoutSummary</td><td>Sub flow - per business requirements</td><td>Use this component to hid the <code>drb2b_checkoutSummary</code> component.<br>You can configure this component in the flow.</td></tr><tr><td>drb2b_delayedPaymentInstructions</td><td>Pages: Order Summary Detail, Order Confirmation</td><td>Use this component to display the Delayed Payment instructions for delayed payment methods such as Wire Transfer.<br>You can configure this component in the flow.</td></tr><tr><td>drb2b_previousButton</td><td>Screens: <strong>Payment and Billing Address</strong> and <strong>Place Order Confirmation</strong> screens</td><td>Use this component in the synchronous checkout flow only. This component is used to add the previous button to pages screens where the Digital River provided flow disables the OOTB previous button.</td></tr><tr><td>drb2b_OfflineRefund</td><td>Order Summary Detail</td><td>Use this component to collect refund banking details for shoppers using offline payment methods such as wire transfer or konbini.</td></tr></tbody></table>

See [Customizing the Lightning web components](https://docs.digitalriver.com/salesforce-lightning/salesforce-lightning-b2b-commerce-app-2.1/extend-the-salesforce-lightning-app/customizing-the-lightning-web-components) for additional information.

The following screenshots 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

<div align="left"><img src="https://content.gitbook.com/content/3R66sN5xrbmDAJUBEoHo/blobs/a73YC2cJMgbRoyAW0EBT/Checkout%20flow_installation.png" alt=""></div>

### Order confirmation

<div align="left"><img src="https://content.gitbook.com/content/3R66sN5xrbmDAJUBEoHo/blobs/wVYLvJoi3pk0y7LOH5ys/Order%20confirmation_1.png" alt=""></div>

### Order summary detail

<div align="left"><figure><img src="https://content.gitbook.com/content/3R66sN5xrbmDAJUBEoHo/blobs/vIAJFZXsFfXcvf0jI53B/offline%20refund%20edit.png" alt=""><figcaption></figcaption></figure></div>

### My Wallet (custom page)

<div align="left"><img src="https://content.gitbook.com/content/3R66sN5xrbmDAJUBEoHo/blobs/k6cEdbXCZEvAMD8DLFsX/My%20Wallet_custom%20page.png" alt=""></div>

### My Tax Certificates (custom page)

<div align="left"><img src="https://content.gitbook.com/content/3R66sN5xrbmDAJUBEoHo/blobs/lymBouhxyiHKcVXOSZVv/My%20Tax%20Certificates_custom%20page.png" alt=""></div>

### My Tax Identifiers (custom page)

<div align="left"><img src="https://content.gitbook.com/content/3R66sN5xrbmDAJUBEoHo/blobs/eoQeu69UfQcIqLM4a7f8/My%20Tax%20Identifiers_custom%20page.png" alt=""></div>