toss_payment

Description:

toss payment

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

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

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>
copied to clipboard
3. Android #
a. 안드로이드 Min SDK 를 20 이상으로 설정해주세요.
android/app/build.gradle에 defaultConfig
defaultConfig {
...
minSdkVersion 20
...
}
copied to clipboard
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>
copied to clipboard
추가 팁 #
a. 안드로이드 웹에 접근되지 않을 때
usesCleartextTraffic 세팅을 true로 해주세요.
android/app/main/AndroidManifest.xml
<application
...
android:usesCleartextTraffic="true">
...
</application>
copied to clipboard
b. 안드로이드 12 이상에서 앱이 설치 혹은 실행되지 않을 때
android:exported 를 "true"로 세팅해주세요.
android/app/main/AndroidManifest.xml
<activity
android:name=".MainActivity"
...
android:exported="true">
...
</activity>
copied to clipboard
Usage #
"PaymentWebView" 을 통해서 결제창과 연동할 수 있습니다.
PaymentWebView(title: "결제 페이지 타이틀", paymentRequestUrl: Uri.parse("결제 웹 페이지 주소"))
copied to clipboard
Additional information #
!!Notice!!

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

Roadmap
a. Test Code.
b. Etc.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter