# Payment component
The payment component displays transaction-applicable payment methods and then processes the customer's selection.
{% hint style="info" %}
Refer to [Supported payment methods](/digital-river-api/payments/supported-payment-methods.md) for a list of payments the component supports.
{% endhint %}
You'll need to implement this component unless your checkout only uses the [wallet component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/wallet-component.md)(plus the mandatory compliance component).
To use [the component's features](#features), you'll need to [create it](#creating-the-payment-component) and [mount it](#mounting-the-payment-component).
## Features
After customers make a selection, the payment component can, when necessary, redirect customers to payment providers and handle [PSD2/SCA](/digital-river-api/payments/psd2-and-sca.md) requirements.
The component also has the capability to:
* [Present saved payment methods](#saved-payment-options)
* [Save payment methods for future purchases](#save-a-payment-method-for-future-purchases)
* [Display customized consents](#custom-consents)
### Saved payment options
The component can display a customer's saved payment methods for convenience purposes.
To activate this feature, you need to pass `customerId` in the [create checkout session request](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Drop-in-Checkout-Sessions/operation/createDropInCheckoutSession). Digital River then determines whether the referenced customer exists, and, if it does, retrieves and displays its transaction-applicable payment [`sources[]`](/digital-river-api/payments/payment-sources.md).
### Save a payment method for future purchases
The component can ask customers whether they'd like to save a payment method for future purchases.
You must pass `customerId` in the [create checkout session request](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Drop-in-Checkout-Sessions/operation/createDropInCheckoutSession) to activate this feature.
{% hint style="info" %}
Digital River creates a customer if the referenced resource isn't in your account.
{% endhint %}
If the payment method selected by customers supports [reusability](/digital-river-api/payments/payment-sources.md#reusable-or-single-use), then the component asks whether they'd like to save it for future purchases. If customers opt to do so, then after Digital River creates the [source](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Sources), we save it for that [customer](https://www.digitalriver.com/docs/digital-river-api-reference/#tag/Customers).
### Custom consents
For each payment method that the component displays, customers are shown the terms of sale and the privacy policy of the transaction's designated [selling entity](/digital-river-api/integration-options/checkouts/creating-checkouts/selling-entities.md).
If you [save your consents in Digital River Dashboard](/digital-river-api/administration/dashboard/settings/prebuilt-checkout.md), they are appended to Digital River's disclosures.
The component requires customers to accept all of these terms before they can complete the purchase.
{% hint style="info" %}
To [determine what disclosures customers accepted](/digital-river-api/integration-options/low-code-checkouts/handling-completed-checkout-sessions.md#determine-what-disclosures-customers-accepted), you can [configure a webhook](/digital-river-api/order-management/events-and-webhooks-1/webhooks/creating-a-webhook.md) to listen for the event with a `type` of [`checkout_session.order.created`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/pages/okHqAQ9d1PaLPLjq6nZF#checkout_session.order.created).
{% endhint %}
{% tabs %}
{% tab title="Digital River only disclosures" %}
If you have no [customized consents in Dashboard](/digital-river-api/administration/dashboard/settings/prebuilt-checkout.md), the component only displays Digital River's disclosures.
{% endtab %}
{% tab title="Combined disclosures" %}
If you [add consents in Dashboard](/digital-river-api/administration/dashboard/settings/prebuilt-checkout.md), the component displays your disclosures and ours.
{% endtab %}
{% endtabs %}
## Creating the payment component
To create an instance of the payment component, pass `'payment'` to [`createComponent()`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components.md#createcomponent-componenttype).
```javascript
let paymentComponent;
...
paymentComponent = components.createComponent('payment');
...
```
## Mounting the payment component
To attach the payment component to your DOM, pass the `id` of its container to [`mount()`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components.md#mount-elementid).
```javascript
...
paymentComponent.mount('payment-container');
...
```
---
# 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://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/payment-component.md?ask=
```
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.