Luehang / react-paypal-button-v2

An easy and simple to use React button component to implement PayPal Checkout with Smart Payment Buttons V2 (Version 2).
https://luehangs.site/lue_hang/projects/react-paypal-button-v2
MIT License
273 stars 81 forks source link

[QUESTION] How to specify payee? #68

Open syang opened 4 years ago

syang commented 4 years ago

I followed the readme while I was trying to use react-paypal-button-v2.

I was using the following create + capture method. But the example did not show where I should specify the client_id, i.e., where I should specify the payee account.

  1. should I specify it inside createOrder or should I specify it inside the onApprove?
import { PayPalButton } from "react-paypal-button-v2";

export default class Example Component {
  render() {
    return (
      <PayPalButton
        createOrder={(data, actions) => {
          return actions.order.create({
            purchase_units: [{
              amount: {
                currency_code: "USD",
                value: "0.01"
              }
            }],
            // application_context: {
            //   shipping_preference: "NO_SHIPPING" // default is "GET_FROM_FILE"
            // }
          });
        }}
        onApprove={(data, actions) => {
          // Capture the funds from the transaction
          return actions.order.capture().then(function(details) {
            // Show a success message to your buyer
            alert("Transaction completed by " + details.payer.name.given_name);

            // OPTIONAL: Call your server to save the transaction
            return fetch("/paypal-transaction-complete", {
              method: "post",
              body: JSON.stringify({
                orderID: data.orderID
              })
            });
          });
        }}
      />
    );
  }
}

The reason I am asking the the following. After switching to react-paypal-button-v2, my sandbox can't get notification anymore (before switching, I can see all the transitions happened inside my sandbox) :point_down:

Screen Shot 2020-06-06 at 5 11 04 PM








A related by different question I have is what the difference between the above create + capture method (my current method) and the following single step method :point_down: ?

import { PayPalButton } from "react-paypal-button-v2";

export default class Example Component {
  render() {
    return (
      <PayPalButton
        amount="0.01"
        // shippingPreference="NO_SHIPPING" // default is "GET_FROM_FILE"
        onSuccess={(details, data) => {
          alert("Transaction completed by " + details.payer.name.given_name);

          // OPTIONAL: Call your server to save the transaction
          return fetch("/paypal-transaction-complete", {
            method: "post",
            body: JSON.stringify({
              orderId: data.orderID
            })
          });
        }}
        options={{
          clientId: "PRODUCTION_CLIENT_ID"
        }}
      />
    );
  }
}