Advanced card payments SDK showing error during submission of form

Question

Error: "Hosted Fields payment is already in progress."

I have copied it from this PayPal documentation, and in the SDK URL pass a proper sandbox 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
             }
           });
         });
       });
     }

Answer 1

You need to replace "order-ID" with an actual PayPal Order ID created for this checkout.

There are several ways to obtain one. See https://developer.paypal.com/docs/business/checkout/server-side-api-calls/#server-side-api-calls for how to call the orders API from your server to 'Create Order' and 'Capture Order'. You should use these to create two routes on your server that return only JSON data (no HTML or text)

As for how to fetch and commit this from the JS UI, see https://developer.paypal.com/demo/checkout/#/pattern/server for some demo code.

---

Alternatively, you could try doing an HTML/JS-only integration (no server) like https://developer.paypal.com/demo/checkout/#/pattern/client