> 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/wallet-component.md).

# Wallet component

The wallet component allows customers to initiate an express checkout using any of the following payment methods:

* [PayPal](/digital-river-api/payments/supported-payment-methods/paypal.md)
* [Apple Pay](/digital-river-api/payments/supported-payment-methods/apple-pay.md)
* [Google Pay](/digital-river-api/payments/supported-payment-methods/google-pay.md)

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

Customers are redirected to that payment provider's interface when they click any component's buttons. There, they designate a shipping and/or billing address, select a payment method, and then authorize it. If payment is successfully authorized, customers are sent back to your site, and Digital River adds the customer's payment [`sources[]`](/digital-river-api/payments/payment-sources.md), `shipTo`, and/or `billTo` to the checkout-session.

{% hint style="warning" %}
Certain browsers don't support some express payment methods. For example, the wallet component doesn't render Apple Pay in Chrome.
{% endhint %}

If customers initiate an express checkout, and [`items[]`](https://docs.digitalriver.com/digital-river-api-reference/2021-12-13/drop-in-checkout-sessions/checkout-sessions-basics#product-data) in the checkout-session containing [physical products](/digital-river-api/product-management/skus.md#how-products-are-classified-as-physical-or-digital), the customer's shipping method selection is collected within the [payment component](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/payment-component.md). As a result, if the transaction involves physical products and you're using the wallet component, your application needs to implement the payment component.

## Creating the wallet component

To create an instance of the wallet component, pass `'wallet'` to [`createComponent()`](/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components.md#createcomponent-componenttype).

```javascript
let walletComponent;
...
walletComponent = components.createComponent('wallet');
...
```

## Mounting the wallet component

To attach the wallet 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
<div id="wallet-container" style="display: block">
...
walletComponent.mount('wallet-container');
...
```
