title: How to add a confetti or (balloons should flow on screen) after payment is done in react website
body: <p>This is the payment method I had done</p>
  <pre><code> const submitHandler = (e) =&gt; {
      e.preventDefault();
      dispatch(savePaymentMethod(paymentMethod));
      history.push(&quot;/placeorder&quot;);
    };
  
  &lt;Form onSubmit={submitHandler}&gt;
          &lt;Form.Group&gt;
            &lt;Form.Label as=&quot;legend&quot; style={{ color: 'white' }}&gt;Select Method &lt;/Form.Label&gt;
            &lt;Col&gt;
              &lt;Form.Check
                style={{ color: 'white' }}
                type=&quot;radio&quot;
                label=&quot;PayPal or Credit Card&quot;
                id=&quot;PayPal&quot;
                name=&quot;paymentMethod&quot;
                value=&quot;PayPal&quot;
                checked
                onChange={(e) =&gt; setPaymentMethod(e.target.value)}
              &gt;&lt;/Form.Check&gt;
           &lt;/Col&gt;
          &lt;/Form.Group&gt;
  
          &lt;Button type=&quot;submit&quot; variant=&quot;primary&quot; className=&quot;mt-3&quot;&gt;
            Continue
          &lt;/Button&gt;
        &lt;/Form&gt;
  
  </code></pre>
  <p>This is the Place Order code</p>
  <pre><code>const OrderScreen = ({ match }) =&gt; {
    const orderId = match.params.id;
  
    const [sdkReady, setSdkReady] = useState(false);
  
    const dispatch = useDispatch();
  
    const orderDetails = useSelector((state) =&gt; state.orderDetails);
    const { order, loading, error } = orderDetails;
  
    const orderPay = useSelector((state) =&gt; state.orderPay);
    const { loading: loadingPay, success: successPay } = orderPay;
  
    if (!loading) {
      const addDecimals = (num) =&gt; {
        return (Math.round(num * 100) / 100).toFixed(2);
      };
  
      order.itemsPrice = addDecimals(
        order.orderItems.reduce((acc, item) =&gt; acc + item.price * item.qty, 0)
      );
    }
  
    useEffect(() =&gt; {
      const addPayPalScript = async () =&gt; {
        const { data: clientId } = await axios.get(&quot;/api/config/paypal&quot;);
        const script = document.createElement(&quot;script&quot;);
        script.type = &quot;text/javascript&quot;;
        script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}`;
        script.async = true;
        script.onload = () =&gt; {
          setSdkReady(true);
        };
        document.body.appendChild(script);
      };
  
      if (!order || successPay) {
        dispatch({ type: ORDER_PAY_RESET });
        dispatch(getOrderDetails(orderId));
      } else if (!order.isPaid) {
        if (!window.paypal) {
          addPayPalScript();
        } else {
          setSdkReady(true);
        }
      }
    }, [dispatch, orderId, successPay, order]);
  
    const successPaymentHandler = (paymentResult) =&gt; {
      console.log(paymentResult);
      dispatch(payOrder(orderId, paymentResult));
    };
  
    return loading ? (
      &lt;Loader /&gt;
    ) : error ? (
      &lt;Message variant=&quot;danger&quot;&gt;{error}&lt;/Message&gt;
    ) : (
      &lt;&gt;
        &lt;h1&gt;Order {order._id}&lt;/h1&gt;
        &lt;Row&gt;
          &lt;Col md={8}&gt;
            &lt;ListGroup variant=&quot;flush&quot;&gt;
              &lt;ListGroup.Item&gt;
                &lt;h2&gt;Shipping&lt;/h2&gt;
                &lt;p&gt;
                  &lt;strong&gt;Address : &lt;/strong&gt;
                  {order.shippingAddress.address},{order.shippingAddress.city},{&quot; &quot;}
                  {order.shippingAddress.postalCode}, {order.shippingAddress.city}
                &lt;/p&gt;
  
                {order.isDelivered ? (
                  &lt;Message variant=&quot;success&quot;&gt;
                    Delivered On {order.deliveredAt}
                  &lt;/Message&gt;
                ) : (
                  &lt;Message variant=&quot;danger&quot;&gt;Not Delivered&lt;/Message&gt;
                )}
              &lt;/ListGroup.Item&gt;
  
              &lt;ListGroup.Item&gt;
                &lt;h2&gt;Payment Method&lt;/h2&gt;
                &lt;p&gt;
                  &lt;strong&gt;Method:&lt;/strong&gt;
                  {order.paymentMethod}
                &lt;/p&gt;
                {order.isPaid ? (
                  &lt;Message variant=&quot;success&quot;&gt;Paid On {order.paidAt}&lt;/Message&gt;
                ) : (
                  &lt;Message variant=&quot;danger&quot;&gt;Not Paid&lt;/Message&gt;
                )}
              &lt;/ListGroup.Item&gt;
  
              &lt;ListGroup.Item&gt;
                &lt;h2&gt;Order Items&lt;/h2&gt;
                {order.orderItems.length === 0 ? (
                  &lt;Message&gt;Order is empty&lt;/Message&gt;
                ) : (
                  &lt;ListGroup variant=&quot;flush&quot;&gt;
                    {order.orderItems.map((item, index) =&gt; (
                      &lt;ListGroup.Item key={index}&gt;
                        &lt;Row&gt;
                          &lt;Col md={1}&gt;
                            &lt;Image
                              src={item.image}
                              alt={item.name}
                              fluid
                              rounded
                            /&gt;
                          &lt;/Col&gt;
                          &lt;Col&gt;
                            &lt;Link to={`/product/${item.product}`}&gt;
                              {item.name}
                            &lt;/Link&gt;
                          &lt;/Col&gt;
                          &lt;Col md={4}&gt;
                            {item.qty} x ₹{item.price} = ₹{item.qty * item.price}
                          &lt;/Col&gt;
                        &lt;/Row&gt;
                      &lt;/ListGroup.Item&gt;
                    ))}
                  &lt;/ListGroup&gt;
                )}
              &lt;/ListGroup.Item&gt;
            &lt;/ListGroup&gt;
          &lt;/Col&gt;
          &lt;Col md={4}&gt;
            &lt;Card&gt;
              &lt;ListGroup variant=&quot;flush&quot;&gt;
                &lt;ListGroup.Item&gt;
                  &lt;h2&gt;Order Summary&lt;/h2&gt;
                &lt;/ListGroup.Item&gt;
                &lt;ListGroup.Item&gt;
                  &lt;Row&gt;
                    &lt;Col&gt;Items&lt;/Col&gt;
                    &lt;Col&gt;₹{order.itemsPrice}&lt;/Col&gt;
                  &lt;/Row&gt;
                &lt;/ListGroup.Item&gt;
                &lt;ListGroup.Item&gt;
                  &lt;Row&gt;
                    &lt;Col&gt;Shipping&lt;/Col&gt;
                    &lt;Col&gt;₹{order.shippingPrice}&lt;/Col&gt;
                  &lt;/Row&gt;
                &lt;/ListGroup.Item&gt;
                &lt;ListGroup.Item&gt;
                  &lt;Row&gt;
                    &lt;Col&gt;Tax&lt;/Col&gt;
                    &lt;Col&gt;₹{order.taxPrice}&lt;/Col&gt;
                  &lt;/Row&gt;
                &lt;/ListGroup.Item&gt;
                &lt;ListGroup.Item&gt;
                  &lt;Row&gt;
                    &lt;Col&gt;Total&lt;/Col&gt;
                    &lt;Col&gt;₹{order.totalPrice}&lt;/Col&gt;
                  &lt;/Row&gt;
                &lt;/ListGroup.Item&gt;
  
                {!order.isPaid &amp;&amp; (
                  &lt;ListGroup.Item&gt;
                    {loadingPay &amp;&amp; &lt;Loader /&gt;}
                    {!sdkReady ? (
                      &lt;Loader /&gt;
                    ) : (
                      &lt;PayPalButton
  
                        amount={order.totalPrice}
                        onSuccess={successPaymentHandler}
                      /&gt;
                    )}
                  &lt;/ListGroup.Item&gt;
                )}
              &lt;/ListGroup&gt;
            &lt;/Card&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/&gt;
    );
  };
  
  export default OrderScreen;
  
  </code></pre>
  <p>So at last After successfully placed order with PayPal payment it will redirect to this page and it should show confetti automatically overall full screen like Your Order placed successfully and confetti should come overall screen. I hope it make sense.</p>
  <p>Thanks in Advance</p>