在 React.js 中制作一个贝宝按钮来结帐项目? [英] Making a paypal button to checkout items in React.js?

问题描述

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

解决方案

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

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

1. 异步加载 API 和 isScriptLoad* 道具以检查加载状态
2. showButton 保持状态(可以渲染或不渲染)
3. 绑定到 DOM
4. componentDidMount vs componentWillReceiveProps 检查 API 的加载状态
5. 要传递给组件以管理交易的道具:total、currency、env、commit、client、onSuccess、onError、onCancel
6. payment 和 authorize 方法来实际实现交易

从'react'导入React；从 'react-dom' 导入 ReactDOM；从 'react-async-script-loader' 导入 scriptLoader；类 PaypalButton 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {显示按钮:假，};window.React = 反应;window.ReactDOM = ReactDOM;}componentDidMount() {常量{isScriptLoaded,isScriptLoadSucceed} = this.props;if (isScriptLoaded && isScriptLoadSucceed) {this.setState({ showButton: true });}}componentWillReceiveProps(nextProps) {常量{isScriptLoaded,isScriptLoadSucceed,} = nextProps;const isLoadedButWasntLoadedBefore =!this.state.showButton &&!this.props.isScriptLoaded &&isScriptLoaded;如果(isLoadedButWasntLoadedBefore){如果(isScriptLoadSucceed){this.setState({ showButton: true });}}}使成为() {常量{全部的，货币，环境，犯罪，客户，成功时，出错时，取消，} = this.props;常量{显示按钮，} = this.state;常量付款 = () =>paypal.rest.payment.create(环境，客户，{交易:[{数量: {全部的，货币，}},],});const onAuthorize = (数据，动作) =>动作.支付.执行().then(() => {常量付款 = {支付:真实，取消:假，付款人ID:data.payerID，付款ID:data.paymentID，支付令牌:data.paymentToken，returnUrl: data.returnUrl,};onSuccess(付款)；});返回 (<div>{showButton &&<paypal.Button.react环境={环境}客户={客户}提交={提交}付款={付款}onAuthorize={onAuthorize}onCancel={onCancel}onError={onError}/>}

);}}导出默认 scriptLoader('https://www.paypalobjects.com/api/checkout.js')(PaypalButton);

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?

解决方案

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 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);

这篇关于在 React.js 中制作一个贝宝按钮来结帐项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！