> For the complete documentation index, see [llms.txt](https://docs.doku.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.doku.com/subscription-and-billing/flexibill/billing-portal.md). # Billing Portal {% hint style="info" %} Availability: 🇮🇩 Indonesian Business Account only {% endhint %} Billing Portal is a product that allows merchants to build and customize a community-facing application — including homepage sections, brand identity, and logos — without writing any code. The application is integrated with DOKU Subscription and Billing, enabling community members to view and pay their bills directly through the app. ## Features & Benefits #### 🎨 No-Code Customization Configure your application's homepage sections, color scheme, logo, and fonts entirely from the merchant dashboard — no developer required. #### 🔗 Integrated with DOKU Subscription and Billing The Billing Portal is natively connected to FlexiBill. Members can look up their invoices by Flexibill Member or Customer ID and pay outstanding bills directly within the app. #### 📱 Multiple Payment Methods Members can pay using **DOKU Wallet** or **Other Payment Methods** (Virtual Account, QRIS, Cards, and more) — as configured by the merchant. #### 🗂️ Section Management with Archive & Restore Manage homepage content flexibly — add, edit, reorder, or remove sections. Removed sections and their content are stored in the **Archived Configuration** and can be fully restored at any time. ## How It Works {% stepper %} {% step %} ### Configure General Settings Set up the merchant's visual identity — display name, logo, primary and secondary colors, and font. Upload legal documents (Terms and Conditions, Privacy Policy, About Us) that members may need to access. {% endstep %} {% step %} ### Add Sections to the Homepage Create up to 3 customizable sections on the homepage. Choose between a **Widget** section for functional quick-access links integrated with DOKU Subscription and Billing, or a **Banner** section for news, announcements, and promotions. {% endstep %} {% step %} ### Share the Web App with Members Members access the web app, log in with their registered mobile number, and are redirected to the customized homepage that reflects the merchant's configuration in real time. {% endstep %} {% step %} ### Members Pay Their Bills Members select the billing widget, enter their Flexibill Member or Customer ID, view their unpaid invoices, and complete payment using DOKU Wallet or another payment method. {% hint style="info" %} 🎬 **Want to see it in action?** Try the interactive demo before diving into the details. [Launch Demo](https://app.supademo.com/demo/cml7nirq600692u0i0hzn8l39?utm_source=link) {% endhint %} {% endstep %} {% endstepper %} ## Capability Details {% tabs %} {% tab title="Section Configuration" %} ### Section Configuration The Section Configuration allows merchants to manage and adjust the content displayed on the application's homepage — adding, editing, and organizing sections to match their business needs. ### Section Availability | Item | Detail | | ------------------------------- | -------------------------------------------------------------- | | **Total section slots** | 5 slots | | **Merchant-customizable slots** | Up to 3 sections | | **Reserved by DOKU** | 2 sections — **DOKU Biller** and **DOKU Banner** | | **Quota indicator** | Shown as *e.g. 4/5* — sections generated out of total capacity | Use the **Add Section** button to create a new section and assign it to an available slot. ### Section Types There are two supported section types: **1. Widget** A Widget section enables merchants to configure navigational or functional quick-access components. Each Widget section can include: * A section icon * A section link * Integration with DOKU Subscription and Billing services **2. Banner** A Banner section allows merchants to add visual content to the homepage — ideal for marketing messages or visual highlights. Supported content includes: * News * Announcements * Promotions ### Creating a Section {% stepper %} {% step %} ### Add a Section Click **Add Section** to open the section creation form. Select the **section type** (Widget or Banner) and assign the section to an available slot. **Section Naming Rules** Section names can be customized by the merchant with a maximum of **64 characters**. {% endstep %} {% step %} ### Add Section Content Configure the content for the section based on its type. **Widget Section — Content Requirements**
FieldRequirement
Display BannerRequired. Formats: JPEG, PNG, JPG. Max file size: 5 MB. Min resolution: 300 × 300 px
Content TypeChoose one: Long Text (free text up to 2,000 characters for announcements or news) or Link (embedded URL in https format)
{% endstep %} {% step %} ### Apply Section After configuring the section and its content, click **Apply** to publish it to the homepage. {% hint style="info" %} Section changes can be applied once every **10 minutes**. {% endhint %} {% endstep %} {% endstepper %} {% endtab %} {% tab title="General Configuration" %} ### General Configuration The General Configuration allows merchants to manage their merchant identification and brand appearance. There are two tabs: **Appearance** and **Document**. ### 1. Appearance Customize the visual identity of the application:
FieldRequirement
Display NameUp to 32 characters
Display LogoFormats: JPEG, JPG, PNG. Max file size: 1 MB. Min resolution: 300 × 300 px
Primary ColorCustom color selection
Secondary ColorCustom color selection
FontFont style selection
### 2. Document Upload documents that members may need to access within the app:
DocumentFormat
Terms and ConditionsPDF
Privacy PolicyPDF
About UsPDF
{% endtab %} {% tab title="Archived Configuration" %} ### Archived Configuration The Archived Configuration stores all previously removed sections and their content. Items are organized by their original section and the content that belongs to it. Merchants can **restore** an entire section or individual section content from the archive. ### Restoration Rules
ActionRule
Restore a sectionAll content within that section is also restored. The section can only be restored if there is still an available slot on the homepage
Restore section contentThe content is added back to the current active section on the homepage
{% endtab %} {% endtabs %} ## Customer Journey: Pay Your Bill This section describes the end-to-end experience a member goes through when accessing the Billing Portal app and completing a bill payment. {% stepper %} {% step %} ### Login The member opens the DOKU e-Wallet app and accesses the **Billing Presentment** feature. They enter their registered mobile number and receive an **OTP verification code** via SMS or WhatsApp to sign in. {% endstep %} {% step %} ### Register *(New Members Only)* If the mobile number is not yet registered, the member is redirected to the registration page and must provide:
FieldRequirement
EmailMust follow standard email format
Full NameAs per National ID (KTP)
Upon successful registration, the member is prompted to create a **6-digit Security PIN**, which is used to authorize all DOKU Wallet payments and transactions. {% endstep %} {% step %} ### Homepage After a successful login or registration, the member is redirected to the **Homepage**. The interface dynamically reflects the custom configurations set in the Merchant Dashboard — including the merchant's branding, sections, and integrated billing widget. {% endstep %} {% step %} ### Inquiry The member selects the **billing widget** on the homepage to view their outstanding bills. 1. Enter a registered **Flexibill Member ID** or **Customer ID** 2. Once the ID is verified, all unpaid invoices are displayed instantly 3. Select the bills to pay — the **oldest bills must be paid first** to keep the account current 4. After selecting bills, the member is directed to the **Payment Confirmation** page for a final review
{% endstep %} {% step %} ### Payment Payment can be completed using two methods: **a. DOKU Wallet** The member selects **DOKU Wallet** and enters their **transaction PIN** to authorize the payment.
ScenarioWhat Happens
Valid PINMember is redirected to the Payment Successful page
Incorrect PIN × 3Account is automatically locked for security purposes
**b. Other Payment Methods** The member selects **Other Payment Methods** to see a list of available options as configured in the Merchant Dashboard:
MethodOptions
e-WalletDOKU e-Wallet
CardsDebit / Credit Card
QRISQRIS
Bank TransferVirtual Account — Permata Bank, BSI, Danamon, BRI, DOKU VA (Other Banks)
Regardless of the chosen method, the member is redirected to the **Transaction Success Page** upon successful payment. {% endstep %} {% step %} ### Transaction Success After payment is processed, the member sees the **Transaction Detail** page showing:
FieldDescription
Total PaidThe total amount successfully charged
Member Name & IDThe member's name and reference number
Transaction Date & TimeTimestamp of the payment
Reference NumberUnique transaction reference (e.g., BPT-20260413105020-474430)
Bills PaidSummary of bills settled — with count of Failed, Processing, and Paid
Invoice DetailPer-invoice breakdown with collection name, invoice number, date, and amount
{% endstep %} {% endstepper %} ## Merchant & Customer Experience ### Merchant View * Configure homepage sections, brand identity, and documents at **Billing Portal → Section Configuration / General Configuration** * Manage archived sections and restore content at **Billing Portal → Archived Configuration** * Payment methods available to members are configured from the Merchant Dashboard ### Member View * Access the Billing Portal app * Log in with a registered mobile number and OTP — or register as a new member * View and pay outstanding invoices by entering their Flexibill Member or Customer ID * Pay using DOKU Wallet (PIN-authorized) or other available payment methods * View transaction detail and invoice breakdown after each successful payment ## Terms & Conditions * Merchants can add up to **3 customizable sections** out of 5 total homepage slots — 2 slots are reserved for DOKU (DOKU Biller and DOKU Banner) * Section names are limited to **64 characters** * Widget section display banners must be JPEG, PNG, or JPG format — maximum 5 MB, minimum resolution 300 × 300 px * Long Text content type supports up to **2,000 characters** * Section changes can be applied once every **10 minutes** * Display logo must be JPEG, JPG, or PNG — maximum 1 MB, minimum resolution 300 × 300 px * Document uploads (Terms and Conditions, Privacy Policy, About Us) must be in **PDF** format * Members must pay the **oldest outstanding invoice first** before settling newer ones * An incorrect DOKU Wallet PIN entered **3 times** will automatically lock the account ## FAQ
How many sections can a merchant add to the homepage? Merchants can add up to **3 customizable sections**. The remaining 2 out of 5 total slots are reserved by DOKU for DOKU Biller and DOKU Banner.
Can a removed section be recovered? Yes. All removed sections and their content are stored in the **Archived Configuration**. Merchants can restore an entire section (along with all its content) or restore individual content items. A section can only be restored if there is still an available slot on the homepage.
How often can section changes be applied? Section changes can be applied once every **10 minutes**.
Can members choose which bills to pay? Members can select which invoices to settle, but the **oldest outstanding bills must be paid first**. The system enforces this order to keep the member's account current.
What happens if a member enters the wrong DOKU Wallet PIN? If an incorrect PIN is entered **3 times consecutively**, the DOKU Wallet account is automatically locked for security purposes.
What payment methods are available in the Billing Portal? Payment methods are configured by the merchant in the Merchant Dashboard. Available options include DOKU e-Wallet, Virtual Account (various banks), QRIS, and Cards.
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.doku.com/subscription-and-billing/flexibill/billing-portal.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.