## Express Wallet Buttons

Express Wallet Buttons allow to integrate with E-Wallets in an "express" operational mode, allowing to show the respective button in product or cart pages.

The general flow to use the widgets is:
1. Configure your gateway and connect it using Paydock API or Dashboard.
2. Create a container in your site
```html
<div id="widget"></div>
```
3. Initialize the specific WalletButtonExpress, providing your Access Token (preferred) or Public Key, plus required and optional meta parameters for the wallet in use. The general format is:
```js
new paydock.{Provider}WalletButtonExpress(
    "#widget",
    accessTokenOrPublicKey,
    gatewayId,
    gatewaySpecificMeta,
);
```
4. (optional) If the screen where the button is rendered allows for cart/amount changes, call `setMeta` method to update the meta information.
5. Handle the `onClick` callback, where you should call your server, initialize the wallet charge via `POST v1/charges/wallet` and return the wallet token.
6. Handle the `onPaymentSuccessful`, `onPaymentError` and `onPaymentInReview` (if fraud is applicable) for payment results.

### Supported Providers
1. [Apple Pay](#apple-pay-wallet-button-express)
2. [Paypal](#paypal-wallet-button-express)

### Apple Pay Wallet Button Express

A full description of the meta parameters for [ApplePayWalletButtonExpress](#ApplePayWalletButtonExpress) meta parameters can be found [here](#ApplePayWalletMeta). Below you will find a fully working html example.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>Payment using PayDock ApplePayWalletButtonExpress!</h2>
    <div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
    let button = new paydock.ApplePayWalletButtonExpress(
        "#widget",
        accessTokenOrPublicKey,
        gatewayId,
        {
            amount_label: 'TOTAL',
            country: 'AU',
            currency: 'AUD',
            amount: 15.5,
            // merchant_capabilities: ['supports3DS', 'supportsEMV', 'supportsCredit', 'supportsDebit'],
            // supported_networks: ['visa', 'masterCard', 'amex', 'chinaUnionPay', 'discover', 'interac', 'jcb', 'privateLabel'],
            // required_billing_contact_fields: ['email', 'name', 'phone', 'postalAddress'], // phone and email do not work according to relevant testing
            // required_shipping_contact_fields: ['email', 'phone'], // Workaround to pull phone and email from shipping contact instead - does not require additional shipping address information
            // supported_countries: ["AU"],
            // style: {
            //     button_type: "buy",
            //     button_style: "black",
            // },
        }
    );

    button.setEnv('sandbox');

    button.onUnavailable(function() {
        console.log("Button not available");
    });

    button.onError(function(error) {
        console.log("On Error Callback", error);
    });

    button.onPaymentSuccessful(function(data) {
        console.log("Payment successful");
        console.log(data);
    });

    button.onPaymentError(function(err) {
        console.log("Payment error");
        console.log(err);
    });

    button.onPaymentInReview(function(data) {
        console.log("The payment is on fraud review");
        console.log(data);
    });

    button.onClick(async (data) => {
        console.log("Button clicked", data);

        const responseData = await fetch('https://your-server-url/initialize-wallet-charge');
        const parsedData = await responseData.json();
        return parsedData.resource.data.token;
    });

    button.onCheckoutClose(() => {
        console.log("Checkout closed");
    });

    button.load();
</script>
</html>
```

### Paypal Wallet Button Express
A full description of the meta parameters for [PaypalWalletButtonExpress](#PaypalWalletButtonExpress) meta parameters can be found [here](#PaypalWalletMeta). Below you will find a fully working html example.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h2>Payment using PayDock PaypalWalletButtonExpress!</h2>
    <div id="widget"></div>
</body>
<script src="https://widget.paydock.com/sdk/latest/widget.umd.min.js" ></script>
<script>
    let button = new paydock.PaypalWalletButtonExpress(
        "#widget",
        accessTokenOrPublicKey,
        gatewayId,
        {
            amount: 15.5,
            currency: 'AUD',
            pay_later: false,
            standalone: false,
            capture: true,
            // style: {
            //     layout: 'horizontal', // or 'vertical'
            //     color: 'gold', // or 'blue', 'silver', 'black', 'white'
            //     shape: 'rect', // or 'pill', 'sharp'
            //     borderRadius: 5,
            //     height: 40,
            //     disableMaxWidth: false,
            //     label: 'paypal', // or 'checkout', 'buynow', 'pay', 'installment'
            //     tagline: true,
            //     messages: {
            //         layout: 'text', // or 'flex'
            //         logo: {
            //             type: 'primary', // or 'alternative', 'inline', 'none'
            //             position: 'left', // or 'right', 'top'
            //         },
            //         text: {
            //             color: 'black', // or 'white', 'monochrome', 'grayscale'
            //             size: 10, // or 11, 12, 13, 14, 15, 16
            //             align: 'left', // or 'center', 'right'
            //         },
            //         color: 'blue', // or 'black', 'white', 'white-no-border', 'gray', 'monochrome', 'grayscale'
            //         ratio: '1x1', // or '1x4', '8x1', '20x1'
            //     },
            // }
        }
    );

    button.setEnv('sandbox');

    button.onUnavailable(function() {
        console.log("Button not available");
    });

    button.onError(function(error) {
        console.log("On Error Callback", error);
    });

    button.onPaymentSuccessful(function(data) {
        console.log("Payment successful");
        console.log(data);
    });

    button.onPaymentError(function(err) {
        console.log("Payment error");
        console.log(err);
    });

    button.onPaymentInReview(function(data) {
        console.log("The payment is on fraud review");
        console.log(data);
    });

    button.onClick(async (data) => {
        console.log("Button clicked", data);

        const responseData = await fetch('https://your-server-url/initialize-wallet-charge');
        const parsedData = await responseData.json();
        return parsedData.resource.data.token;
    });

    button.onCheckoutClose(() => {
        console.log("Checkout closed");
    });

    button.load();
</script>
</html>
```
