带有 vue-head 的 Vue PayPal 实现，paypal 未定义 [英] Vue PayPal implementation with vue-head, paypal not defined

问题描述

我正在尝试通过 vue-head(https://www.npmjs.com/package/vue-head) 在我的组件中，但我不断收到此错误:

I'm trying to add the paypal sdk via vue-head(https://www.npmjs.com/package/vue-head) in my component but I keep getting this error:

挂载钩子错误:ReferenceError: paypal is not defined"

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

What am I doing wrong here? Is the SDK simply not loading before mounted?

有没有更好的方法来实现这一点?有没有人有他们在 vue 中实现 paypal 的例子?任何帮助将不胜感激.

Is there a better way to accomplish this? Does anyone have an example of their paypal implementation in vue? Any help would be greatly appreciated.

此外，如果我包含脚本标签服务器端(rails)然后尝试在 vue 中访问 paypal，我会看到此错误:找不到框架的驱动程序:[object Object]

edit: Also if I include the script tag server side (rails) then try to access paypal in vue I see this error: 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:我尝试在我的挂载钩子中添加脚本，如下所示:

edit2: I tried adding the script in my mounted hook like this:

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.

I can see the script in the head tag in the dev console but paypal still is not defined.

推荐答案

对于尝试在 Vue 组件中实现 PayPal 的任何其他人:

For anyone else who is trying to implement PayPal in a Vue component:

<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 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！