Toss Payments Flutter plugin.

플러터 앱에서 토스페이먼츠를 사용해서 앱내 결제기능을 구현하고자 하는 분들에게 도움이 되고자 합니다.
토스페이먼츠에 대한 자세한 사항은 "https://docs.tosspayments.com/" 를 참고해주세요.

Features

1. 결제창 연동하기 및 웹뷰를 사용한 외부 앱 연동.

Getting started

외부 앱 연동을 위해서는 각 OS별로 환경 세팅을 해줘야 합니다.

1. IOS

Info.plist에 외부앱 실행을 위한 Scheme 추가.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>supertoss</string> <!-- 토스페이 -->
    <string>mpocket.online.ansimclick</string> <!-- 삼성카드앱카드 -->
    <string>hdcardappcardansimclick</string> <!-- 현대카드앱카드 -->
    <string>smhyundaiansimclick</string> <!-- 현대카드공인인증서 -->
    <string>wooripay</string> <!-- 우리카드앱카드 -->
    <string>shinhan-sr-ansimclick</string> <!-- 신한카드앱카드 -->
    <string>smshinhanansimclick</string> <!-- 신한카드공인인증서 -->
    <string>kb-acp</string> <!-- 국민카드앱카드 -->
    <string>lottesmartpay</string> <!-- 롯데카드모바일결제 -->
    <string>lotteappcard</string> <!-- 롯데카드앱카드 -->
    <string>cloudpay</string> <!-- 하나카드앱카드 -->
    <string>nhappvardansimclick</string> <!-- 농협카드-앱카드 -->
    <string>nonghyupcardansimclick</string> <!-- 농협카드공인인증서 -->
    <string>citispay</string> <!-- 씨티카드앱카드 -->
    <string>citicardappkr</string> <!-- 씨티카드공인인증서 -->
    <string>ispmobile</string> <!-- ISP모바일 -->
</array>

3. Android

a. 안드로이드 Min SDK 를 20 이상으로 설정해주세요.

android/app/build.gradle에 defaultConfig

defaultConfig {
    ...
    minSdkVersion 20
    ...
}

b. manifest에 외부앱 실행을 위한 scheme 및 permission을 추가해주세요.

android/app/main/AndroidManifest.xml

<uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />
<queries>
    <!-- 토스 -->
    <package android:name="viva.republica.toss" />
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="supertoss" />
    </intent>
    <!-- 삼성카드 -->
    <package android:name="kr.co.samsungcard.mpocket" />
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="mpocket.online.ansimclick" />
    </intent>
    <!-- 현대카드 -->
    <package android:name="com.hyundaicard.appcard" />
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="hdcardappcardansimclick" />
    </intent>
    <!-- 현대카드공인인증서 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="smhyundaiansimclick" />
    </intent>
    <!-- 우리카드앱카드 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="wooripay" />
    </intent>
    <!-- 신한카드앱카드 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="shinhan-sr-ansimclick" />
    </intent>
    <!-- 신한카드공인인증서 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="smshinhanansimclick" />
    </intent>
    <!-- 국민카드앱카드 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="kb-acp" />
    </intent>
    <!-- 롯데카드모바일결제 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="lottesmartpay" />
    </intent>
    <!-- 롯데카드앱카드 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="lotteappcard" />
    </intent>
    <!-- 하나카드앱카드 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="cloudpay" />
    </intent>
    <!-- 농협카드-앱카드 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="nhappvardansimclick" />
    </intent>
    <!-- 농협카드공인인증서 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="nonghyupcardansimclick" />
    </intent>
    <!-- 씨티카드공인인증서 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="citicardappkr" />
    </intent>
    <!-- ISP모바일 -->
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="ispmobile" />
    </intent>
</queries>

추가 팁

a. 안드로이드 웹에 접근되지 않을 때

usesCleartextTraffic 세팅을 true로 해주세요.

android/app/main/AndroidManifest.xml

<application
  ...
  android:usesCleartextTraffic="true">
...
</application>

b. 안드로이드 12 이상에서 앱이 설치 혹은 실행되지 않을 때

android:exported 를 "true"로 세팅해주세요.

android/app/main/AndroidManifest.xml

<activity
  android:name=".MainActivity"
  ...
  android:exported="true">
...
</activity>

Usage

"PaymentWebView" 을 통해서 결제창과 연동할 수 있습니다.

PaymentWebView(title: "결제 페이지 타이틀", paymentRequestUrl: Uri.parse("결제 웹 페이지 주소"))

Additional information

!!Notice!!

• example 앱 내에 Mock Server를 사용해 Web Page 구현해 두었습니다. 실제로 사용하실 때는 Web Page를 작성하셔서 사용해야 합니다.

Roadmap

a. Test Code.

b. Etc.