> For the complete documentation index, see [llms.txt](https://docs.digitalriver.com/digital-river-api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/payment-component.md).
# 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