带有 vue-head 的 Vue PayPal 实现，未定义 paypal

Question

我正在尝试通过 vue-head(https://www.npmjs.com/package/vue-head) 在我的组件中添加 paypal sdk，但我一直收到此错误：

Error in mounted hook: "ReferenceError: paypal is not defined"

我在这里做错了什么？ SDK是不是挂载前根本没有加载？

有没有更好的方法来完成这个？有没有人有他们在 vue 中实现 paypal 的例子？任何帮助将不胜感激。

编辑：另外，如果我在服务器端包含脚本标签 (rails)，然后尝试在 vue 中访问 paypal，我会看到此错误： Could not find driver for framework: [object Object]

<template>
    <div id="paypal-button" />
</template>

<script>
import { mapState as mapConfigState } from '../scripts/store/appConfig';

export default {
    props: {
        totalPrice: {
            type: String,
            required: true,
        },
        currency: {
            type: String,
            required: true,
            'default': 'USD',
        },
        buttonStyle: {
            type: Object,
            required: false,
        },
    },
    computed: {
        ...mapConfigState({
            customer: state => state.customer,
        }),
        paypalEnvironment() {
            return (this.customer.paypalTestingMode) ? 'sandbox' : 'production';
        },
        client() {
            return {
                sandbox: this.customer.paypalClientIdSandbox,
                production: this.customer.paypalClientIdLIVE,
            };
        },
    },
    head: {
        script() {
            return [
                {
                    type: 'text/javascript',
                    src: `https://www.paypal.com/sdk/js?client-id=${this.client[this.paypalEnvironment]}`,
                },
            ];
        },
    },
    mounted() {
        const total = this.totalPrice;
        const currency = this.currency;

        paypal.Buttons.driver(
            {
                env: this.paypalEnvironment,
                client: this.client,
                style: this.buttonStyle,

                createOrder(data, actions) {
                    return actions.order.create({
                        purchase_units: [
                            {
                                amount: {
                                    value: total,
                                    currency,
                                },
                            },
                        ],
                    });
                },

                onApprove(data, actions) {
                    return actions.order.capture();
                },
            }, '#paypal-button'
        );
    },
};
</script>

edit2：我尝试像这样在挂载的挂钩中添加脚本：

let el = document.querySelector(`script[src="https://www.paypal.com/sdk/js?client-id=${this.client[this.paypalEnvironment]}"]`);
if (!el) {
    const src = `https://www.paypal.com/sdk/js?client-id=${this.client[this.paypalEnvironment]}`;
    el = document.createElement('script');
    el.type = 'text/javascript';
    el.async = true;
    el.src = src;
    document.head.appendChild(el);
}

我可以在开发控制台的 head 标签中看到脚本，但 paypal 仍未定义。

Answer 1

对于任何试图在 Vue 组件中实现 PayPal 的人：

<template>
    <div id="paypal-button" />
</template>

<script>

export default {
    mounted() {
        function loadScript(url, callback) {
            const el = document.querySelector(`script[src="${url}"]`);
            if (!el) {
                const s = document.createElement('script');
                s.setAttribute('src', url); s.onload = callback;
                document.head.insertBefore(s, document.head.firstElementChild);
            }
        }

        loadScript('https://www.paypal.com/sdk/js?client-id=sb&currency=USD', () => {
            paypal.Buttons({
                // Set up the transaction
                createOrder(data, actions) {
                    return actions.order.create({
                        purchase_units: [{
                            amount: {
                                value: '0.01',
                            },
                        }],
                    });
                },

                // Finalize the transaction
                onApprove(data, actions) {
                    return actions.order.capture().then(details => {
                        // Show a success message to the buyer
                        alert(`Transaction completed by ${details.payer.name.given_name}`);
                    });
                },

            }).render('#paypal-button');
        });
    },
};
</script>

或者你可以使用这个：https://github.com/paypal/paypal-js

带有 vue-head 的 Vue PayPal 实现，未定义 paypal

Vue PayPal implementation with vue-head, paypal not defined

paypal

vue.js