xoneto99 Comments - Toss payments 개발자 커뮤니티

또한, flutter 로 개발하고, react 계열로 웹을 구성하여 Toss Payment UI 를 구성할 경우 보통 flutter 로 webview_flutter, inAppWebView 모듈들을 통해 구현하게 되는데, 제가 해 본바로는 이유는 알 수 없지만 inAppWebView는 UI를 화면에 띄워 주지 않습니다. 이유는 모릅니다... 또한 webview_flutter를 사용 할경우 UI 모듈은 잘 나오는데

var brandpay = BrandPay(clientKey, customerKey, {
  redirectUrl: 'http://example.com',
  ui: {
    highlightColor: '#26C2E3',
    buttonStyle: 'full',
    labels: {
      oneTouchPay: '내 상점 원터치결제',
    },
  },
  windowTarget: 'iframe'
})

var brandpay = BrandPay(clientKey, customerKey, {
  redirectUrl: 'http://example.com',
  ui: {
    highlightColor: '#26C2E3',
    buttonStyle: 'full',
    labels: {
      oneTouchPay: '내 상점 원터치결제',
    },
  },
  windowTarget: 'iframe'
})

와 같이 초기화 할때 보통 redirectUrl과 customerKey가 들어갑니다. redirectUrl은 env에 등록하면 되고.. customerKey가 flutter에서 react로 데이터 송신을 해야 합니다. 이때 runJavascritp를 사용하게 됩니다. 이 모듈은 위에 언급한 바와 같이 react 내부 함수 호출이 불가합니다. 따라서 많은 구글링 결과... CusomEvent를 addListner로 등록하여 실행하였습니다. 그리고 runJavaScript 실행은

controller.runJavaScript(
        "window.dispatchEvent(new CustomEvent('customerEventHandler', { detail: { userId: '$userId' } }));",
      );

controller.runJavaScript(
        "window.dispatchEvent(new CustomEvent('customerEventHandler', { detail: { userId: '$userId' } }));",
      );

이렇게 해서 데이터 전송을 하였습니다. 저같은 경우 nextjs로 하였는데요 redirect시에 cors 에러를 피하기 위해서 사용하였습니다. 그런데 이때에 nextjs를 기본적으로 사용하는 arrow function으로 구성하면 runJavscript 실행시 오류가 뜹니다.. 이도 구체적인 원인을 모르겠습니다. 구글링을 많이 했는데 명확한 증상은 없네요.. 그래서 찾다가 nextjs를 class components로 구성하여 작동 시켰더니 사용 가능했습니다. 저는 이렇게 구현하였습니다. 이도저도 안 될때는 그냥 query string 사용하려고 하였는데... id가 query string으로 전달되는게 좀 찜찜해서 ... 그냥 이렇게 구현하였습니다 . 구체적인 오류들을 정확히 알수 없어서 이렇다할 해결책을 명확히 제시는 못하겠구요... 저는 이렇게 구성하였습니다. 오류로 빡치는 상황들에 몰리신 분들에게 도움이 되고자 적었습니다. 이 문제로 제가 2주동안 매우 빡쳤었으므로 다른 분들은 편히 가시면 좋겠습니다. 또한 상담해주신 많은 분들께 감사함을 전합니다 . 감사합니다.

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

누군가 해당 포스트를 보고 참고하시면 좋을 것 같아서 추가로 덧붙입니다. flutter 에서 webview_flutter 모듈을 사용하여 react , nextjs 에 runjavascript를 통해 데이터를 전송한다면 react 컴포넌트 내부 함수는 외부에서 콜을 할 수 없다고 합니다.

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

감사합니다. 그렇다면 그 방법으로 ...쿼리 스트링으로 날리도록하겠습니다. 긴 내용과 번잡스런 내용이였음에도 도와주셔서 모두 감사합니다.

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

그러면 저기서 channal은 안드로이드 쪽이란 말씀이신건 이해를 하였습니다. 감사합니다. 그...음... 제가 아직 이해가 안되는 부분이.. 브랜드페이를 사용할경우 react로 초기화 할경우, 토스 가이드에서 javascript SDK를 사용하여 초기화 할경우 https://docs.tosspayments.com/reference/brandpay-sdk#ui-%EC%98%B5%EC%85%98-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0 여기 옵션설정하기 보면 초기화가 나오는데요,

