Toss payments 개발자 커뮤니티Tp개커Toss payments 개발자 커뮤니티
Powered by
@kodingwarrior@hackers.pub@
Toss payments 개발자 커뮤니티•3y ago•
9 replies
@kodingwarrior@hackers.pub

Flutter Webview에서 Javascript SDK 연동할 수 있는 방법이 있나요?

모바일 웹뷰 환경에서 javascript SDK를 활용해서 결제를 시도하면, "모바일 화면에서는 Promise 방식을 지원하지 않습니다." 에러가 표시됩니다.
아래는 flutter_webview 패키지를 사용하여 결제를 시도한 코드입니다.

// 카스텀 웹뷰 widget을 포함하는 widget 
class TossPayment extends StatelessWidget {
  final Widget? initialChild;
  final String clientKey;
  final PaymentData? data;
  final callback;
  final Set<Factory<OneSequenceGestureRecognizer>>? gestureRecognizers;

  TossPayment({
    Key? key,
    this.initialChild,
    required this.clientKey,
    required this.data,
    required this.callback,
    this.gestureRecognizers,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
        var redirectUrl = UrlData.redirectUrl;
      return TossPaymentsWebView(
        type: ActionType.payment,
        initialChild: this.initialChild,
        gestureRecognizers: this.gestureRecognizers,
        executeJS: (WebViewController controller) {
          controller.runJavascript('''
            var tossPayments = TossPayments("${this.clientKey}");
            tossPayments.requestPayment("카드", ${jsonEncode(this.data?.toJson())})
          ''');
        },
        customPGAction: (WebViewController controller) {
          return null;
        },
        useQueryData: (Map<String, String> data) {
          this.callback(data);
        },
        isPaymentOver: (String url) {
          if (url.startsWith(redirectUrl)) {
            return true;
          }

          return false;
        },
      );
  }
}
// 카스텀 웹뷰 widget을 포함하는 widget 
class TossPayment extends StatelessWidget {
  final Widget? initialChild;
  final String clientKey;
  final PaymentData? data;
  final callback;
  final Set<Factory<OneSequenceGestureRecognizer>>? gestureRecognizers;

  TossPayment({
    Key? key,
    this.initialChild,
    required this.clientKey,
    required this.data,
    required this.callback,
    this.gestureRecognizers,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
        var redirectUrl = UrlData.redirectUrl;
      return TossPaymentsWebView(
        type: ActionType.payment,
        initialChild: this.initialChild,
        gestureRecognizers: this.gestureRecognizers,
        executeJS: (WebViewController controller) {
          controller.runJavascript('''
            var tossPayments = TossPayments("${this.clientKey}");
            tossPayments.requestPayment("카드", ${jsonEncode(this.data?.toJson())})
          ''');
        },
        customPGAction: (WebViewController controller) {
          return null;
        },
        useQueryData: (Map<String, String> data) {
          this.callback(data);
        },
        isPaymentOver: (String url) {
          if (url.startsWith(redirectUrl)) {
            return true;
          }

          return false;
        },
      );
  }
}
Toss payments 개발자 커뮤니티 banner
Toss payments 개발자 커뮤니티Join
Toss payments 개발자 커뮤니티입니다. 결제 연동하며 겪는 기술 문의부터, 결제 시장에 대한 다양한 정보까지 얻어가세요~
15,588Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

toss payment server status 를 알 수 있는 방법이 있나요?
두들러두두들러 / ❓┃연동개발-문의
15mo ago
결제 위젯에서 카드가 선택되어 있지 않음을 알 수 있는 방법이 있나요?
emewjinEemewjin / ❓┃연동개발-문의
3y ago
브랜드페이에 일반 사용자가 법인 카드를 등록해서 사용할 수 있는 방법이 있나요?
vaonaVvaona / ❓┃연동개발-문의
4y ago
결제위젯 연동 시 특정 결제 수단(신용/체크카드)만 노출할 수 있는 방법이 있나요?
kcyangKkcyang / ❓┃연동개발-문의
3y ago