Re: [w3c/payment-request] Not able to add shipping options dynamically for apple pay (#778)

Thanks @marcoscaceres - here is my test code.  When in Chrome with Google Pay, the shipping options do update when updated via the updateWith function on shippingaddresschange.  When in Safari with Apple Pay, they do not.

```

let request;
const apikey = 'apikey';
const merchantId = 'merchantid'
const domain = 'domain';
const merchantValidationUrl = 'merchantValidationUrl';

const supportedInstruments = [
    {
        supportedMethods: 'https://apple.com/apple-pay',
        data: {
            version: 3,
            merchantIdentifier: merchantId,
            merchantCapabilities: ['supports3DS', 'supportsCredit', 'supportsDebit'],
            supportedNetworks: ['amex', 'masterCard', 'visa', 'JCB', 'chinaUnionPay', 'discover', 'privateLabel'],
            countryCode: 'US',
            requiredBillingContactFields: ['postalAddress','email', 'name', 'phone'],
            requiredShippingContactFields: ['postalAddress','email', 'name', 'phone']
        },
    },
    {
        supportedMethods: 'basic-card',
        data: {
            supportedNetworks: ['visa', 'mastercard', 'amex'],
            supportedTypes: ['credit', 'debit'],
        }
    }
];

const options = {
    requestShipping: true,
};

const details = {
    displayItems: [
        {
            label: 'Example item',
            amount: {currency: 'USD', value: '1.00'}
        }
    ],
    total: {
        label: 'Total',
        amount: {currency: 'USD', value: '1.00'}
    },
    shippingOptions: [
        {
            id: 'standard',
            label: 'Standard shipping',
            amount: {currency: 'USD', value: '0.00'}
        },
        {
            id: 'express',
            label: 'Express shipping',
            amount: {currency: 'USD', value: '10.00'},
            selected: true
        }
    ]
};

function init() {
    if(window.PaymentRequest) {
        request = new PaymentRequest( supportedInstruments, details, options);
        if(window.ApplePaySession) {
            request.addEventListener('merchantvalidation', (event) => {
                validateMerchant(event.validationURL).then(function(response) {
                    event.complete(response.data);
                });
            });
        }
        request.addEventListener('shippingaddresschange', (event) => {
            event.updateWith(new Promise(function(resolve) {
                updateDetails(details, request.shippingAddress, resolve);
            }));
        });
        request.addEventListener('shippingoptionchange', (event) => {
            event.updateWith(updatedDetails);
        });
    }
}

function show() {
    request.show().then(function(paymentResponse) {
        // Here we would process the payment. For this demo, simulate immediate success:
        paymentResponse.complete('success')
            .then(function() {
                console.log('completed')
            });
    });
}

function validateMerchant(url) {
    let data = {
        validationUrl: url,
        displayName: 'displayname',
        domain: domain
    };
    const options = {
        maxRedirects: 0,
        responseType: 'json',
        timeout: 5000,
        headers: {
            'Content-Type': 'application/json',
        },
        auth: {
            username: apikey,
            password: ''
        }
    };

    const endpoint = merchantValidationUrl;

    return axios.post(endpoint, data, options);
}

function updateDetails(details, shippingAddress, callback) {
    console.log('updating details');
    let shippingOption = {
        id: '',
        label: '',
        amount: {currency: 'USD', value: '0.00'},
        selected: true,
        pending: false,
    };
    if (shippingAddress.country.toUpperCase() === 'US') {
        if (shippingAddress.region === 'CA') {
            shippingOption.id = 'californiaFreeShipping';
            shippingOption.label = 'Free shipping in California';
            details.total.amount.value = '55.00';
        } else {
            shippingOption.id = 'unitedStatesStandardShipping';
            shippingOption.label = 'Standard shipping in US';
            shippingOption.amount.value = '5.00';
            details.total.amount.value = '60.00';
        }
        details.shippingOptions = [shippingOption];
        delete details.error;
    } else {
        // Don't ship outside of US for the purposes of this example.
        shippingOption.label = 'Shipping';
        shippingOption.pending = true;
        details.total.amount.value = '55.00';
        details.error = 'Cannot ship outside of US.';
        delete details.shippingOptions;
    }
    details.displayItems.splice(1, 1, shippingOption);
    callback(details);
}

window.addEventListener('load', init);

```

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/payment-request/issues/778#issuecomment-471598564