@tosspayments/payment-sdk-react-native NPM

payment-sdk-react-native

Payment SDK for React Native

Installation

# npm
npm install @tosspayments/payment-sdk-react-native

# yarn
yarn add @tosspayments/payment-sdk-react-native

Usage

import { PaymentContextProvider, usePaymentWidget } from "payment-sdk-react-native";

// ...
export default function App() {
  const [amount, onChangeAmount] = useState<Amount>({
    value: 1000,
    currency: 'KRW',
    country: 'KR',
  });
  return <PaymentContextProvider 
    clientKey={`test_ck_0Poxy1XQL8R4P1zpv14V7nO5Wmlg`}
    customerKey={`TOSSPAYMENTS`}
    onSuccess={(success) => {
      Alert.alert('결제성공', `${JSON.stringify(success)}`);
    }}
    onFail={(fail) => {
      Alert.alert(`결제실패`, `${JSON.stringify(fail)}`);
    }}
  >
    <Widget amount={amount}>
  </PaymentContextProvider>
}

function Widget({ amount }: { amount: Amount }) {
  const widget = usePaymentWidget();
  return (
    <>
      <PaymentMethodWidget 
        amount={amount}
        variantKey={`DEFAULT`}
      />
      <AgreementWidget>
      <Button
        title="결제요청"
        onPress={() => {
          const agreeement = widget?.getAgreementStatus();
          if (agreeement?.agreedRequiredTerms != true) {
            Alert.alert('약관에 동의하지 않았습니다.');
            return;
          }
          widget?.requestPayments?.({
            orderId: "OrderId_123",
            orderName: "김토스",
            cultureExpense: true,
          });
        }}
      />
      <Button
        title="선택된 결제수단"
        onPress={() => {
            Alert.alert(`선택된 결제수단: ${JSON.stringify(widget?.getSelectedPaymentMethod())}`);
        }}
      />
    </>
  )
}