Flutter - iamport 카카오페이 결제 테스트 및 결제 내역 확인

이전 테스트에 이어서 진행 -  https://seong9566.tistory.com/270

카카오 페이 pg사 연결 하고 결제 테스트 까지 진행해보기

1. 아임포트 가입 및 가맹점 번호 확인 (가맹점 번호 = 나)

iamport홈페이지 -> 회원가입 -> 로그인 -> 왼쪽 패널에서 상점 * 계정 관리 -> 내 식별코드 

확인을 해보면 , 내 가맹점 식별코드, REST API Key가 있다. 

REST API Key는 결제 이후 iamport 서버에 정보가 필요할때 사용된다. Ex)내 서버에 저장된 정보 <=> iamport서버 정보 비교 

2. 테스트 연동 하기 

실 결제가 아닌 테스트만 할 것 이기때문에 테스트 연동을 해야한다.

카카오 페이지를 테스트 하기 위해서 테스트 -> 카카오페이 -> 카카오페이 -> 추가 

만들어졌다.

\

3. 코드 작성

결제 정보 부분에 pg에 "kakaopay"를 쓰면된다, 만약 다른 결제를 하고싶다면 해당되는 결제 키워드를 넣으면된다 

지원 pg사 정보 및 공식 git 문서 - https://github.com/iamport/iamport_flutter/blob/main/SUPPORT.md

넣었으면 이제 실행하고 결제 테스트를 진행하면 된다

테스트 진행은 가상 에뮬레이터로 하면 안된다고 한다 , 실 기기에 연결하거나 웹으로 만들어서 테스트 진행해야한다.

4.결제 화면

5. 결제 내역 확인하기

홈페이지 -> 아래쪽 구 관리자 콘솔 -> 결제 승인내역

확인하면 아래 처럼 결제 내역이 나온다

다음으로 실행하고 콘솔로 확인

전체 코드

import 'package:flutter/material.dart';

import 'package:iamport_flutter/iamport_payment.dart';
import 'package:iamport_flutter/model/payment_data.dart';
import 'package:logger/logger.dart';

void main() => runApp(
      MaterialApp(
        title: '테스트',
        home: MyApp(),
      ),
    );

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FirstScreen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('결제 하러가기'),
          onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) => Payment()));
          },
        ),
      ),
    );
  }
}

// 결제 페이지
class Payment extends StatelessWidget {
  Payment({super.key});

  @override
  Widget build(BuildContext context) {
    return IamportPayment(
      appBar: AppBar(
        title: Text('아임포트 결제'),
      ),
      /* 웹뷰 로딩 컴포넌트 */
      initialChild: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(padding: EdgeInsets.symmetric(vertical: 15)),
            Text('잠시만 기다려주세요...', style: TextStyle(fontSize: 20)),
          ],
        ),
      ),
      /* [필수입력] 가맹점 식별코드 */
      userCode: '', // 아임포트 관리자 콘솔에서 확인한 '가맹점 식별코드' 입력
      /* [필수입력] 결제 데이터 */
      data: PaymentData(
        pg: "kakaopay", // PG상점 아이디 -> 카카오 페이, 등등 여러가지
        payMethod: "card", // 결제수단
        name: '최고의 웹 페이지 제작', // 주문명
        merchantUid: 'mid_${DateTime.now().millisecondsSinceEpoch}', // 주문번호
        amount: 100, // 결제금액
        buyerName: '홍길동', // 구매자 이름
        buyerTel: '01012345678', // 구매자 연락처
        buyerEmail: 'example@naver.com', // 구매자 이메일
        appScheme: 'example', // 앱 URL scheme
      ),
      /* [필수입력] 결제 성공 이나 실패 했을때 반환되는 함수이다. */
      callback: (Map<String, String> result) {
        Logger().d("결제 정보 확인 :  ${result}");
        Navigator.pushReplacementNamed(
          context,
          '/result',
          arguments: result,
        );
      },
    );
  }
}

---

 

1. 내 서버로 결과 값 전달하기

2. Get요청해서 결제 내역 출력하기