React PayPal Checkout

Question

I built a small and simple webshop with a PayPal checkout and it works so far. Know I want to see in the transaction history of my PayPal account the product which was purchased. So I need to add more details about the purchase to see what order was placed.

I found multiple tutorials but I still don't know how to implement this. This is my payPalButton component so far:

How can I add more details to the payment object??

import React from 'react';
import PaypalExpressBtn from 'react-paypal-express-checkout';

export default class MyApp extends React.Component {
   render() {
      const onSuccess = (payment) => {
         payment.console // Congratulation, it came here means everything's fine!
            .log('The payment was succeeded!', payment);
         this.props.clearCart();
         this.props.history.push('/');
         // You can bind the "payment" object's value to your state or props or whatever here, please see below for sample returned data
      };

      const onCancel = (data) => {
         // User pressed "cancel" or close Paypal's popup!
         console.log('The payment was cancelled!', data);
         // You can bind the "data" object's value to your state or props or whatever here, please see below for sample returned data
      };

      const onError = (err) => {
         // The main Paypal's script cannot be loaded or somethings block the loading of that script!
         console.log('Error!', err);
         // Because the Paypal's main script is loaded asynchronously from "https://www.paypalobjects.com/api/checkout.js"
         // => sometimes it may take about 0.5 second for everything to get set, or for the button to appear
      };

      let env = 'sandbox'; // you can set here to 'production' for production
      let currency = 'EUR'; // or you can set this value from your props or state
      //   let total = 1; // same as above, this is the total amount (based on currency) to be paid by using Paypal express checkout
      // Document on Paypal's currency code: https://developer.paypal.com/docs/classic/api/currency_codes/

      const client = {
         sandbox: process.env.REACT_APP_ID,
         production: 'YOUR-PRODUCTION-APP-ID',
      };
      // In order to get production's app-ID, you will have to send your app to Paypal for approval first
      // For sandbox app-ID (after logging into your developer account, please locate the "REST API apps" section, click "Create App"):
      //   => https://developer.paypal.com/docs/classic/lifecycle/sb_credentials/
      // For production app-ID:
      //   => https://developer.paypal.com/docs/classic/lifecycle/goingLive/

      // NB. You can also have many Paypal express checkout buttons on page, just pass in the correct amount and they will work!
      return (
         <PaypalExpressBtn
            env={env}
            client={client}
            currency={currency}
            total={this.props.total}
            onError={onError}
            onSuccess={onSuccess}
            onCancel={onCancel}
            style={{
               size: 'small',
               color: 'blue',
               shape: 'rect',
            }}
         />
      );
   }
}

Answer 1

• You may be using an older react component, try https://www.npmjs.com/package/react-paypal-button-v2

• Don't use onSuccess, switch to onApprove: https://stackoverflow.com/a/62193541/2069605

• Here is an example of a v2/orders purchase_units object with a description and two items:

   "purchase_units": [{
    "description": "Stuff",
    "amount": {
      "value": "20.00",
      "currency_code": "USD",
      "breakdown": {
        "item_total": {
          "currency_code": "USD",
          "value": "20.00"
        },
      }
    },
    "items": [
      {
        "unit_amount": {
          "currency_code": "USD",
          "value": "10.00"
        },
        "quantity": "1",
        "name": "Item 1",
      },
      {
        "unit_amount": {
          "currency_code": "USD",
          "value": "10.00"
        },
        "quantity": "1",
        "name": "Item 2",
      },
    ],
  }]
  

(A lot of those fields are actually required and the totals must match up, so it's very useful to have this sample as a starting point.)