本文介绍了制作PayPal按钮来检查React.js中的项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

所以来自我熟悉的PayPal按钮的角度背景,我无法让它为React.js工作。为react.js构建PayPal按钮组件的方法是什么?任何建议都会有很大帮助吗?

So coming from an angular background where I'm familiar doing a PayPal button, I'm unable to get it to work for React.js. What are methods to build the PayPal button component for react.js that works? Any suggestion would help greatly?

推荐答案

任何有同样问题的人:这个简洁可用于编写您自己的使用PayPal REST API的React组件。

Anyone who has the same question: this concise step-by-step guide can be used to write up your own React component which uses the PayPal REST API.

在下面的代码片段中,注意:

In the below code fragment, note:


  1. 异步加载的API和 isScriptLoad * 检查加载状态的道具

  2. showButton保持状态(可以呈现或不呈现)

  3. 绑定到DOM

  4. componentDidMount vs componentWillReceiveProps 检查API的加载状态

  5. 将道具传递给组件以管理交易:总计,货币,环境,提交,客户,onSuccess,onError,onCancel

  6. 付款授权实际实施交易的方法

  1. API loaded asynchronously and isScriptLoad* props to check load status
  2. showButton to hold the state (can be rendered or not)
  3. binding to DOM
  4. componentDidMount vs componentWillReceiveProps to check loading status of API
  5. Props to be passed to the componet to manage the transaction: total, currency, env, commit, client, onSuccess, onError, onCancel
  6. payment and authorize methods to actually implement the transaction
import React from 'react';
import ReactDOM from 'react-dom';
import scriptLoader from 'react-async-script-loader';

class PaypalButton extends React.Component {
  constructor(props) {
super(props);

this.state = {
  showButton: false,
};

window.React = React;
window.ReactDOM = ReactDOM;
  }

  componentDidMount() {
const {
  isScriptLoaded,
  isScriptLoadSucceed
} = this.props;

if (isScriptLoaded && isScriptLoadSucceed) {
  this.setState({ showButton: true });
}
  }

  componentWillReceiveProps(nextProps) {
const {
  isScriptLoaded,
  isScriptLoadSucceed,
} = nextProps;

const isLoadedButWasntLoadedBefore =
  !this.state.showButton &&
  !this.props.isScriptLoaded &&
  isScriptLoaded;

if (isLoadedButWasntLoadedBefore) {
  if (isScriptLoadSucceed) {
    this.setState({ showButton: true });
  }
}
  }

  render() {
const {
  total,
  currency,
  env,
  commit,
  client,
  onSuccess,
  onError,
  onCancel,
} = this.props;

const {
  showButton,
} = this.state;

const payment = () =>
  paypal.rest.payment.create(env, client, {
    transactions: [
      {
        amount: {
          total,
          currency,
        }
      },
    ],
  });

const onAuthorize = (data, actions) =>
  actions.payment.execute()
    .then(() => {
      const payment = {
        paid: true,
        cancelled: false,
        payerID: data.payerID,
        paymentID: data.paymentID,
        paymentToken: data.paymentToken,
        returnUrl: data.returnUrl,
      };

      onSuccess(payment);
    });

return (
  <div>
    {showButton && <paypal.Button.react
      env={env}
      client={client}
      commit={commit}
      payment={payment}
      onAuthorize={onAuthorize}
      onCancel={onCancel}
      onError={onError}
    />}
  </div>
);
  }
}

export default scriptLoader('https://www.paypalobjects.com/api/checkout.js')(PaypalButton);

这篇关于制作PayPal按钮来检查React.js中的项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-16 08:16