高级卡支付 SDK 在提交表单时显示错误

Posted 2023-02-22

【中文标题】高级卡支付 SDK 在提交表单时显示错误

【英文标题】：Advanced card payments SDK showing error during submission of form

【发布时间】：2020-09-25 03:37:59

【问题描述】：

错误：“Hosted Fields 付款已在进行中。”

我从 this PayPal documentation 复制了它，并在 SDK URL 中传递了一个正确的沙箱 clientID。

if (paypal.HostedFields.isEligible()) 
       paypal.HostedFields.render(
         createOrder: function () return "order-ID";, // replace order-ID with the order ID
         styles: 
           'input': 
             'font-size': '17px',
             'font-family': 'helvetica, tahoma, calibri, sans-serif',
             'color': '#3a3a3a'
           ,
           ':focus': 
             'color': 'black'
           
         ,
         fields: 
           number: 
             selector: '#card-number',
             placeholder: 'card number'
           ,
           cvv: 
             selector: '#cvv',
             placeholder: 'card security number'
           ,
           expirationDate: 
             selector: '#expiration-date',
             placeholder: 'mm/yy'
           
         
       ).then(function (hf) 
         $('#my-sample-form').submit(function (event) 
           event.preventDefault();
           hf.submit(
             // Cardholder Name
             cardholderName: document.getElementById('card-holder-name').value,
             // Billing Address
             billingAddress: 
               streetAddress: document.getElementById('card-billing-address-street').value,      // address_line_1 - street
               extendedAddress: document.getElementById('card-billing-address-unit').value,       // address_line_2 - unit
               region: document.getElementById('card-billing-address-state').value,           // admin_area_1 - state
               locality: document.getElementById('card-billing-address-city').value,          // admin_area_2 - town / city
               postalCode: document.getElementById('card-billing-address-zip').value,           // postal_code - postal_code
               countryCodeAlpha2: document.getElementById('card-billing-address-country').value   // country_code - country
             
           );
         );
       );
     

【问题讨论】：

您的“订单 ID”是什么？

Order id 应该从 Paypal 返回？在点击按钮之前，我必须先订购（通过 API 在贝宝上）？

【参考方案1】：

您需要将“order-ID”替换为为此结帐创建的实际 PayPal 订单 ID。

有几种方法可以获得一种。请参阅https://developer.paypal.com/docs/business/checkout/server-side-api-calls/#server-side-api-calls，了解如何从您的服务器调用订单 API 以“创建订单”和“捕获订单”。您应该使用它们在您的服务器上创建两个仅返回 JSON 数据（无 html 或文本）的路由

至于如何从 JS UI 中获取和提交此代码，请参阅 https://developer.paypal.com/demo/checkout/#/pattern/server 以获取一些演示代码。

---

或者，您可以尝试进行仅 HTML/JS 的集成（无服务器），例如 https://developer.paypal.com/demo/checkout/#/pattern/client

【讨论】：

您提供的第三个选项非常好，但我希望我的（借记卡和信用卡）表格始终处于打开状态。