使用 PayPal checkout.js 在 NextJS 应用程序中找不到名称 'paypal'

Question

我在使用 PayPal 结账时遇到问题。 NextJS appBellow 上的 js 是错误的。

Failed to compile.

./components/PaypalBtn.tsx:5:9
Type error: Cannot find name 'paypal'.

  3 | 
  4 |     useEffect(() => {
> 5 |         paypal.Button.render({
    |         ^
  6 |             env: 'production', // Or 'production'
  7 |             style: {
  8 |                 size: 'large',
info  - Creating an optimized production build .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rdps@0.1.0 build: `next build && next export`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the rdps@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-02-07T05_15_01_435Z-debug.log

我从 ./components/PaypalBtn.tsx 调用 paypal.Button，下面是代码。

import React, { useEffect } from 'react'
function PaypalBtn(props: any) {

    useEffect(() => {
        paypal.Button.render({
            env: 'production', // Or 'production'
            style: {
                size: 'large',
                color: 'blue',
                shape: 'pill',
                label: 'checkout',
                tagline: 'true'
            },
            // Set up the payment:
            // 1. Add a payment callback
            payment: (data, actions) => {
                // 2. Make a request to your server
                return actions.request.post('../api/create-payment/' + props.ost)
                    .then(function (res) {
                        // 3. Return res.id from the response
                        return res.id;
                    });
            },
            // Execute the payment:
            // 1. Add an onAuthorize callback
            onAuthorize: (data, actions) => {
                // 2. Make a request to your server
                return actions.request.post('../api/execute-payment/' + props.ost, {
                    paymentID: data.paymentID,
                    payerID: data.payerID
                })
                    .then(function (res) {
                        // 3. Show the buyer a confirmation message.

                    });
            }
        }, '#ppbtn');
    })
    return (
        <div>
            <div id="ppbtn"></div>
        </div>
    )
}

export default PaypalBtn;

而且我已经将 checkout.js 包含在 _document.tsx 中。

import Document, { Html, Head, NextScript, Main } from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
    static async getInitialProps(ctx: any) {
        const sheet = new ServerStyleSheet()
        const originalRenderPage = ctx.renderPage

        try {
            ctx.renderPage = () =>
                originalRenderPage({
                    enhanceApp: (App: any) => (props: any) =>
                        sheet.collectStyles(<App {...props} />),
                })

            const initialProps = await Document.getInitialProps(ctx)
            return {
                ...initialProps,
                styles: (
                    <>
                        {initialProps.styles}
                        {sheet.getStyleElement()}
                    </>
                ),
            }
        } finally {
            sheet.seal()
        }
    }
    render() {
        return (
            <Html lang='id-ID'>
                <Head />
                <body>
                    <Main />
                    <NextScript />
                    <script
                        src="https://www.paypalobjects.com/api/checkout.js"> // Required. Replace SB_CLIENT_ID with your sandbox client ID.
                    </script>
                </body>
            </Html>
        )
    }
}

但是，当我尝试使用 javascipt(jsx) 而不是 typescript(tsx) 时，它工作正常，那么如何在 typescipt(tsx) 上解决这个问题？

Answer 1

checkout.js 是旧版本的 PayPal JS SDK。以上是旧代码。不管你能否让它工作，你都应该使用当前的集成：https://developer.paypal.com/docs/business/checkout/configure-payments/single-page-app/#how-it-works

使用 PayPal checkout.js 在 NextJS 应用程序中找不到名称 'paypal'

Cannot find name 'paypal' in NextJS app using PayPal checkout.js

paypal

typescript

reactjs

next.js