Saltar al contenido
Consejos

Cómo integrar la raya con la reacción

El componente contiene detalles del producto, y el componente acepta los detalles de la tarjeta del usuario.

123456789101112131415161718192021222324import{ElementosConsumo,TarjetaElement}de"@stripe/react-stripe-js";classCheckoutFormextendsReact.Componente{handleSubmit=asyncevent===;{evento. preventDefault();// handle payment request};render(){return(<div>div>h3className="product-title"`;Apple MacBook Pro</h3><h4className="product-price"`;$999</h4></div><formonSubmit={this. handleSubmit};};CardSection/;};buttonclassName="btn-pay"`;Buy Now</button
jsx


Envuelva el componente de la forma con el componente para tener acceso al objeto Stripe. El componente pasa de forma segura la información de pago recogida por el elemento de la tarjeta. Pasa las propiedades del objeto Stripe y los elementos del mismo al .


Cómo integrar la raya con la reacción
Cómo integrar la raya con la reacción




123456789functionInjectedCheckoutForm(){retorno(<ElementosConsumidor,{({ franja, elementos })={{franja, elementos }};(<CheckoutFormstripe={franja}elementos={elementos}/{;)}</ElementosConsumidor,};}
jsx

Ahora, en el método "handleSubmit", primero compruebe si "Stripe" está inicializado o no. Si lo está, toma los detalles de la tarjeta de los elementos prop y pásalos a la función createToken() del prop de la banda.
1234567891011121314151617handleSubmit=asyncevent=;{ event.preventDefault();const{ stripe, elements }=this.props;if(!stripe ||!elements){return;}const card = elements. getElement(CardElement);const result =await stripe.createToken(card);if(result.error){console.log(result.error.message);}else{console.log(result.token);// pasar el token a su backend API}};
jsx

Stripe creará una ficha que representa los detalles de la tarjeta del usuario. Este proceso se llama tokenización.

Una vez que tenga el objeto simbólico, llame al servicio API de su backend para procesar el pago.

A continuación se muestra un código Node.js de muestra para guiarte a través de él.
12345678910111213141516171819const stripe =require($0027stripe$0027)(STRIPE_SECRET_KEY);// get the product detailsconst product =getTheProduct(productId);stripe.charges.create({ amount: product. precio, moneda:$0027usd$0027, fuente: cardToken.id, descripción:`Pago por ${producto.título}`, metadta:{ productId: product.id}},function(err, charge){if(err)newError("Pago fallido");elseconsole.log("Éxito de pago");}
js

Una vez que obtenga una respuesta satisfactoria del servidor de Stripe, envíe la respuesta a su aplicación cliente y muestre un mensaje de éxito.