payment modifier brings error

arosiek commented 7 years ago

why the following code:

function onBuyClicked() {
            if (!window.PaymentRequest) {
                // PaymentRequest API is not available. Forwarding to
                // legacy form based experience.
                location.href = '/checkout';
                return;
            }

            // Supported payment methods
            var supportedInstruments = [{
                supportedMethods: ['basic-card'],
                data: {
                    supportedNetworks: [
                        'visa', 'mastercard', 'amex', 'discover',
                        'diners', 'jcb', 'unionpay'
                    ]
                }
            }];

            // Checkout details
            var details = {
                displayItems: [{
                    label: 'Original donation amount',
                    amount: { currency: 'USD', value: '65.00' }
                }, {
                    label: 'Friends and family discount',
                    amount: { currency: 'USD', value: '-10.00' }
                }],
                total: {
                    label: 'Total due',
                    amount: { currency: 'USD', value : '55.00' }
                }
            };

            // Credit card incurs a $3.00 processing fee.
            const creditCardFee = {
                label: "Credit card processing fee",
                amount: { currency: "USD", value: "3.00" },
            };

            // Modifiers apply when the user chooses to pay with
            // a credit card.
            const modifiers = [
                {
                    additionalDisplayItems: [creditCardFee],
                    supportedMethods: "basic-card",
                    total: {
                        label: "Total due",
                        amount: { currency: "USD", value: "68.00" },
                    },
                    data: {
                        supportedTypes: "credit",
                    },
                },
            ];
            Object.assign(details, { modifiers });

            // 1. Create a `PaymentRequest` instance
            var request = new PaymentRequest(supportedInstruments, details);

            // 2. Show the native UI with `.show()`
            request.show();
        }

brings error:

test.html:509 Uncaught TypeError: Failed to construct 'PaymentRequest': The provided value cannot be converted to a sequence.
    at onBuyClicked (test.html:509)
    at HTMLButtonElement.onclick (test.html:427)

according to https://www.w3.org/TR/payment-request/#x2.2.2-conditional-modifications-to-payment-request it should works.

arosiek commented 7 years ago

modifiers is the problematic part.

arosiek commented 7 years ago

my chrome version is 61.0.3163.100

rsolomakhin commented 7 years ago

supportedMethods: "basic-card" -- this is the problem. It's not 100% implemented everywhere yet. Please use supportedMethods: ["basic-card"] for now.

On Wed, Oct 4, 2017 at 11:34 AM, Andrzej Rosiek notifications@github.com wrote:

why the following code:

function onBuyClicked() { if (!window.PaymentRequest) { // PaymentRequest API is not available. Forwarding to // legacy form based experience. location.href = '/checkout'; return; }
        // Supported payment methods
        var supportedInstruments = [{
            supportedMethods: ['basic-card'],
            data: {
                supportedNetworks: [
                    'visa', 'mastercard', 'amex', 'discover',
                    'diners', 'jcb', 'unionpay'
                ]
            }
        }];

        // Checkout details
        var details = {
            displayItems: [{
                label: 'Original donation amount',
                amount: { currency: 'USD', value: '65.00' }
            }, {
                label: 'Friends and family discount',
                amount: { currency: 'USD', value: '-10.00' }
            }],
            total: {
                label: 'Total due',
                amount: { currency: 'USD', value : '55.00' }
            }
        };

        // Credit card incurs a $3.00 processing fee.
        const creditCardFee = {
            label: "Credit card processing fee",
            amount: { currency: "USD", value: "3.00" },
        };

        // Modifiers apply when the user chooses to pay with
        // a credit card.
        const modifiers = [
            {
                additionalDisplayItems: [creditCardFee],
                supportedMethods: "basic-card",
                total: {
                    label: "Total due",
                    amount: { currency: "USD", value: "68.00" },
                },
                data: {
                    supportedTypes: "credit",
                },
            },
        ];
        Object.assign(details, { modifiers });

        // 1. Create a `PaymentRequest` instance
        var request = new PaymentRequest(supportedInstruments, details);

        // 2. Show the native UI with `.show()`
        request.show();
    }
brings error:

test.html:509 Uncaught TypeError: Failed to construct 'PaymentRequest': The provided value cannot be converted to a sequence. at onBuyClicked (test.html:509) at HTMLButtonElement.onclick (test.html:427)

according to https://www.w3.org/TR/payment-request/#x2.2.2-conditional- modifications-to-payment-request it should works.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/w3c/payment-request/issues/637, or mute the thread https://github.com/notifications/unsubscribe-auth/AA-yGRXnQ02nw1MJlTJRk7uT4X6pSSi7ks5so6WWgaJpZM4Ptz-t .