# Custom Payment Page Tools

Source: https://docs.gocardless.com/docs/developer-resources/custom-payment-page-tools

# Custom Payment Page Tools

Custom Payment Page Tools is a collection of tools designed to minimise effort in building your own payments UI powered by GoCardless billing APIs. They can be effortlessly utilised when developing a custom web UI with different JS frameworks or in mobile development with WebViews.

At the moment the following tools are available:

- `compliance.js`

## Compliance.js

> **Warning:**
> Before GoCardless initiates a payment for your customer, we are legally required by **the UK
>   Payment Services Regulations** to provide them with a copy of a payment service contract governing
>   that service. This is the `Payer Terms of Use` doc which is linked inside `Compliance.js`.
>   Additionally, when obtaining your customer's personal data, we are legally required by **the UK
>   General Data Protection Regulation** to provide them with certain privacy information. This is the
>   `Privacy Notice` doc which is linked inside `Compliance.js`. When you build your own UI,
>   GoCardless is not able to directly provide these legal documents to the payer. So, to ensure that
>   we do not breach any law, we are not able to sign off on your UI unless you have added
>   `Compliance.js`.

It adds elements to the HTML layout of custom payment pages to make the UI compliant. For example, for bank authorisation, you must append the GoCardless legal note with Payer Terms of Use and Privacy Notice links before starting the bank authorisation process for Pay By Bank or Variable Recurring Payments in the UK.

> **Info:**
> Available at `https://custom-payment-page-tools.gocardless.com/compliance.js`

### Getting started

Include `compliance.js` with a script tag in the head section of your `index.html`:

```html
...
  ```

Once the script is loaded, your application can use the `GoCardlessCompliance` client, as it is added globally in `window`. Let's now call `render`:

```javascript
window.GoCardlessCompliance.render("BRQ123", "bank-authorisation");
```

The `render` method requires the following parameters:

1. A valid `Billing Request Id` to display elements and content dependent on the bank scheme.
2. `namespace` to display elements and content relevant to a particular step in the flow. Available options: `"bank_authorisation"`.

### Testing

To test the integration with GoCardless Sandbox before going live, include `compliance.js` with the `sandbox` value in the `environment` attribute. If nothing is passed, the production environment will be used.

```html
```

### Render options

You can pass the `options` object to define the position of the compliance elements in your layout or change basic styles for the light/dark mode.

| Name     | Type                | Default                                                             | Description                                                                |
| -------- | ------------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| parentId | string              | The component will be attached as the last child of `document.body` | Id of an existing HTML element in the document to render the component in. |
| theme    | `"light"`, `"dark"` | `"light"`                                                           | The colour theme                                                           |

```javascript
const options = ;

window.GoCardlessCompliance.render("BRQ123", "bank-authorisation", options);
```

### Using with JS frameworks

We suggest separating the `GoCardlessCompliance.render` call into an independent component to be used across your application. We also recommend generating unique identifiers for the containers where compliance elements are supposed to be rendered for each instance.

```angular

```

```vue

```

```svelte

```

```react

```

```reactnative

```
    );
}`,
    },
  ]}
/>

### Error Handling

| Error                                                                      | Reasons                                                                                                                                                                      |
| -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| _A valid billingRequestId is required_                                     | You haven't passed a Billing Request Id in the `render` method.                                                                                                              |
| _Namespace must be one of ..._                                             | You haven't passed a valid namespace in the `render` method — check the available options above.                                                                             |
| _The parent element doesn't exist in the document_                         | We haven't found any element in your `document.body` with the id passed in `options` — make sure that it is attached to the DOM tree before calling the `render` method.     |
| _GoCardless API returned an error when trying to get payment flow details_ | We weren't able to get payment flow details to show relevant elements: very likely you have used an invalid Billing Request Id or a valid one but for the wrong environment. |

## What's next?

  
#### [Billing Requests](/docs/collect-payments/setting-up-mandates)

Learn how Billing Requests power custom payment pages.

  
#### [GoCardless CLI](/docs/developer-resources/gc-cli)

Build, test, and manage your GoCardless integration from the terminal.