# Invoice hosted page

An invoice hosted page is a web page that you can embed into your website to display the payment details of a particular invoice to a customer. 

There is a `hosted_page_url` attribute in the invoice details that contains its hosted page URL.<br>

<figure><img src="/files/rNoNLeBrmg9zOiI3RLgv" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="API response example" %}

```javascript
{
  "id": "cc75b958-5780-4b34-a33a-cf63b349fbab",
  "custom_id": "209584732",
  "status": "new",
  "status_context": null,
  "address": "2NG8f2EVxN8XJ4DHriRt9q9LkdVCpQZ2UGB",
  "network": "bitcoin",
  "uri": "bitcoin:2NG8f2EVxN8XJ4DHriRt9q9LkdVCpQZ2UGB?amount=0.02038328",
  "price_amount": "100.0",
  "price_currency": "EUR",
  "pay_amount": "0.02038328",
  "pay_currency": "BTC",
  "fee": "1.0",
  "fee_currency": "EUR",
  "paid_amount": "0.0",
  "exchange": {
    "pair": "BTCEUR",
    "rate": "4905.9838",
    "fee": "0.0",
    "fee_currency": "EUR"
  },
  "transactions": [],
  "name": "invoice name",
  "description": "invoice description",
  "metadata": {
    "foo": "bar"
  },
  "success_redirect_url": null,
  "hosted_page_url": "https://business-hosted.cryptopay.me/invoices/cc75b958-5780-4b34-a33a-cf63b349fbab",
  "created_at": "2019-05-02T13:56:56+00:00",
  "expires_at": "2019-05-02T14:06:56+00:00"
}
```

{% endtab %}
{% endtabs %}

## Settings

You can apply different settings to hosted pages appearance like a specific locale by adding its acronym to the end of the `hosted_page_url` value via a query parameter. For example:

[`https://business-hosted.cryptopay.me/invoices/b5cb2b8a-aa26-4b6b-b578-0fcc46c1f3a0` + `?locale=jp`](https://business-hosted.cryptopay.me/invoices/b5cb2b8a-aa26-4b6b-b578-0fcc46c1f3a0?locale=jp)

Below is a list of variables you can use.

| Parameter    | Type    | Description                                                                                                                                                                                                                                                                                                          |
| ------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| locale       | string  | <p>Can be <code>en</code>, <code>de</code>, <code>fr</code>, <code>es</code>, <code>pt</code>, <code>ru</code> and <code>jp</code> which means English, German, French, Spanish, Portuguese, Russian or Japanese language. </p><p>If parameter is not set, the language will be taken from the browser settings.</p> |
| back\_button | boolean | Show/hide a back button on the page. This might be useful if you redirect customers to hosted pages. `false` if set by default                                                                                                                                                                                       |

## Transaction created

As soon as a sender broadcasts the transaction, you'll receive a callback with the following attributes:

`"event": "transaction_created"`

## Status changed

You'll receive one more callback when the invoice changes its status to one of the final ones (`completed` or `refunded`) upon transaction confirmation:

`"event": "status_changed"`

<figure><img src="/files/1CFHmgmjynWlyOyLOsUe" alt=""><figcaption></figcaption></figure>

## Invoice expired

<figure><img src="/files/cIQXtMRPYyyF3KKk2ToR" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: 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:

```
GET https://developers.cryptopay.me/guides/invoices/invoice-hosted-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.