ReactでPayPal Express Checkoutを実装する方法

1. PayPalボタンの追加: まず、Reactコンポーネント内にPayPalボタンを追加する必要があります。以下は、ボタンを表示するための基本的なコード例です。

import React from 'react';
import ReactDOM from 'react-dom';
import { PayPalButton } from 'react-paypal-button-v2';
function App() {
  const onSuccess = (details, data) => {
    console.log('Transaction completed by ' + details.payer.name.given_name);
    // ここで支払いの処理を行います
  };
  const onError = (error) => {
    console.log('Error occurred:', error);
  };
  return (
    <div>
      <h1>React PayPal Express Checkout</h1>
      <PayPalButton
        amount="10.00"
        onSuccess={onSuccess}
        onError={onError}
      />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

2.支払いの処理: PayPalボタンをクリックした後、支払いの処理を行う必要があります。以下は、支払いの処理を行うためのコード例です。

import { PayPalButton } from 'react-paypal-button-v2';
const onSuccess = (details, data) => {
  console.log('Transaction completed by ' + details.payer.name.given_name);
  // ここで支払いの処理を行います
  // 以下は、支払いが完了した後にユーザーを別のページにリダイレクトする例です
  window.location.href = '/thank-you-page';
};
const onError = (error) => {
  console.log('Error occurred:', error);
};
const PayPalCheckout = () => {
  return (
    <PayPalButton
      amount="10.00"
      onSuccess={onSuccess}
      onError={onError}
    />
  );
};
export default PayPalCheckout;

3.支払いの詳細の取得: 支払いが完了した後、支払いの詳細を取得することもできます。以下は、詳細情報を取得するためのコード例です。

これらのコード例を使用してReactでPayPal Express Checkoutを実装することができます。適切なルーティングや処理方法に応じて、必要な変更を加えてください。