capacitor-tosspayments


토스페이먼츠를 Ionic / Capacitor 환경에서 사용할 수 있도록 만든 플러그인입니다

지원정보

* 현재 이 플러그인은 Capacitor v2만 지원합니다.
* 현재 이 플러그인은 토스페이먼츠의 일반결제 내 requestPayment() 기능만 제공합니다.

설치하기

아래 명령어를 통해 Capacitor 모듈을 귀하의 캐패시터 프로젝트에 추가할 수 있습니다.

``
$ npm install capacitor-tosspayments --save
`

앱을 빌드하고 빌드한 내용을 네이티브 코드에 카피합니다.

`
$ npm run build 또는 ionic build
$ npx cap copy
`

설정하기

카드사 앱(서드파티앱)을 열기 위한 설정이 필요합니다. 아임포트 캐퍼시터 플러그인과 동일한 방식으로 돌아가므로 해당 설정을 참고해주세요.

$3

#### 1. Plugin 모듈 추가하기

`java
import glit.capacitor.tosspayments.TossPaymentsPlugin;

public class MainActivity extends BridgeActivity {
...
this.init(savedInstanceState, new ArrayList>() {{
...
add(TossPaymentsPlugin.class);
});
}
`

#### 2. Webview를 위한 액티비티 추가하기
AndroidManifest.xml 파일(android/app/src/main에 위치)에 액티비티를 아래와 같이 추가해주세요.

`html


...
android:name="glit.capacitor.tosspayments.TossPaymentsActivity"
android:label="TossPaymentsActivity"
>

...


`

$3


#### 1. 외부 앱 URL 스킴 등록 info.plist
`html
...
LSApplicationQueriesSchemes

itms-appss
supertoss
kb-acp
liivbank
nhappcardansimclick
nhallonepayansimclick
nonghyupcardansimclick
lottesmartpay
lotteappcard
mpocket.online.ansimclick
ansimclickscard
tswansimclick
ansimclickipcollect
vguardstart
samsungpay
scardcertiapp
shinhan-sr-ansimclick
smshinhanansimclick
com.wooricard.wcard
newsmartpib
citispay
citicardappkr
citimobileapp
cloudpay
hanawalletmembers
hdcardappcardansimclick
smhyundaiansimclick
shinsegaeeasypayment
payco
lpayapp
ispmobile
tauthlink
ktauthexternalcall
upluscorporation

`

#### 2. App Transport Security 설정 info.plist
`html
...
NSAppTransportSecurity

NSAllowsArbitraryLoadsInWebContent

NSAllowsArbitraryLoads


`


#### 참고
https://github.com/iamport/iamport-capacitor/blob/master/manuals/SETTING_IOS.md
https://github.com/iamport/iamport-capacitor/blob/master/manuals/SETTING_ANDROID.md

API

` typescript
import { TossPayments } from 'capacitor-tosspayments';
...
const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq';
const tossPayments = new TossPayments(clientKey);

await tossPayments.requestPayment('카드', {
amount: 15000,
orderId: 'WyzNriVXGrKJOZHx-g2ks',
orderName: '토스 티셔츠 외 2건',
customerName: '박토스',
successCallback: (url:string)=>{
console.log('결제 성공: ' + decodeURIComponent(url));
},
failCallback: (url:string)=>{
console.log('결제 실패: ' + decodeURIComponent(url));
},
});

`

주의사항


* iOS / Android 환경에서 플러그인 웹뷰와 Ionic 웹뷰간의 소통을 위해, 토스페이먼츠 SDK의 successUrl과 failUrl 파라미터가 successCallback과 failCallback 형태의 콜백함수(필수)로 대체됩니다.
* Web 환경(Unimplemented)에서는, 토스페이먼츠 JS SDK와 동일하게, successUrl과 failUrl 파라미터로 작동되며, successCallback과 failCallback`은 무시됩니다.