10056036329

Committed 23 Jul 2024 09:06AM UTC coverage: 88.518% (-1.6%) from 90.119%

Build # 10056036329

Build Type

push

github

Committed by

maxCastro1

Commit Message

Merge pull request #64 from atlp-rwanda/ft-buyer-checkout-and-pay

This PR is for the addition of Stripe Payment Integration with Payment and Success Routes

Run Details

799 of 1024 branches covered (78.03%)

Branch coverage included in aggregate %.

238 of 453 new or added lines in 10 files covered. (52.54%)

1 existing line in 1 file now uncovered.

8606 of 9601 relevant lines covered (89.64%)

9.45 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

82.61

/src/components/Checkout/CheckoutForm.tsx

import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js';
import React, { useState } from 'react';
import { PulseLoader } from 'react-spinners';

const CheckoutForm = ({ amount }: { clientSecret: string; amount: number }) => {
  const stripe = useStripe();
  const elements = useElements();
  const [isProcessing, setIsProcessing] = useState(false);

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    if (!stripe || !elements) {
      // Stripe.js has not yet loaded.
      // Make sure to disable form submission until Stripe.js has loaded.
      return;
    }

    setIsProcessing(true);

    const { error } = await stripe.confirmPayment({
      elements,
      confirmParams: {
        return_url: `${window.location.origin}/completion`
      }
    });

    if (error) {
      if (error.type === 'card_error' || error.type === 'validation_error') {
        alert(error.message);
      } else {
        alert('An unexpected error occurred.');
      }
    }

    setIsProcessing(false);
  };

  return (
    <form onSubmit={handleSubmit} className="p-8 border lg:w-[500px] shadow-lg rounded-xl gap-5 flex flex-col ">
      <div className="flex flex-col gap-4 pb-8 border-b ">
        <p className="font-semibold text-lg">Order Summary</p>
        <div className="flex gap-4 justify-between">
          <p className="text-xl font-semibold text-lime-800">Order Total</p>
          <p className="text-xl font-semibold text-lime-800">{amount}</p>
        </div>
      </div>
      <p className="font-semibold text-lg ">Payment Details</p>
      <PaymentElement />
      <button
        disabled={isProcessing || !stripe || !elements}
        type="submit"
        className="px-8 py-4  bg-primary font-medium text-white mt-6 rounded-lg"
      >
        {isProcessing ? <PulseLoader color="#fff" size={6} /> : 'Pay Now'}
      </button>
    </form>
  );
};

export default CheckoutForm;

1	import { PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js';	1✔
2	import React, { useState } from 'react';	1✔
3	import { PulseLoader } from 'react-spinners';	1✔
4		1✔
5	const CheckoutForm = ({ amount }: { clientSecret: string; amount: number }) => {	1✔
6	const stripe = useStripe();	4✔
7	const elements = useElements();	4✔
8	const [isProcessing, setIsProcessing] = useState(false);	4✔
9		4✔
10	const handleSubmit = async (e: any) => {	4✔
11	e.preventDefault();	1✔
12	if (!stripe \|\| !elements) {	1!
NEW 13	// Stripe.js has not yet loaded.	×
NEW 14	// Make sure to disable form submission until Stripe.js has loaded.	×
NEW 15	return;	×
NEW 16	}	×
17		1✔
18	setIsProcessing(true);	1✔
19		1✔
20	const { error } = await stripe.confirmPayment({	1✔
21	elements,	1✔
22	confirmParams: {	1✔
23	return_url: `${window.location.origin}/completion`	1✔
24	}	1✔
25	});	1✔
26		1✔
27	if (error) {	1!
NEW 28	if (error.type === 'card_error' \|\| error.type === 'validation_error') {	×
NEW 29	alert(error.message);	×
NEW 30	} else {	×
NEW 31	alert('An unexpected error occurred.');	×
NEW 32	}	×
NEW 33	}	×
34		1✔
35	setIsProcessing(false);	1✔
36	};	1✔
37		4✔
38	return (	4✔
39	<form onSubmit={handleSubmit} className="p-8 border lg:w-[500px] shadow-lg rounded-xl gap-5 flex flex-col ">	4✔
40	<div className="flex flex-col gap-4 pb-8 border-b ">	4✔
41	<p className="font-semibold text-lg">Order Summary</p>	4✔
42	<div className="flex gap-4 justify-between">	4✔
43	<p className="text-xl font-semibold text-lime-800">Order Total</p>	4✔
44	<p className="text-xl font-semibold text-lime-800">{amount}</p>	4✔
45	</div>	4✔
46	</div>	4✔
47	<p className="font-semibold text-lg ">Payment Details</p>	4✔
48	<PaymentElement />	4✔
49	<button	4✔
50	disabled={isProcessing \|\| !stripe \|\| !elements}	4✔
51	type="submit"	4✔
52	className="px-8 py-4 bg-primary font-medium text-white mt-6 rounded-lg"	4✔
53	>	4✔
54	{isProcessing ? <PulseLoader color="#fff" size={6} /> : 'Pay Now'}	4✔
55	</button>	4✔
56	</form>	4✔
57	);	4✔
58	};	4✔
59		4✔
60	export default CheckoutForm;	4✔

atlp-rwanda / knights-ecomm-fe / 10056036329

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous