Philip Cesar Garay
74 lines
2.0 KiB
JavaScript
74 lines
2.0 KiB
JavaScript
import {
|
|
EmbeddedCheckoutProvider,
|
|
EmbeddedCheckout,
|
|
} from "@stripe/react-stripe-js";
|
|
import { useState, createContext } from "react";
|
|
import { View, StyleSheet } from "react-native";
|
|
|
|
import { loadStripe } from "@stripe/stripe-js";
|
|
|
|
import {
|
|
STRIPE_PUBLISHABLE_KEY_LIVE,
|
|
STRIPE_PUBLISHABLE_KEY_TEST,
|
|
} from "../data/keys";
|
|
import { mainBorderRadius } from "../styles/Style";
|
|
import Overlay from "../components/Overlay";
|
|
import Button from "../components/Button";
|
|
import useLayoutType from "../hooks/useLayoutType";
|
|
|
|
const isStripeTesting = false;
|
|
const stripePromise = loadStripe(
|
|
isStripeTesting ? STRIPE_PUBLISHABLE_KEY_TEST : STRIPE_PUBLISHABLE_KEY_LIVE
|
|
);
|
|
|
|
export const StripeEmbeddedContext = createContext();
|
|
|
|
export default ({ children }) => {
|
|
const { isMobile } = useLayoutType();
|
|
|
|
const [clientSecret, setClientSecret] = useState(null);
|
|
|
|
return (
|
|
<StripeEmbeddedContext.Provider value={{ setClientSecret }}>
|
|
{children}
|
|
<Overlay
|
|
isVisible={clientSecret !== null}
|
|
setIsVisible={() => setClientSecret(null)}
|
|
>
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
...StyleSheet.absoluteFillObject,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
alignSelf: "center",
|
|
width: isMobile ? "90%" : "80%",
|
|
height: "70vh",
|
|
borderRadius: mainBorderRadius,
|
|
overflow: "scroll",
|
|
}}
|
|
>
|
|
<EmbeddedCheckoutProvider
|
|
stripe={stripePromise}
|
|
options={{ clientSecret }}
|
|
>
|
|
<EmbeddedCheckout />
|
|
</EmbeddedCheckoutProvider>
|
|
</View>
|
|
|
|
<Button
|
|
type="secondary"
|
|
isAbsoluteBottom
|
|
text="Fermer"
|
|
onPress={() => setClientSecret(null)}
|
|
/>
|
|
</View>
|
|
</Overlay>
|
|
</StripeEmbeddedContext.Provider>
|
|
);
|
|
};
|