[#. React] react-paypal-express-checkout를 이용해서 React 웹에 Paypal 결제 연동하기

 

 

 

 

 

 

React로 쇼핑몰 웹을 만들고 있는데 여기에 Paypal을 통한 결제를 심어보자

주의할 점은 ₩, 원은 지원을 하지 않는다 $, 달러 를 기준으로 한다

 

 

 

 

 

① react-paypal-express-checkout 설치

 

npm install react-paypal-express-checkout --save

 

 

 

 

www.npmjs.com/package/react-paypal-express-checkout

react-paypal-express-checkout

 

 

 

 

② view에 Paypal 버튼 생성하기

 

import React from 'react';
import PaypalExpressBtn from 'react-paypal-express-checkout';
 
function Paypal() {
    const onSuccess = (payment) => {
    // Congratulation, it came here means everything's fine!
    console.log("The payment was succeeded!", payment);
    // You can bind the "payment" object's value to your state or props or whatever here, please see below for sample returned data
    }

    const onCancel = (data) => {
    // User pressed "cancel" or close Paypal's popup!
    console.log('The payment was cancelled!', data);
    // You can bind the "data" object's value to your state or props or whatever here, please see below for sample returned data
    }

    const onError = (err) => {
    // The main Paypal's script cannot be loaded or somethings block the loading of that script!
    console.log("Error!", err);
    // Because the Paypal's main script is loaded asynchronously from "https://www.paypalobjects.com/api/checkout.js"
    // => sometimes it may take about 0.5 second for everything to get set, or for the button to appear
    }

    let env = 'sandbox'; // you can set here to 'production' for production
    let currency = 'USD'; // or you can set this value from your props or state
    let total = 1; // same as above, this is the total amount (based on currency) to be paid by using Paypal express checkout
    // Document on Paypal's currency code: https://developer.paypal.com/docs/classic/api/currency_codes/

    const client = {
    sandbox:    'YOUR-SANDBOX-APP-ID',
    production: 'YOUR-PRODUCTION-APP-ID',
    }
    // In order to get production's app-ID, you will have to send your app to Paypal for approval first
    // For sandbox app-ID (after logging into your developer account, please locate the "REST API apps" section, click "Create App"):
    //   => https://developer.paypal.com/docs/classic/lifecycle/sb_credentials/
    // For production app-ID:
    //   => https://developer.paypal.com/docs/classic/lifecycle/goingLive/

    // NB. You can also have many Paypal express checkout buttons on page, just pass in the correct amount and they will work!
    return (
    <PaypalExpressBtn env={env} client={client} currency={currency} total={total} onError={onError} onSuccess={onSuccess} onCancel={onCancel} />
    );
}

export default Paypal;

 

 

 

 

 

③ developer paypal 사이트 가입 후 설정

 

 

developer.paypal.com/developer/accounts/

Sandbox accounts - PayPal Developer

 

가입할 때 구매하기/결제받기 두 가지가 있을 텐데 구매하기 클릭 후 가입

 

 

 

 

⑴ account 생성

 

 

Personal

South Korea 

선택 후 생성한다

 

 

 

 

View/edit account 클릭 후 비밀번호를 변경한다

 

 

 

 

⑵ app 생성

 

 

 

 

왼쪽 상단에 My Apps & Credentials => Create App

App name 입력 후 위에서 생성한 account 선택 후 app을 생성한다 

 

 

 

 

⑶ View에 설정

 

 

이렇게 App이 잘 생성되어 있을 것이다

클릭하면 이렇게 Client ID 항목이 있고 이 ID를 복사한다

 

 

Paypal.js 수정

const client = {
  sandbox:    '여기에 추가',
  production: 'YOUR-PRODUCTION-APP-ID',
}

 

이제 웹으로 돌아가서 아까 생성해둔 Paypal 버튼을 클릭해 보자

 

 

 

 

이렇게 결제창이 잘 뜬다

저 결제창에서 아이디, 비밀번호는 아까 생성한 account, 그리고 수정한 비밀번호다

로그인하면 이렇게 페이지가 넘어갈 거고

 

 

결제 버튼을 누르면 결제가 완료되고 창이 자동으로 닫힌다