# 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');
...
```


---

# 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/wallet-component.md?ask=<question>
```

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.