> ## Documentation Index > Fetch the complete documentation index at: https://docs.ecrypt.com/llms.txt > Use this file to discover all available pages before exploring further. # Hosted Payments ## Overview Hosted Payments gives you everything you need to accept payments online without building your own checkout page. ECRYPT hosts the payment experience for you — you configure it, brand it to match your business, and share it with customers as a button on your website or a payment link they can open from any device. The Hosted Payments section lives in the left sidebar under **Hosted Payments** and contains four areas: **Create Button**, **Buy Now**, **Appearance**, and **URL Details**. ## Create Button **Create Button** is where you build a new Buy Now button or payment link. Navigate to **Hosted Payments → Create Button** to open the form. ### Pricing | Field | Description | | - | - | | Price Entry Method | **Set fixed price** charges a set amount. **Allow buyer to input price** lets the customer enter the amount | | Amount | The fixed price for the payment | | Tax (Exclusive) | An optional tax percentage added on top of the amount | | Surcharge Type | How the surcharge is calculated (Percentage) | | Surcharge | The surcharge rate to apply (up to 3.00%) | ### Settings | Field | Description | | - | - | | Invoice Number | Check **Allow customer to enter invoice number** to let the customer provide a reference number at checkout | | Payment Methods | Choose **Allow Credit Card** and/or **Allow ACH** | | Expiration | **Never** keeps the link active indefinitely. **One time payment** deactivates the link after the first successful payment. **At specific date/time** sets a hard expiry date | | Expiration Date | The date the link stops accepting payments (when using At specific date/time) | ### Design Customize how the Buy Now button looks on your website. A live **Preview** updates as you make changes. | Field | Description | | - | - | | Button Text | The label on the button (default: "Buy Now") | | Font Size | Button text size in pixels | | Button Text Color | Hex color for the button label | | Google Font | Choose a Google Font for the button text | | Background Color | The button fill color | | Border Radius | Rounds the button corners (in pixels) | | Border Color | The color of the button border | | Font Type | Text style (Normal, Italic, etc.) | | Font Weight | Text weight (e.g., 400 for regular, 700 for bold) | Click **Generate Button** to create the button and payment link — it will appear in your **Buy Now** list. Click **Cancel** to discard. ## Buy Now **Buy Now** is your library of all the buttons and payment links you have created. Navigate to **Hosted Payments → Buy Now** to see the full list. Each row shows the **Date Created** and the **Amount** for that button. The **Action** column gives you four options: | Icon | Action | | - | - | | Eye | Preview the hosted checkout page as a customer would see it | | Code brackets | Get the embed code to place the button on your website | | Link | Copy the direct payment link URL to share with customers | | Trash | Delete the button and payment link permanently | Use **Filters** to search or narrow the list, and **Clear Filters** to reset. The **Rows per page** dropdown and page arrows let you navigate through larger lists. ## Appearance **Appearance** controls how your hosted checkout page looks to customers. Changes here apply to all of your Buy Now buttons and payment links. Navigate to **Hosted Payments → Appearance**. The page has three content tabs — **Invoice**, **Form**, and **Mobile** — each with its own color settings. A live preview on the right updates as you make changes, with **Desktop**, **Tablet**, and **Mobile** preview tabs. ### Invoice tab Controls the invoice/order summary panel on the left side of the checkout page. | Setting | Description | | - | - | | Invoice Background Color | Background of the invoice panel | | Invoice Text Color | Body text color | | Invoice Accent Color | Hyperlinks and highlighted elements | | Invoice Border Color | Divider and border lines | | Invoice Button Background Color | Action button color on the invoice side | | Invoice Button Text Color | Text color on the invoice button | | Invoice Icon Theme | Icon style: Dark or Light | ### Form tab Controls the payment form on the right side of the checkout page where customers enter their card details. | Setting | Description | | - | - | | Form Background Color | Payment form background | | Form Text Color | Body text in the form | | Form Title Color | Section heading color | | Form Accent Color | Active states and checked elements | | Form Border Color | Input field borders | | Form Button Background Color | Submit/Continue button background | | Form Button Text Color | Submit/Continue button text | | Form Input Text Color | Text inside input fields | | Form Label Color | Field label text | | Form Input Background Color | Input field background | | Alert Color | Error and alert message color | ### Mobile tab Controls the checkout appearance on mobile devices, where the layout shifts to a single-column card view. The same types of color settings apply, optimized for mobile screens. Click **Save** at the bottom of the preview panel to apply all changes across all three tabs. Each color field also has a reset icon to revert that individual setting to its default. ## URL Details **URL Details** sets two global URLs that apply to every hosted checkout and payment link on your account. Navigate to **Hosted Payments → URL Details**. | Field | Description | | - | - | | Finish URL | The page customers are redirected to after a successful payment — typically a Thank You or order confirmation page on your website | | Terms And Conditions URL | A link to your terms and conditions or refund policy, shown on the checkout form so customers can review it before paying | Click **Save** to apply the changes. ## Tips and Best Practices **Set your URL Details first.** Before sharing any payment links, configure your Finish URL and Terms and Conditions URL so every checkout ends cleanly and professionally. **Brand before you share.** Set up your Appearance to match your business before generating buttons. A consistent, branded checkout builds trust with customers. **Use One time payment for single-use links.** Set Expiration to One time payment when sending a specific payment request — the link deactivates after the first successful payment and cannot be reused. **Use Allow buyer to input price for flexible amounts.** Ideal for donations, deposits, or any situation where the amount varies by customer. **Embed vs. link.** Use the embed code (code brackets icon) to add a Buy Now button on your website. Use the link icon to copy a URL you can paste into an email, text, or social media post. **Keep your Buy Now list tidy.** Delete buttons and links you are no longer using to prevent confusion if old links are found or shared. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.