previously on

A website has been developed with React framework before. The customer is a foreign company. Therefore, in order to cater to the audience, Paypal, which is not commonly used in China but commonly used abroad, is added to the payment module. Recently, I was sorting out the documents, so I integrated the experience summary written at that time into the following release.

paypal developer api document source address

summary

• Make a brief summary of development preparation:

Apply for a PayPal merchant account.

Log in to paypal with your account and find 'sandbox'. You can see the default app and creation.

You can create an app for this project and get ` client_id`. At this point, we can basically start development.

Official configuration address

• Dependence.

  The project is developed using the React framework. The 'React PayPal JS' SDK is installed in the project

  React PayPal JS NPM source address

  React PayPal JS usage document

• to configure.

Because react PayPal JS is installed, the following summary is based on the configuration and use of this dependency.

On our payment bill page, PayPalScriptProvider is introduced from dependency and used in the form of tag. The options attribute of the tag is where we configure it. Examples are:

import { PayPalScriptProvider } from "@paypal/react-paypal-js"
export default function PayPalPaymentElement() {
  return (
    <PayPalScriptProvider options={{ 
      "client_id": "In development preparation sandbox Got it client_id Or from the back"
      "currency": "The currency charged. If not set, the default is USD"
    }}>
    /**This is the loading location of PayPalButtons. PayPalButtons can only be executed in this environment*/
    </PayPalScriptProvider>
  )
}

Note: options attribute, client_id is required. Change this to a real merchant account client before the project goes online_ id.

If the currency is not US dollar, you must add 'currency' and specify the currency.

Official JavaScript SDK configuration address

• PayPalButtons

  paypal.Buttons, click to open the PayPal payment page and integrate payment.

  Official PayPal Buttons address

  PayPal react JS provides rapid integration of PayPal buttons.

  PayPalButtons address

  For the style of PayPalButtons, please refer to the official address and modify it as required. Let's talk about some common properties.

  1.createOrder

The method used to create paypal payment orders is often used for payment integration. Include order details such as address, total price, etc.

 

const createOrder = (data: any, actions: any) => {

 

return actions.order.create({
    purchasee_units: [{
      amount: {
        value: 12,//Total amount
        currency_code: "USD",//currency
        breakdown: {
          item_total: {...},//Total price of goods
          shipping: {...},//freight
          discount: {...},//discount
        },
        shipping: {
          name: {
            full_name: "John Doe",//Only support full_name
          },
          type: "SHIPPING",//Mail method, optional values and"PICKUP_IN_PERSON"
          address: {...}//address
        }
      }
    }],
    application_context: {
      brand_name: "Sale",//Brand name
      shipping_prefrence: "SET_PROVIDED_ADDRESS",//Address bar display
    },
    payer: {...},//Consumer information
  }).then((orderID: any) => {});
};

<PayPalButtons 
  style={{
    layout: "horizontal",
    shape: "rect",
  }}
  createOrder={createOrder}
/>

　　`action.order.create({}) ` has four options, namely ` intent ', ` payer', ` purchase '_ units`,`application_context`,  createOrder official document address

Note 1: purchase_unit object definition 1 ,purchase_unit object definition 2

Note 2: application_context object definition , in actual development, this object's ` brand_name ` and ` shipping_perfrence ` is frequently used.

When there is a requirement that the delivery address is selected by the user on the website, and only the address is displayed on paypal and cannot be changed, then ` shipping_ 'competency' is the best implementation method (at least when I do this project). To complete this requirement, we only need to carry out the following integration:

application_context: {
shipping_prefrence: "SET_PROVIDED_ADDRESS"//Provided by the website, which users can view but cannot change
//"NO_SHIPPING": Generally used for the sale of digital products without physical objects, the payment page does not display the address bar
//"GET_FROM_FILE": From the address selected by the user in the address column of the current payment page
}

Note 3: payer object definition

2.onApprove

Callback after order confirmation

const onApprove = (data: any, actions: any) => {
  return actions.order.capture().then(funtions (details: any) {})
}

<PayPalButtons 
  style={{
    layout: "horizontal",
    shape: "rect",
  }}
  createOrder={createOrder}
  onApprove={onApprove}
/>

　　onApprove official address

 

3.onCancel

Callback when closing paypal payment page and canceling payment

const onCancel = (data: any) => {}

<PayPalButtons 
  style={{
    layout: "horizontal",
    shape: "rect",
  }}
  createOrder={createOrder}
  onCancel={onCancel}
/>

　　onCancel official address

 

4.onError

Callback when executing an error

const onError = (err: any) => {}

<PayPalButtons 
  style={{
    layout: "horizontal",
    shape: "rect",
  }}
  createOrder={createOrder}
  onError={onError}
/>

　　onError official address

5. Others

The pits (or detours due to lack of experience) stepped by PayPal buttons are listed separately here

Problem Description:

On the payment page, click the paypal payment button in the west, and then cancel the payment.

Change the quantity of goods (or mailing method / address to distinguish it from the payment details clicked last time) without refreshing the page and jumping the route.

Click the paypal payment button, and the paypal payment amount / address is no different from that of the last click, that is, the order details are not updated.

Retrieval problems & Solutions:

When this problem is found at the beginning, the first reaction is that the components are not rendered again, or the data is not dynamically updated. Follow this idea to start testing, and it is found that the components and data are updated. Ah, this

Could it be PayPal's problem? It is found that there is an 'onInit/onClick' method. Use this method to test printing the incoming data every time you click. As a result, the incoming data is not updated every time you click!!! I don't understand why the incoming data is not updated when the components and data are updated????

Will PayPalButtons not be reconfigured? After looking for the official document for a long time, I only found a render method, but I don't need to write this method myself with sdk. Hey!!!

Try to change a document and look at it in react PayPal JS. Damn it, I saw a 'forceReRender' as soon as I came in`

　　Document source address Look at the description: used to re render components. When changing this prop, the current button will be destroyed and reconfigured with the value of the current props!!! That's exactly what I'm looking for! Use it

<PayPalButtons 
  style={{
    layout: "horizontal",
    shape: "rect",
  }}
  createOrder={createOrder}
  forceReRender={[
    totalprice,
    shippingAddress,
    shippingPrice,
    ...
  ]}
  />

Perform the steps just found the problem again and solve the problem!!

Sure enough, you should read what documents you use first.

To sum up, the reason for this problem is that the payment page is not executed step by step, that is, it is not updated step by step, which leads to that PayPalButtons are not reconfigured when data is updated. I don't know if there is any problem with using native methods. After all, it seems that the official only has render method (or something else I just didn't find). Later, you can practice or pay attention to the community to see