'paypal advanced checkout doesn't load form elements

I want to integrate paypal advanced checkout to my website, but I have problems with loading the custom form elements

this is my form page:

<script src="https://www.paypal.com/sdk/js?components=buttons,hosted-fields&client-id={{env('PAYPAL_CLIENT_ID')}}" data-client-token="{{$client_token}}" ></script>

let orderId;

     // Displays PayPal buttons
     paypal.Buttons({
       style: {
         layout: 'horizontal'
       },
        createOrder: function(data, actions) {
           return actions.order.create({
             purchase_units: [{
               amount: {
                 value: "1.00"
               }
             }]
           });
         },
         onApprove: function(data, actions) {
           return actions.order.capture().then(function(details) {
             window.location.href = '/success.html';
           });
         }
     }).render("#paypal-button-container");

     // If this returns false or the card fields aren't visible, see Step #1.

     if (paypal.HostedFields.isEligible()) {

       // Renders card fields
       paypal.HostedFields.render({
         // Call your server to set up the transaction
         createOrder: function () {
           return fetch('/paypal/process/', {
            method: 'post'
          }).then(function(res) {
              return res.json();
          }).then(function(orderData) {
            orderId = orderData.id;
            return orderId;
          });
         },
..........
     } else {
       // Hides card fields if the merchant isn't eligible
       document.querySelector("#card-form").style = 'display: none';
     }

enter where it says (// Hides card fields if the merchant isn't eligible) I have the business account enabled and I previously generated the client token correctly

paypalpaypal-sandboxpaypal-rest-sdk


Solution 1:[1]

Before you can accept card payments with Advanced, you must request advanced debit and credit card processing. This is documented in the first section of the integration guide, with a link to do it for sandbox mode (you'll need to do it separately for live)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Preston PHX

Related Questions