[javascript] Vue.js와 Stripe 결제 시스템 연동하기

01 Dec 2023

javascript

본 글에서는 Vue.js와 Stripe 결제 시스템을 연동하는 방법에 대해 알아보겠습니다.

Stripe 계정 생성

우선 Stripe 계정을 생성해야 합니다. Stripe 웹사이트에 접속하여 계정을 생성하세요. 계정 생성 후에는 API 키를 발급받아야 합니다.

Vue.js 프로젝트 설정

Vue.js 프로젝트를 생성하고 Stripe 모듈을 설치해야 합니다. 프로젝트 폴더에서 다음 명령을 실행하세요:

vue create stripe-demo
cd stripe-demo
npm install vue-stripe-elements-plus --save

Stripe 모듈인 vue-stripe-elements-plus를 설치했습니다.

Stripe API 키 설정

Vue.js 프로젝트의 main.js 파일에서 Stripe API 키를 설정해야 합니다. 다음과 같이 코드를 작성하세요:

import Vue from 'vue'
import VueStripeCheckout from 'vue-stripe-elements-plus';

Vue.use(VueStripeCheckout, {
  stripeKey: 'YOUR_STRIPE_API_KEY'
});

new Vue({
  render: (h) => h(App)
}).$mount('#app')

YOUR_STRIPE_API_KEY에는 Stripe에서 발급받은 API 키를 입력해야 합니다.

결제 폼 생성

테스트용 결제 폼을 생성해보겠습니다. Vue 파일의 <template>에 다음과 같이 코드를 작성하세요:

<template>
  <form @submit.prevent="handlePayment">
    <input type="text" placeholder="신용카드 번호" v-model="cardNumber">
    <input type="text" placeholder="만료일 (MM/YY)" v-model="expiry">
    <input type="text" placeholder="CVC" v-model="cvc">
    <button type="submit">결제하기</button>
  </form>
</template>

v-model 디렉티브로 각 입력 필드의 값을 Vue 컴포넌트의 데이터와 바인딩합니다.

결제 처리

Vue 파일의 <script>에 결제 처리 코드를 작성하세요:

<script>
export default {
  data() {
    return {
      cardNumber: '',
      expiry: '',
      cvc: ''
    }
  },
  methods: {
    handlePayment() {
      // Stripe 결제 처리 코드 작성
    }
  }
}
</script>

handlePayment 메서드 내에서 Stripe 결제 처리 코드를 작성해야 합니다. Stripe API를 호출하여 결제를 완료하고 결과를 처리하는 로직을 구현하세요.

결제 완료 후 이벤트 처리

결제가 완료된 후에 사용자에게 알리기 위해 Stripe API에서 제공하는 이벤트를 처리할 수 있습니다. Vue 파일의 <script>에 다음 코드를 추가하세요:

methods: {
  handlePayment() {
    // Stripe 결제 처리 코드 작성

    this.$stripe.completePayment().then((result) => {
      if (result.error) {
        // 결제 실패한 경우
        console.error(result.error);
      } else {
        // 결제 성공한 경우
        console.log('결제가 완료되었습니다.');
      }
    });
  }
}

결제 완료 이후, this.$stripe.completePayment()를 호출하고 결과를 처리합니다. 결제가 실패한 경우 result.error가 반환되며, 성공한 경우 result에는 추가 정보가 포함됩니다.

결제 시스템 연동 완료

이제 Vue.js와 Stripe 결제 시스템을 연동하는 것이 완료되었습니다. 위의 단계를 따라 진행하면서 나만의 결제 시스템을 구축할 수 있습니다. Stripe API 문서를 참고하여 필요한 기능을 추가할 수도 있습니다.