製作PayPal按鈕以結帳React.js中的項目？

Question

所以來自我熟悉做PayPal按鈕的角度背景，我無法讓它適用於React.js。爲react.js構建PayPal按鈕組件的方法是什麼？任何建議都會有很大幫助？

Answer 1

任何人都有同樣的問題：這個簡潔的step-by-step guide可以用來寫出自己的React組件，它使用PayPal REST API。

在下面的代碼段中，注意：

1. API異步加載和isScriptLoad*道具檢查負載狀態
2. showButton保持狀態（可以呈現或不）
3. 結合DOM
4. componentDidMount vs componentWillReceiveProps檢查API的加載狀態
5. 要傳遞給組件以管理事務的道具：總計，貨幣， ENV，提交客戶端，的onSuccess，onError的，onCancel
6. payment和authorize方法實際執行

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