***

title: Extend your integration
icon: plus
intro: Add features to your integration.
published: true
---------------------

For clean Markdown of any page, append .md to the page URL. For a complete documentation index, see https://docs.payroc.com/essentials/hosted-fields/llms.txt. For full documentation content, see https://docs.payroc.com/essentials/hosted-fields/llms-full.txt.

After you set up Hosted Fields to run a sale, you can extend your integration to include the following:

* [**Style your fields**](extend-your-integration/style-your-fields) - Change the look and feel of the fields to match your branding, for example, you can update the font and color of the text.
* [**Add your own fields**](extend-your-integration/add-your-own-fields) - Validate and capture other information, for example, a customer's email address.
* [**Close a session**](extend-your-integration/close-a-session) - Close an idle session of Hosted Fields if the customer navigates away from the checkout page.
* [**Save a customer's payment details**](extend-your-integration/save-a-customers-payment-details) - Save a customer's payment details as a secure token that you can use for multiple sales.
* [**Update a customer's saved payment details**](extend-your-integration/update-a-customers-payment-details) - Update a customer's payment details associated with a secure token.

<Note>
  You can run follow-on actions with our API, for example, to view a payment or to void a payment.
</Note>

## Guides

To extend your Hosted Fields integration, follow our guides:

<CardGroup cols={3}>
  <Card title="Style your fields" icon="pen-fancy" href="extend-your-integration/style-your-fields" />

  <Card title="Add your own fields" icon="table-rows-add-below" href="extend-your-integration/add-your-own-fields" />

  <Card title="Close a session" icon="xmark" href="extend-your-integration/close-a-session" />

  <Card title="Save a customer's payment details" icon="cart-plus" href="extend-your-integration/save-a-customers-payment-details" />

  <Card title="Update a customer's payment details" icon="arrow-rotate-right" href="extend-your-integration/update-a-customers-payment-details" />
</CardGroup>