import {DurationUnit} from "@/interfaces/paypal"; import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OnCancelledActions, OrderResponseBody} from "@paypal/paypal-js"; import {PayPalButtons, PayPalScriptProvider, usePayPalScriptReducer} from "@paypal/react-paypal-js"; import axios from "axios"; import {useEffect, useState} from "react"; import {toast} from "react-toastify"; interface Props { clientID: string; currency: string; price: number; duration: number; duration_unit: DurationUnit; setIsLoading: (isLoading: boolean) => void; onSuccess: (duration: number, duration_unit: DurationUnit) => void; } export default function PayPalPayment({clientID, price, currency, duration, duration_unit, setIsLoading, onSuccess}: Props) { const createOrder = async (data: CreateOrderData, actions: CreateOrderActions): Promise => { setIsLoading(true); return axios .post("/api/paypal", {currencyCode: currency, price}) .then((response) => response.data) .then((data) => data.id); }; const onApprove = async (data: OnApproveData, actions: OnApproveActions) => { const request = await axios.post<{ok: boolean; reason?: string}>("/api/paypal/approve", {id: data.orderID, duration, duration_unit}); if (request.status !== 200) { toast.error("Something went wrong, please try again later"); return; } toast.success("Your account has been credited more time!"); return onSuccess(duration, duration_unit); }; const onError = async (data: Record) => { setIsLoading(false); }; const onCancel = async (data: Record, actions: OnCancelledActions) => { setIsLoading(false); }; return ( ); }