Estoy haciendo una promesa de Stripe en React, sus documentos dicen que cargue la promesa fuera del componente de esta manera:
import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; // Make sure to call `loadStripe` outside of a component's render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx'); const App = () => { return ( <Elements stripe={stripePromise}> <MyCheckoutForm /> </Elements> ); };Mi problema es que obtengo la clave pública de una API y la almaceno en redux (nos conectamos a varias compañías diferentes). Cargarlo dentro del componente está causando re-renderizaciones:
import React from "react"; import { Elements } from "@stripe/react-stripe-js"; import { loadStripe } from "@stripe/stripe-js"; import { useSelector } from "react-redux"; import ExpressCheckout from "./ExpressCheckout"; const ExpressContainer = () => { const stripe_PK = useSelector( (state) => state.company.presenter.data_stripe_pk ); const stripePromise = loadStripe(stripe_PK); return ( <Elements stripe={stripePromise}> <ExpressCheckout /> </Elements> ); }; export default ExpressContainer;Intenté cargar el estado redux antes del componente con getState() pero vuelve en blanco.
Querrá aplazar la llamada a loadStripe hasta que obtenga un valor válido para el PK de su selector.
Cuando proporciona un null a la propiedad de stripe de <Elements /> , difiere la inicialización. Puede cambiar una vez de un valor nulo a una promesa que se resuelva en un objeto Stripe, pero luego no se permite cambiar el prop de stripe .
raya
Requerido Raya | nulo | Promesa<Stripe | nulo>
Un objeto Stripe o una Promesa que se resuelve en un objeto Stripe. La forma más fácil de inicializar un objeto Stripe es con el módulo contenedor Stripe.js. Una vez que se ha configurado este accesorio, no se puede cambiar.
También puede pasar nulo o una Promesa que se resuelve en nulo si está realizando una representación inicial del lado del servidor o al generar un sitio estático.
He preparado un ejemplo aquí con setTimeout para simular una carga retrasada de la clave y luego useEffect para activar la llamada loadStripe : https://codesandbox.io/s/react-stripe-js-delayed-key-effect-boxmz
Esta no es la única manera de lograr esto, pero ilustra la idea.