---
schema_version: "1"
id: 1694226d19b367cf17ce213b22ce14efc9ecaa223819b3abee060a62095a9288
title: Add Billing Components to LWR Experience Cloud Sites
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/billing_self_service_lwr_components.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.billing_self_service_lwr_components.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 1b415c09ea462d6e3da1950f294275fc184a9cc9484dbca799b7b80350af5ec1
description: Add billing self-service capabilities to any Experience Cloud site that uses Lightning Web Runtime (LWR) templates, including a site that you build yourself. Drag the Posted Invoices, Invoice Line Viewer, Self-Service Payment Sheet, Self-Service Payment Confirmation, and Manage Saved Payment Methods components onto your pages so that customers can view invoices, pay outstanding balances, and manage their saved payment methods from your own branded site.
products:
  - Revenue Cloud
release: "264"
---
# Add Billing Components to LWR Experience Cloud Sites

Add billing self-service capabilities to any Experience Cloud site that uses Lightning Web Runtime (LWR) templates, including a site that you build yourself. Drag the Posted Invoices, Invoice Line Viewer, Self-Service Payment Sheet, Self-Service Payment Confirmation, and Manage Saved Payment Methods components onto your pages so that customers can view invoices, pay outstanding balances, and manage their saved payment methods from your own branded site.

### Required Editions

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition"><colgroup><col></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Enterprise</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions with <a href="https://help.salesforce.com/s/articleView?id=ind.revenue_licenses_areas_and_features.htm&amp;release=264.0.0&amp;type=5">the Revenue Cloud Billing license</a>. Contact your Salesforce account executive for more information.</td></tr></tbody></table>

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d20464e73">User Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d20464e73 ">To use the Billing self-service components in an Experience Cloud site:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d20464e73 ">Billing Experience Cloud User permission set</td>

          </tr>
        </tbody>
      </table>

The [Self-Service Billing Portal](https://help.salesforce.com/s/articleView?id=ind.billing_self_service_portal.htm&release=264.0.0&type=5 "The self-service billing portal is a customer-facing Experience Cloud site that enables end users and community users to raise and track their billing inquiries and disputes. Your customers can view and download invoice PDF documents and quickly pay the outstanding balances of invoices by using supported payment methods. The self-service portal minimizes manual intervention and improves cash flow and customer satisfaction.") template gives you a ready-to-use site. These components add the same billing capabilities to any LWR site, including the Build Your Own (LWR) template.

These components are available in the components palette, under the **Layout** section, in Experience Builder.

- **Posted Invoices**: shows a list of posted invoices for the current user's account.
- **Invoice Line Viewer**: shows the line items of an invoice.
- **Self-Service Payment Sheet**: shows the payment methods available for an invoice, including saved payment methods. Customers can also add a new payment method, save it for future use, and then submit a payment.
- **Self-Service Payment Confirmation**: shows whether a payment that a customer submitted from the Self-Service Payment Sheet succeeded.
- **Manage Saved Payment Methods**: shows customers their saved payment methods so that they can add or delete a saved payment method and set a default.

## Add a Billing Component to Your Page

1. In Experience Builder, open the page where you want to add the component.
2. In the components palette, under **Layout**, find the component that you want to add.
3. Drag the component onto your page.
4. Configure the component's properties.
    
    Required fields vary by component.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-revenue-264-0-0-production-enus/91ca99c6-d5c8-4986-b961-c6b7801e0d0d/images/icon_note.png)
    
    Note
    
    Some components need redirect links to other components. For example, Self-Service Payment Sheet redirects to the site page for payment confirmation.
5. Publish your site for the changes to take effect.