How to approve the paypal approval link in the create order response?

Viewed 744

I have created OrderCreateRequest of paypal in server side(nodejs), and i have the approval link "https://www.sandbox.paypal.com/checkoutnow?token=88K34845N63744150". I need to approve this approval link. How can i do it? My client side is Reactjs. What i have is:

Server side

payment.js

import paypal from "@paypal/checkout-server-sdk";
 const clientId = "CLIENT_ID";
 const clientSecret = "SECRET";
 const environment = new paypal.core.SandboxEnvironment(clientId, clientSecret);
 const client = new paypal.core.PayPalHttpClient(environment);

 export const processInvoicePaypalPayment = async (user, data) => {
        let request = new paypal.orders.OrdersCreateRequest();
        try{
            request.body = {
                           intent: "CAPTURE",
                           redirect_urls: {
                                    return_url: "http://localhost:3000",
                                    cancel_url: "http://localhost:3000"
                                   },

                           purchase_units: [
                                    {
                                      amount: {
                                             currency_code: "USD",
                                             value: "**AMOUNT***"
                                              },
                           description: "This is the payment transaction description."
                      }]};

    const createOrder = async () => {
       const response = await client.execute(request);

       console.log(`Order: ${JSON.stringify(response.result)}`);// This response.result.links contain approval links
       return { ok: true, data: { payment: response.result } };
    }

     const result = await createOrder();
     return result;
    }catch(err){}

ClientSide (React js)

test.js

 onSuccess = (paymt, details) => {
  const {
  payment,  // This contained the data which retured from server ie links
  processInvoicePaypalPayment
  } = this.props;
  let links = {};
  payment.paypalDetails.payment.links.forEach(linkObj => {
  links[linkObj.rel] = {
    href: linkObj.href,
    method: linkObj.method
  };
  });
  if (links.approve) {
  window.open(links.approve.href, "windowName", "height=400,width=400");  // Here i try to approve that approval link.
  }

}

As i am newer to this my concern is this the right way to approve link. If It is not How can i accomplish that? In this way of opening a newpopup actually giving me that, after i login and payment process complete it will not redirect back to my site. what i getting is:

enter image description here

How can i solve this issue?

1 Answers

Rather than doing the legwork of opening an approval window yourself, the best way is to pass the orderID/token to the client-side UI of a PayPal Checkout integration: https://developer.paypal.com/docs/checkout/

Here is a demo pattern: https://developer.paypal.com/demo/checkout/#/pattern/server


As a finishing touch, once everything is working for the happy path, don't neglect to handle/propagate funding failures so the buyer can select a different funding if the payment capture/execution fails (if e.g. their first card is declined): https://developer.paypal.com/docs/checkout/integration-features/funding-failure/

Related