paypal / paypal-js

Loading wrapper and TypeScript types for the PayPal JS SDK
Apache License 2.0
226 stars 75 forks source link

How to specify tax, product quantity and other info in product_units #537

Open Aloysius999 opened 2 months ago

Aloysius999 commented 2 months ago

I'm using the PayPalButtons component from @paypal/react-paypal-js and I have it working nicely for multiple items in the product_itemsfield of actions.order.createin the button createOrderfunction.

Trawling the Web has not yielded any solution. Looking at the GitHub source here was inconclusive.

Here is a snippet of my code:

<PayPalButtons
        fundingSource="paypal"
        style={{
          layout: "vertical",
          color: "gold",
          shape: "rect",
          tagline: false,
          height: Number(height.replace(/\D/g, "")),
        }}
        disabled={disabled}
        onApprove={onApprove}
        onError={onError}
        onCancel={onCancel}
        createOrder={async (data, actions) => {
          try {
            // get order info from backend
            const orderInfo = await createOrder(data, actions);

            if (!orderInfo) {
              throw new Error(
                "Order not created."
              );
            }

            const purchase_units = orderInfo.order.map((item) => {
              return {
                description: item.product.description,
                amount: {
                  value: item.product.price,
                  currency_code: item.currency!,
                },
                custom_id: item.custom_id,
                reference_id: item.reference_id,
                invoice_id: item.invoice_id,
                soft_descriptor: item.soft_descriptor,
              };
            });

            return actions.order.create({
              intent: orderInfo.intent,
              purchase_units,
            });
          } catch (error) {
            console.error(error);
            throw new Error("Failed to create order.");
          }
        }}
 />

The orderInfo is being generated (currently mocked) by a backend API.

I've tried product_unitfields such as quantity- which didn't work

My questions are - for a purchase_unit how can I specify:

What I'd like to do is complete the highlighted fields below image

Many thanks for your help.

Aloysius999 commented 2 months ago

Some progress at least - the following code adds the quantity of items, tax, shipping etc. to the purchase_units:

(for testing I've hard coded thiese values - they should be fetched from the backend API)

 const purchase_units = orderInfo.order.map((item) => {
              return {
                description: item.product.description,
                amount: {
                  value: "60.00", //item.product.price,
                  currency_code: item.currency!,
                  breakdown: {
                    item_total: {
                      unit_amount: "7",
                      currency_code: "EUR",
                      value: "36.00",
                    },
                    tax_total: {
                      currency_code: "EUR",
                      value: "9.00",
                    },
                    handling: {
                      currency_code: "EUR",
                      value: "5.00",
                    },
                    shipping: {
                      currency_code: "EUR",
                      value: "15.00",
                    },
                    shipping_discount: {
                      currency_code: "EUR",
                      value: "5.00",
                    },
                    description: "breakdown",
                  },
                },
                custom_id: item.custom_id,
                reference_id: item.reference_id,
                invoice_id: item.invoice_id,
                soft_descriptor: item.soft_descriptor,
                items: [
                  {
                    name: "Test item 1",
                    unit_amount: {
                      currency_code: "EUR",
                      value: "8.00",
                    },
                    tax: {
                      currency_code: "EUR",
                      value: "2.00",
                    },
                    quantity: "2",
                    description: "Test item 1 description",
                    reference_id: "100",
                  },
                  {
                    name: "Test item 2",
                    unit_amount: {
                      currency_code: "EUR",
                      value: "4.00",
                    },
                    tax: {
                      currency_code: "EUR",
                      value: "1.00",
                    },
                    quantity: "5",
                    description: "Test item 2 description",
                    reference_id: "200",
                  },
                ],
                shipping: {
                  method: "DHL",
                  address: {
                    name: {
                      full_name: "John",
                      surname: "Doe",
                    },
                    address_line_1: "via Roma",
                    address_line_2: "100",
                    admin_area_2: "Milano",
                    admin_area_1: "MI",
                    postal_code: "12345",
                    country_code: "IT",
                  },
                },
              };
            });

My transaction now looks like this: image

I hope this helps someone else struggling to get PayPal purchase_unitsto work