Wallet component

Gain a better of how to create express checkouts using the wallet component

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

• PayPal

• Apple Pay

• Google Pay

When customers click any of the component's buttons, they're redirected to that payment provider's interface. 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[], shipTo, and/or billTo to the checkout-session.

Certain browsers don't support some express payment methods. For example, the wallet component doesn't render Apple Pay in Chrome.

If customers initiate an express checkout, and items[] in the checkout-session contains physical products, then the customer's shipping method selection is collected within the payment component. 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().

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().

<div id="wallet-container" style="display: block">
...
walletComponent.mount('wallet-container');
...