var brandpay = BrandPay(clientKey, customerKey, {
  redirectUrl: 'http://example.com',
  ui: {
    highlightColor: '#26C2E3',
    buttonStyle: 'full',
    labels: {
      oneTouchPay: '내 상점 원터치결제',
    },
  },
  windowTarget: 'iframe'
})

var brandpay = BrandPay(clientKey, customerKey, {
  redirectUrl: 'http://example.com',
  ui: {
    highlightColor: '#26C2E3',
    buttonStyle: 'full',
    labels: {
      oneTouchPay: '내 상점 원터치결제',
    },
  },
  windowTarget: 'iframe'
})

이부분에 보면 customerKey가 나오는데요. 이부분에 customerKey를 서버에 전달하려면, flutter_webview에서 데이터를 전달해야 하는데요. 혹시 이부분도 구현이 가능하셨나요 ?

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

아

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

그래요 ?? channel을 사용 안하면.... user key data를 못주지 않나요 ?

const _prepare = useCallback(async () => {
        try {
            let brandpay = await loadBrandPay(
                process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY!,
                userId,
                {
                    redirectUrl: process.env.NEXT_PUBLIC_TOSS_CALLBACK_URL,
                    ui: {
                        highlightColor: "#26C2E3",
                        buttonStyle: "full",
                    },
                    windowTarget: "iframe",
                }
            );
            brandpayRef.current = brandpay;
            await brandpay.addPaymentMethod("카드");
        } catch (error: any) {
            console.log("error======>", error);
        }
    }, [userId]);

const _prepare = useCallback(async () => {
        try {
            let brandpay = await loadBrandPay(
                process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY!,
                userId,
                {
                    redirectUrl: process.env.NEXT_PUBLIC_TOSS_CALLBACK_URL,
                    ui: {
                        highlightColor: "#26C2E3",
                        buttonStyle: "full",
                    },
                    windowTarget: "iframe",
                }
            );
            brandpayRef.current = brandpay;
            await brandpay.addPaymentMethod("카드");
        } catch (error: any) {
            console.log("error======>", error);
        }
    }, [userId]);

제가 이런식으로 짰는데요, 보면

 let brandpay = await loadBrandPay(
                process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY!,
                userId,

 let brandpay = await loadBrandPay(
                process.env.NEXT_PUBLIC_TOSS_CLIENT_KEY!,
                userId,

이부분에 loadBrandPay할때 customerKey를 줘야해서 channal 사용해야 하지 않나요??

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

그렇군요 서버에서 하나보군요 ..

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

주신 샘플코드는 역시 서버에서 초기화 하나요 ?

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

아니면 제가 샘플 코드를 받아 볼 수 있을까요 ??

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

하나 더 여쭤볼게요. 혹시 그러면 flutter_webview로 하실때 데이터 어떻게 주고 받나요 ?? 하시는 초기화 react 로 하시나요? nextjs로 하시나요 ?

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

그럼 webview_flutter로 해보도록 할까 싶네요... 이유는 사실 잘 모르겠는데 webview_flutter로 할 경우 데이터를 주고 받기 위해 runJavascript를 실행하는데 이게 잘 안되서 inappwebview로 한걸로 기억하거든요.. 객체 초기화는 웹서버에서 합니다. ㅎ nextjs로 하였습니다.

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

그 외에 특별한 것은 잘 모르겠습니다. ㅠ 구글링도 많이 했지만... 이게 아이폰 문제인가 싶기도 하구요 ...

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

Error: 잘못된 요청입니다. 이런 에러가 반환되어 왔구요..

This method should not be called on the main thread as it may lead to UI unresponsiveness.

This method should not be called on the main thread as it may lead to UI unresponsiveness.

이런 시스템 에러가 뜨고 .. [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}> [ProcessSuspension] 0x11c01c540 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'WebProcess Background Assertion' for process with PID=3890, error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit} [assertion] Error acquiring assertion: <Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit}> [ProcessSuspension] 0x11c01c6c0 - ProcessAssertion::acquireSync Failed to acquire RBS assertion 'WebProcess Suspended Assertion' for process with PID=3890, error: Error Domain=RBSServiceErrorDomain Code=1 "target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit" UserInfo={NSLocalizedFailureReason=target is not running or doesn't have entitlement com.apple.runningboard.assertions.webkit} 이런 것??? 이뜨는데요.. 음...

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

입니다.

32 replies

TPToss payments 개발자 커뮤니티

•Created by xoneto99 on 2/28/2023 in #❓┃연동개발-문의

[flutter][brandpay] 초기화 오류

63a32457307d4f4f7e839e02

32 replies