# 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](https://docs.digitalriver.com/digital-river-api/payments/supported-payment-methods) for a list of payments the component supports.
{% endhint %}

You'll need to implement this component unless your checkout only uses the [wallet component](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/wallet-component)(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](https://docs.digitalriver.com/digital-river-api/payments/psd2-and-sca) 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[]`](https://docs.digitalriver.com/digital-river-api/payments/payment-sources).

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2FfN7kl3QgsZTDEFAxyjYC%2Fsaved%20payment%20methods.png?alt=media&#x26;token=80d8b091-acd7-44b9-91df-74e2d6240b9b" alt=""><figcaption></figcaption></figure>

### 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](https://docs.digitalriver.com/digital-river-api/payments/payment-sources#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](https://docs.digitalriver.com/digital-river-api/integration-options/checkouts/creating-checkouts/selling-entities).

If you [save your consents in Digital River Dashboard](https://docs.digitalriver.com/digital-river-api/administration/dashboard/settings/prebuilt-checkout), 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](https://docs.digitalriver.com/digital-river-api/integration-options/low-code-checkouts/handling-completed-checkout-sessions#determine-what-disclosures-customers-accepted), you can [configure a webhook](https://docs.digitalriver.com/digital-river-api/order-management/events-and-webhooks-1/webhooks/creating-a-webhook) to listen for the event with a `type` of [`checkout_session.order.created`](https://docs.digitalriver.com/digital-river-api/order-management/events-and-webhooks-1/events-1/event-types#checkout_session.order.created).
{% endhint %}

{% tabs %}
{% tab title="Digital River only disclosures" %}
If you have no [customized consents in Dashboard](https://docs.digitalriver.com/digital-river-api/administration/dashboard/settings/prebuilt-checkout), the component only displays Digital River's disclosures.

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2F3S0Rsqby0kXxFIDKhqKH%2Fno%20appended%20consents.png?alt=media&#x26;token=08d5b882-3080-4a2c-b253-e6a51cfd7980" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Combined disclosures" %}
If you [add consents in Dashboard](https://docs.digitalriver.com/digital-river-api/administration/dashboard/settings/prebuilt-checkout), the component displays your disclosures and ours.

<figure><img src="https://334437993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LqH4RJfLVLuHPXuJyTZ%2Fuploads%2Fi5TxIVJLWrVoO8rIJc1o%2Fappended%20consents.png?alt=media&#x26;token=318ad828-23f2-4921-a251-1e6ac1c24c24" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Creating the payment component

To create an instance of the payment component, pass `'payment'` to [`createComponent()`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/..#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()`](https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/..#mount-elementid).

```javascript
<div id="payment-container" style="display: block">
...
paymentComponent.mount('payment-container');
...
```