如何在 paypal SDK API 上启用 CORS？

Posted 2023-02-22

【中文标题】如何在 paypal SDK API 上启用 CORS？

【英文标题】：How to enable CORS on paypal SDK API?

【发布时间】：2022-01-16 21:11:52

【问题描述】：

我正在使用 paypal SDK 来启用支付，一切正常我什至测试了代码超过 100 次，但今天我在控制台中收到以下错误：

自从我的代码工作以来，我没有更改任何内容：

<script>
let total = ' order.get_cart_total '
// Render the PayPal button into #paypal-button-container
paypal.Buttons(

    style: 
        color: 'blue',
        shape: 'pill',
        label: 'pay',
        height: 50
    ,
    // Set up the transaction
    createOrder: function (data, actions) 
        return actions.order.create(
            // ISTO É CÓDIGO ADICIONADO MAIS TARDE
            intent: 'CAPTURE',
            payer: 
                name: 
                    given_name: ` user.first_name `,
                    surname: ` user.last_name `
                
            ,
            address: 
                address_line_1: ' userAddress.street_address ',
                address_line_2: ' userAddress.apartment_address ',
                admin_area_2: ' userAddress.city ',
                admin_area_1: ' userAddress.state ',
                postal_code: ' userAddress.zip ',
                country_code: ' userAddress.country ',
            ,
            purchase_units: [
                amount: 
                    value: parseFloat(total).toFixed(2)
                
            ]
        );
    ,
    // Finalize the transaction
    onApprove: function (data, actions) 
        return actions.order.capture().then(function (orderData) 
            let transaction = orderData.purchase_units[0].payments.captures[0];
            submitFormData(transaction)
        );
    ,
    onCancel: function (data) 
        alert('Something went wrong with the payment.')
    ,
    onError: function (err) 
        alert(`$err`)
    
).render('#paypal-button-container');

function submitFormData(transaction) 
    console.log('Entrou Aqui')

    var url = "/process-order/"
    fetch(url, 
            method: 'POST',
            headers: 
                'Content-Type': 'applicaiton/json',
                'X-CSRFToken': csrftoken,
            ,
            body: JSON.stringify(
                'total': total,
                'transaction': transaction
            ),

        )
        .then((response) => response.json())
        .then((data) => 
            console.log('Entrou Aqui tbm')

            // HERE I CHEANGE THE CHECKOUT NAVBAR ACTIVE LINK AND REDIRECT THE USER TO THE "RECEIPT" WRAPPER
            let marker = document.getElementById('marker')
            let navLinks = document.querySelectorAll('.userNavLink')
            let checkoutWrappers = document.getElementsByClassName('checkout-wrapper')

            marker.style.left = navLinks[2].offsetLeft + 'px'

            checkoutWrappers[1].style.display = 'none'
            navLinks[1].classList.remove('active-link')

            checkoutWrappers[2].style.display = 'flex'
            navLinks[2].classList.add('active-link')
            document.title = navLinks[2].innerText

            // HERE I UPDATE THE CART ICON
            let cartItems = document.getElementById('cartItems')
            cartItems.innerText = 0

            // HERE I DIPLAY SOME DETAILS FROM THE CURRENT TRANSACTION
            let transactionDetails = document.getElementById('transaction-details')
            transactionDetails.innerText = `The transaction with the ID:$transaction.id was $transaction.status
                                    at $transaction.create_time`

            // HERE I CHANGE THE RECEIPT CONTAINER ATRIBUTE TO "completed" AND DISABLE THE LINKS
            checkoutWrappers[2].dataset.status = 'completed'
            navLinks[2].style.pointerEvents = 'all'
            navLinks[0].style.pointerEvents = 'none'
            navLinks[1].style.pointerEvents = 'none'
        )

根据我为启用 CORS 所做的研究，我们必须在服务器端发出请求，但 paypal SDK 允许客户端和服务器端集成。

Paypal SDK 客户端： https://developer.paypal.com/demo/checkout/#/pattern/client

在我的贝宝沙盒帐户中，付款已完成，但我从未像往常那样收到交易详细信息。 如果有人能帮我解决这个问题，我已经被困了好几个小时了。

【参考方案1】：

在您的屏幕截图中，CORS 请求失败不是问题。您可以忽略这些消息。

问题出在最后一行，Unexpected token < in JSON at position 1。

这意味着您正在获取一个 URL 并尝试将结果解析为 JSON，但它不是 JSON。它是 html —— 以< 开头的东西。当您获取的 URL 返回错误页面或某些其他内容而不是您期望的数据时，可能会发生这种情况。

因此，您只需在您的服务器上调试该 URL/路由，并确保它输出正确的、预期的 JSON 数据，而不是 HTML 或您的 javascript 代码无法理解或执行任何操作的错误文本。

【讨论】：

感谢您的帮助，我现在设法让它工作了。