vue3에 Toss Payments 연동하기 기본

1. package 설치하기

$ yarn add @tosspayments/payment-sdk
or
$ npm install @tosspayments/payment-sdk --save

@tosspayments/payment-sdk 는 동적으로 HTML에 sdk script (<script src="https://js.tosspayments.com/v1"></script>)를 삽입하는 역할을 합니다.

2. useToassPayments 만들기

// useToassPayments.ts

import { loadTossPayments } from '@tosspayments/payment-sdk'

// clientKey는 toss에서 제공하는 테스트키입니다.
const clientKey = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq'

// key와 함께 tosspayments를 초기화합니다.
const tossPayments = await loadTossPayments(clientKey)

![](https://velog.velcdn.com/images%2Fshelly%2Fpost%2Feef550a6-06bc-4bc8-b0a7-d9a5b14b344a%2FScreen%20Shot%202022-02-08%20at%202.35.41%20PM.png)

export default usePayments

3. TossPayments 사용하기

<script setup lang="ts">
  import usePayments from './usePayments'
  
  const { payments } = usePayments()
 
  payments.requestPayment('가상계좌', {
    amount: 15000,
    orderId: 'BHEePsINAHfpJ5Yx9Mgbf',
    orderName: '토스 티셔츠 외 2건',
    customerName: '박토스',
    successUrl: 'http://localhost:8080/success',
    failUrl: 'http://localhost:8080/fail',
  })
</script>

requestPayment의 첫 번째 파라미터는 결제 방식이고, 두 번째 파라미터는 결제 정보를 넘겨줍니다.

위의 코드가 실행되면 아래와같이 toss payments의 기본 결제UI가 나타납니다.

결제정보에 넘겨준 데이터가 위의 화면에서 나타납니다.