@superlogic/spree-pay 0.1.1 → 0.1.3

package/README.md

@@ -12,15 +12,17 @@ npm i @superlogic/spree-pay
 
 ```tsx
 import { useState } from 'react';
+
 import { SpreePay, SpreePayProvider, useSpreePay } from '@superlogic/spree-pay';
 
 const spreeEnv = {
-  environment: 'dev', // 'stg' or 'prod' for other environments
-  accessToken: 'demo-access-token', // Use env vars in production
+  tenantId: 'moca' // Keep moca for crypto payments on BASE network
+  environment: 'dev',
+  accessToken: 'eyJhbGciOiJSUzI1NiIs...', // Use user JWT token
+  redirect3dsURI: '/3ds' // Any valid URI in your app that captures 3ds redirect
 };
 
-  const [status, setStatus] = useState<'idle' | 'processing' | 'success' | 'error'>('idle');
-
+function Checkout() {
   return (
     <SpreePayProvider env={spreeEnv}>
       <CheckoutContent />
@@ -46,10 +48,25 @@ function CheckoutContent() {
 
   return (
     <div style={{ maxWidth: 540 }}>
-      <SpreePay amount="$199.00" onProcess={handleProcess} />
+      <SpreePay amount={99} onProcess={handleProcess} />
       {status === 'success' && <p>Payment successful! Thank you for your order.</p>}
       {status === 'error' && <p>Payment failed. Please try again.</p>}
     </div>
   );
 }
+
+import { useCapture3DS } from '@superlogic/spree-pay';
+
+// example 3DS redirect page hosted on /3ds
+export default function ThreeDSRedirectPage() {
+  // take payment intent from search params as payment_intent
+  const searchParams = exampleGetSearchParams();
+
+  // place that hook, it will take paymentIntent and close 3ds modal
+  useCapture3DS({ paymentIntent: searchParams['payment_intent'] });
+
+  // Render null or any other UI/Loader
+  return null;
+}
+
 ```