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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.digitalriver.com/digital-river-api/developer-resources/digitalrivercheckout.js-reference/digitalrivercheckout-object/components/wallet-component.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.