The file was not needed.
This commit is contained in:
parent
2b12b22f1b
commit
058d60a86e
@ -1,139 +0,0 @@
|
||||
'use client'; // include with Next.js 13+
|
||||
|
||||
import { HttpTypes } from '@medusajs/types';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import RazorpayPayment from './razorpay';
|
||||
|
||||
import { useCart } from '@/providers/cart';
|
||||
|
||||
export default function CheckoutPaymentStep() {
|
||||
const { cart, setCart } = useCart();
|
||||
const [paymentProviders, setPaymentProviders] = useState<HttpTypes.StorePaymentProvider[]>([]);
|
||||
const [selectedPaymentProvider, setSelectedPaymentProvider] = useState<string | undefined>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('checkout payment step, load razorpay script');
|
||||
const script = document.createElement('script');
|
||||
script.src = 'https://checkout.razorpay.com/v1/checkout.js';
|
||||
script.async = true;
|
||||
document.body.appendChild(script);
|
||||
return () => {
|
||||
document.body.removeChild(script);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!cart) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`${process.env.NEXT_PUBLIC_STORE_URL}/store/payment-providers?region_id=${cart.region_id}`, {
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || 'temp',
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then(({ payment_providers }) => {
|
||||
setPaymentProviders(payment_providers);
|
||||
setSelectedPaymentProvider(cart.payment_collection?.payment_sessions?.[0]?.id || payment_providers[0].id);
|
||||
});
|
||||
}, [cart]);
|
||||
|
||||
const handleSelectProvider = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
e.preventDefault();
|
||||
console.log('checkout payment step, handleSelectProvider', cart, paymentProviders, selectedPaymentProvider);
|
||||
if (!cart || !selectedPaymentProvider) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
|
||||
let paymentCollectionId = cart.payment_collection?.id;
|
||||
if (!paymentCollectionId) {
|
||||
// create payment collection
|
||||
const { payment_collection } = await fetch(`${process.env.NEXT_PUBLIC_STORE_URL}/store/payment-collections`, {
|
||||
credentials: 'include',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || 'temp',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
cart_id: cart.id,
|
||||
}),
|
||||
}).then((res) => res.json());
|
||||
|
||||
paymentCollectionId = payment_collection.id;
|
||||
}
|
||||
|
||||
// initialize payment session
|
||||
const sess = await fetch(
|
||||
`${process.env.NEXT_PUBLIC_STORE_URL}/store/payment-collections/${paymentCollectionId}/payment-sessions`,
|
||||
{
|
||||
credentials: 'include',
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || 'temp',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
provider_id: selectedPaymentProvider,
|
||||
}),
|
||||
},
|
||||
).then((res) => res.json());
|
||||
|
||||
console.log('sess', sess);
|
||||
// re-fetch cart
|
||||
const { cart: updatedCart } = await fetch(`${process.env.NEXT_PUBLIC_STORE_URL}/store/carts/${cart.id}`, {
|
||||
credentials: 'include',
|
||||
headers: {
|
||||
'x-publishable-api-key': process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || 'temp',
|
||||
},
|
||||
}).then((res) => res.json());
|
||||
|
||||
setCart(updatedCart);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const getPaymentUi = useCallback(() => {
|
||||
const activePaymentSession = cart?.payment_collection?.payment_sessions?.[0];
|
||||
if (!activePaymentSession) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (true) {
|
||||
case activePaymentSession.provider_id.startsWith('pp_razorpay_'):
|
||||
return <RazorpayPayment />;
|
||||
case activePaymentSession.provider_id.startsWith('pp_system_default'):
|
||||
return <span>You chose manual payment! No additional actions required.</span>;
|
||||
default:
|
||||
return <span>You chose {activePaymentSession.provider_id} which is in development.</span>;
|
||||
}
|
||||
}, [cart]);
|
||||
|
||||
return (
|
||||
<div className='px-4 py-8 pt-28'>
|
||||
<form>
|
||||
<select value={selectedPaymentProvider} onChange={(e) => setSelectedPaymentProvider(e.target.value)}>
|
||||
{paymentProviders.map((provider) => (
|
||||
<option key={provider.id} value={provider.id}>
|
||||
{provider.id}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button
|
||||
disabled={loading}
|
||||
onClick={async (e) => {
|
||||
await handleSelectProvider(e);
|
||||
}}
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
{getPaymentUi()}
|
||||
</div>
|
||||
);
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user