토스 페이

TossPay

지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDKv1.0.3

실행환경: Toss AppSandbox App

TossPay는 토스페이 결제 관련 함수를 모아둔 객체예요.

시그니처

TossPay: {
  checkoutPayment: typeof checkoutPayment;
}

프로퍼티

• checkoutPaymenttypeof checkoutPayment
  

  토스페이 결제를 인증하는 함수예요. 자세한 내용은 checkoutPayment를 참고하세요.

checkoutPayment

지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDKv1.0.3

실행환경: Toss AppSandbox App

checkoutPayment 함수는 토스페이 결제창을 띄우고, 사용자 인증을 수행해요. 인증이 완료되면 성공 여부를 반환해요.

이 함수는 결제창을 통해 사용자 인증만 해요. 실제 결제 처리는 인증 성공 후 서버에서 별도로 해야 해요.

시그니처

function checkoutPayment(options: CheckoutPaymentOptions): Promise<CheckoutPaymentResult>;

파라미터

• options필수 · CheckoutPaymentOptions
  

  결제창을 띄울 때 필요한 옵션이에요.

반환 값

• Promise<CheckoutPaymentResult>
  

  인증 성공 여부를 포함한 결과를 반환해요.

예제

토스페이 결제창 띄우고 인증 처리하기

js

import { checkoutPayment } from '@apps-in-toss/web-framework';

async function handleCheckoutPayment() {
  try {
    // 실제 구현 시 결제 생성 역할을 하는 API 엔드포인트로 대체해주세요.
    const { payToken } = await fetch('/my-api/payment/create').then((res) => res.json());
    const { success, reason } = await checkoutPayment({ payToken });

    if (success) {
      // 실제 구현 시 결제를 실행하는 API 엔드포인트로 대체해주세요.
      await fetch('/my-api/payment/execute', {
        method: 'POST',
        body: JSON.stringify({ payToken }),
        headers: { 'Content-Type': 'application/json' },
      });
      console.log('결제 성공');
    } else {
      console.log('인증 실패:', reason);
    }
  } catch (error) {
    console.error('결제 인증 중 오류가 발생했어요:', error);
  }
}

React

import { checkoutPayment } from '@apps-in-toss/web-framework';
import { Button } from '@toss/tds-mobile';

function TossPayButton() {
  async function handlePayment() {
    try {
      // 실제 구현 시 결제 생성 역할을 하는 API 엔드포인트로 대체해주세요.
      const { payToken } = await fetch('/my-api/payment/create').then((res) => res.json());

      const { success, reason } = await checkoutPayment({ payToken });

      if (success) {
        // 실제 구현 시 결제를 실행하는 API 엔드포인트로 대체해주세요.
        await fetch('/my-api/payment/execute', {
          method: 'POST',
          body: JSON.stringify({ payToken }),
          headers: { 'Content-Type': 'application/json' },
        });
        console.log('결제 성공');
      } else {
        console.log('인증 실패:', reason);
      }
    } catch (error) {
      console.error('결제 인증 중 오류가 발생했어요:', error);
    }
  }

  return <Button onClick={handlePayment}>결제하기</Button>;
}

React Native

import { TossPay } from '@apps-in-toss/framework';
import { Button } from '@toss/tds-react-native';

function TossPayButton() {
  async function handlePayment() {
    try {
      // 실제 구현 시 결제 생성 역할을 하는 API 엔드포인트로 대체해주세요.
      const { payToken } = await fetch('/my-api/payment/create').then((res) => res.json());

      const { success, reason } = await TossPay.checkoutPayment({ payToken });

      if (success) {
        // 실제 구현 시 결제를 실행하는 API 엔드포인트로 대체해주세요.
        await fetch('/my-api/payment/execute', {
          method: 'POST',
          body: JSON.stringify({ payToken }),
          headers: { 'Content-Type': 'application/json' },
        });
        console.log('결제 성공');
      } else {
        console.log('인증 실패:', reason);
      }
    } catch (error) {
      console.error('결제 인증 중 오류가 발생했어요:', error);
    }
  }

  return <Button onPress={handlePayment}>결제하기</Button>;
}

CheckoutPaymentOptions

지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDKv1.0.3

실행환경: Toss AppSandbox App

CheckoutPaymentOptions 는 토스페이 결제창을 띄울 때 필요한 옵션이에요.

시그니처

interface CheckoutPaymentOptions {
  payToken: string;
}

프로퍼티

• payToken필수 · string
  

  결제 토큰이에요.

CheckoutPaymentResult

지원환경: React NativeReact Native SDKv1.0.3WebViewWebView SDKv1.0.3

실행환경: Toss AppSandbox App

CheckoutPaymentResult 는 토스페이 결제창에서 사용자가 인증에 성공했는지 여부예요.

시그니처

interface CheckoutPaymentResult {
  success: boolean;
  reason?: string;
}

프로퍼티

• success필수 · boolean
  

  인증이 성공했는지 여부예요.

• reasonstring
  

  인증이 실패했을 경우의 이유예요.