PAY.JP의 Checkout용 Reactjs 구성 요소를 만들어 봤어요.

2551 단어 pay.jpReact
PAY.JP의 Checkoutscript 라벨 1행에서 디자인의 결제 형식, 카드 정보의 검증, 카드 정보의 기호화 표를 생성하는 라이브러리입니다.리액션입니다.js에서 사용한 작업 제안을 정리한 React 구성 요소를 만들었습니다.대체 방안은payjp.js이다.이 보도는 양자의 우열을 가리지 않는다.판단할 자료를 제공하는 것이 목적이다.

코드

  • PayjpCheckout@gist

    • 노력이 필요한 곳

  • React.js의 구성 요소에서render script 탭을 사용할 수 없기 때문에 appendChild를 사용했습니다.window.파일에 appeendChild를 제출하면payjp에서 생성한 단추가 SPA의 모든 화면에 표시됩니다.이 중에서 앱 endChild를 진행하면 피할 수 있습니다.

  • 데이터on-created와 데이터on-failed에서 호출 함수의 문자열을 설정할 수 있습니다.그러나 이것은 창 바로 아래의 함수에만 대응한다.이에 따라 component Will Mountwindow.reactPayjpCheckoutOnCreated = this.onCreated;에서는 component Will Unmountwindow.reactPayjpCheckoutOnCreated = null;를 쓰기로 했다.그리고 프롬프트에서 호출된 함수를 받으면 실행할 때this도 미리 준비해야 합니다.이것도 window.reactPayjpCheckoutContext = this;처럼 피하게 하고 평소this.props.onCreatedHandler();로 부르는 처리도 window.reactPayjpCheckoutContext.props.onCreatedHandler();로 할 수 있다.
  • payjp의 checkkout에서 오류 메시지 ("카드의 유효기간이 지났습니다") 를 엽니다.alert에서 강제로 진행합니다.이 구성 요소가 마운트되었을 때 window.alert = () => {};, 이 표시는 취소되었습니다.
  • 오류 메시지는 data-on-failed에서 자신이 응용한 모드 대화상자의 동작을 호출해서 표시할 수 있습니다.분류: material-ui의 Dialog면z-idex의 값을 증가시켜야 합니다.메시지에서 다음과 같이 설정합니다.
    •     zIndex: {
        dialog: 100000,
    },
  • component Will Unmountwindow.PayjpCheckout = null;에서 한 이유는 다음과 같다.PAY.JP의 단추를 표시하려면 script 탭으로 읽는 JS는 iframe입니다.그것은 나를}라고 부른다. 그것은 iframe라고 부른다.서버입니다.css와 iframe.js 호출을 통해 이루어졌습니다.그 과정에서PayjpCheckout 대상이 만들어졌지만 이 상태에서 실행https://checkout.pay.jp/된 JS, iframe.> 을(를) 호출할 수 없습니다.화면 마이그레이션, 다시 PAY.JP의 단추가 표시될 화면으로 되돌아갈 때, 단추를 표시하기 위해 window에 있습니다.PayJpCheckout을 가짜로 설정할 필요가 있습니다.
  • shoulld Component Update를 통해 가짜 정보를 자주 되돌려주는 것은 이 구성 요소가render에 한 번만 있으면 충분하기 때문이다.
    • REACTROUTER 사용
    어떻게 셀렌 원소의 텍스트를 얻습니까?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage