CODEWITHSUNDEEP
reactjspaypalcheckout
Luiz Gustavo
Luiz Gustavo

Reputation: 37

PayPal React Integration not creating transaction

I'm trying to integrate with PayPal checkout using the react library (@paypal/react-paypal-js), the response of the payment is successful, but when I use the live client id it doesn't bill from my credit card.


import { api } from "../services/api";
import { PayPalButtons, PayPalScriptProvider } from "@paypal/react-paypal-js";


export default function Pagamento() {

  function createOrder(data, actions) {
    return actions.order.create({
      intent: "CAPTURE",
      purchase_units: [
        {
          amount: {
            value: "2.00",
          },
        },
      ],
    });
  }

  function onApprove(data, actions) {
    console.log(data);
    const paymentID = data.paymentID;
    const orderID = data.orderID;
    const payerID = data.payerID;

    api
      .get("update_pacientes", {
        params: {
          username: username,
          column: "status",
          paymentID: paymentID,
          orderID: orderID,
          payerID: payerID,
        },
      })
      .then((response) => {
        console.log(response);
        // , location.reload();
      });
  }


  return (
    <div id="pagamento_wrapper">
      
        <PayPalScriptProvider
          options={{
            "client-id": OMMITED FOR SECURITY REASONS
             ,
            currency: "BRL",
          }}
        >
          <PayPalButtons
            style={{ color: "blue", shape: "pill", label: "pay", height: 40 }}
            createOrder={(data, actions) => createOrder(data, actions)}
            onApprove={(data, actions) => onApprove(data, actions)}
          />
        </PayPalScriptProvider>
      </div>
    </div>
  );
}

Upvotes: 0

Views: 427

Answers (1)

Preston PHX
Preston PHX

Reputation: 30369

Your onApprove function is not capturing the order after the payer approves it, so there is no PayPal transaction created.

Since from inside createOrder you used actions.order.create to create on the client side, you should also capture on the client side via actions.order.capture (from inside onApprove)

Upvotes: 2

Related Questions