JavaScript & PayPal Checkout Button Question

Question

I am currently testing out the sandbox for the PayPal checkout integration using Javascript.

I see how to use the "Sandbox" mode versus using the "Live" mode when testing our buttons out in Javascript.

What I'm asking is how do I set the product's title so that the buyer can see exactly what they're about to purchase prior to clicking the "Pay Now" button to finalize the transaction?

Here is the code that I'm currently working with as shown below:

//HTML GOES HERE TO CONTAIN THE PAYPAL BUTTON
<div id="paypal-button-container"></div>
<script src="https://www.paypal.com/sdk/js?&client-id=[MY-CLIENT-ID-GOES-HERE]&merchant-id=[MY-MERCHANT-EMAIL-ADDRESS-GOES-HERE]&currency=USD"></script>


paypal.Buttons({
    style: {
        layout:  'vertical',
        color:   'gold',
        shape:   'pill',
        label:   'buynow'
    },

    // Sets up the transaction when a payment button is clicked
    createOrder: function(data, actions) {
      return actions.order.create({

        purchase_units: [{
          amount: {
            value: 50, // Can reference variables or functions. Example: `value: document.getElementById('...').value`
            currency: 'USD'
          },

        }]
        
      });
      
    },
    
    // Finalize the transaction after payer approval
    onApprove: function(data, actions) {
      return actions.order.capture().then(function(orderData) {
        // Successful capture! For dev/demo purposes:
            console.log('Capture result', orderData, JSON.stringify(orderData, null, 2));
            var transaction = orderData.purchase_units[0].payments.captures[0];
            alert('Transaction '+ transaction.status + ': ' + transaction.id + '\n\nSee console for all available details');

        // When ready to go live, remove the alert and show a success message within this page. For example:
        // var element = document.getElementById('paypal-button-container');
        // element.innerHTML = '';
        // element.innerHTML = '<h3>Thank you for your payment!</h3>';
        
        actions.redirect('https://SomeWebsiteURLiWillForwardThemTo.com');
      });
    }
  }).render('#paypal-button-container');

Answer 1

In paypals docs you can see the purchase unit object. https://developer.paypal.com/docs/api/orders/v2/#definition-purchase_unit inside that object you can see that you can pass an items array. This is an array of objects that you can view here https://developer.paypal.com/docs/api/orders/v2/#definition-item. You can define the parameters of each product including the name. So in your case I think you can try something like the following:

purchase_units: [{
  amount: {
    value: 50,
    currency: 'USD',
    breakdown: {
      item_total: {
        currency_code: 'USD',
        value: 50
      },
    }
  },
  items: [
   {
     name: 'Product Name',
     unit_amount: {
       currency_code: 'USD',
       value: 50
      },
      quantity: '1'
    }
  ]
}]

Here is a working fiddle just pop in your client id to test. Fiddle Demo

NOTE: Look at the docs and see what are required fields. I also think that you need to apply a breakdown to the amount for this to work.