Added payment type to modal and lists BOD-230

This commit is contained in:
Patrick Fic
2020-07-30 09:48:04 -07:00
parent 12a925c678
commit 40ffede622
12 changed files with 158 additions and 50 deletions

View File

@@ -1,17 +1,8 @@
import axios from "axios";
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { auth, logImEXEvent } from "../../firebase/firebase.utils";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { setEmailOptions } from "../../redux/email/email.actions";
import { TemplateList } from "../../utils/TemplateConstants";
import {
PaymentRequestButtonElement,
useStripe,
Elements,
useElements,
useStripe
} from "@stripe/react-stripe-js";
import React, { useEffect, useState } from "react";
export default function MobilePaymentComponent() {
const stripe = useStripe();
@@ -39,9 +30,9 @@ export default function MobilePaymentComponent() {
if (result) {
setPaymentRequest(pr);
} else {
var details = {
total: { label: "", amount: { currency: "CAD", value: "0.00" } },
};
// var details = {
// total: { label: "", amount: { currency: "CAD", value: "0.00" } },
// };
// new PaymentRequest(
// [{ supportedMethods: ["basic-card"] }],
// {}
@@ -53,35 +44,36 @@ export default function MobilePaymentComponent() {
}, [stripe]);
if (paymentRequest) {
// paymentRequest.on("paymentmethod", async (ev) => {
// //Call server side to get the client secret
// // Confirm the PaymentIntent without handling potential next actions (yet).
// const { error: confirmError } = await stripe.confirmCardPayment(
// clientSecret,
// { payment_method: ev.paymentMethod.id },
// { handleActions: false }
// );
paymentRequest.on("paymentmethod", async (ev) => {
//Call server side to get the client secret
// Confirm the PaymentIntent without handling potential next actions (yet).
const { error: confirmError } = await stripe.confirmCardPayment(
"clientSecret",
{ payment_method: ev.paymentMethod.id },
{ handleActions: false }
);
// if (confirmError) {
// // Report to the browser that the payment failed, prompting it to
// // re-show the payment interface, or show an error message and close
// // the payment interface.
// ev.complete("fail");
// } else {
// // Report to the browser that the confirmation was successful, prompting
// // it to close the browser payment method collection interface.
// ev.complete("success");
// // Let Stripe.js handle the rest of the payment flow.
// const { error, paymentIntent } = await stripe.confirmCardPayment(
// clientSecret
// );
// if (error) {
// // The payment failed -- ask your customer for a new payment method.
// } else {
// // The payment has succeeded.
// }
// }
// });
if (confirmError) {
// Report to the browser that the payment failed, prompting it to
// re-show the payment interface, or show an error message and close
// the payment interface.
ev.complete("fail");
} else {
// Report to the browser that the confirmation was successful, prompting
// it to close the browser payment method collection interface.
ev.complete("success");
// Let Stripe.js handle the rest of the payment flow.
const { error, paymentIntent } = await stripe.confirmCardPayment(
"clientSecret"
);
if (error) {
// The payment failed -- ask your customer for a new payment method.
} else {
// The payment has succeeded.
console.log('paymentIntent', paymentIntent)
}
}
});
return (
<div style={{ height: "300px" }}>
<PaymentRequestButtonElement options={{ paymentRequest }} />