67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
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<string> => {
|
|
setIsLoading(true);
|
|
|
|
return axios
|
|
.post<OrderResponseBody>("/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<string, unknown>) => {
|
|
setIsLoading(false);
|
|
};
|
|
|
|
const onCancel = async (data: Record<string, unknown>, actions: OnCancelledActions) => {
|
|
setIsLoading(false);
|
|
};
|
|
|
|
return (
|
|
<PayPalScriptProvider
|
|
options={{
|
|
clientId: clientID,
|
|
currency,
|
|
intent: "capture",
|
|
commit: true,
|
|
vault: true,
|
|
}}>
|
|
<PayPalButtons
|
|
className="w-full"
|
|
style={{layout: "vertical"}}
|
|
createOrder={createOrder}
|
|
onApprove={onApprove}
|
|
onCancel={onCancel}
|
|
onError={onError}></PayPalButtons>
|
|
</PayPalScriptProvider>
|
|
);
|
|
}
|