JavaScript & PayPal Checkout Button Question

[aaronesteban]

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');

[Martyr2]

I believe that is setup in the payment section. Refer to this URL…

https://developer.paypal.com/docs/archive/checkout/integrate/

Look at the second example under Step 2 (Setup a payment). There you will see you can specify the items they are about to purchase along with the names and other item details. In the example you see they are purchasing a hat (A brown hat at that) and a handbag (a black handbag).

Those details are then passed along to Paypal and should show up for the user prior to purchasing.

[aaronesteban]

The PayPal integration page you’re referring to states that this particular integration has been deprecated. I can find the most current link and sent it to you to see if maybe you can figure it out. Here’s the official page for the particular JS integration that I’ve used above:

https://developer.paypal.com/docs/platforms/checkout/set-up-standard-payments/integrate

[Martyr2]

Sorry, didn’t notice it was deprecated. However, the link you sent along has code on it that pretty much shows the same thing. Look under item number 7, that example features an item list where you list the names of the products, description and other item details. Does that not send the details over to the user for them to see during their purchase?

 "items": [
   {
      "name": "First Product Name", /* Shows within upper-right dropdown during payment approval */
      "description": "Optional descriptive text..", /* Item details will also be in the completed paypal.com transaction view */