Saltar al contenido

integración de la pasarela de pago de stripe en el ejemplo react-native

Nuestro team de especialistas despúes de muchos días de investigación y de recopilar de datos, han obtenido la solución, queremos que te sea útil para tu plan.

Ejemplo: sttripe para pago en react native andorid

importReactfrom'react';importAddSubscriptionViewfrom'../components/AddSubscriptionView';constSTRIPE_ERROR='Payment service error. Try again later.';constSERVER_ERROR='Server error. Try again later.';constSTRIPE_PUBLISHABLE_KEY='Your Key';/** * The method sends HTTP requests to the Stripe API. * It's necessary to manually send the payment data * to Stripe because using Stripe Elements in React  * Native apps isn't possible. * * @param creditCardData the credit card data * @return Promise with the Stripe data */constgetCreditCardToken=(creditCardData)=>const card ='card[number]': creditCardData.values.number.replace(//g,''),'card[exp_month]': creditCardData.values.expiry.split('/')[0],'card[exp_year]': creditCardData.values.expiry.split('/')[1],'card[cvc]': creditCardData.values.cvc;returnfetch('https://api.stripe.com/v1/tokens',    headers:// Use the correct MIME type for your server      Accept: 'application/json',      // Use the correct Content Type to send data to Stripe      'Content-Type': 'application/x-www-form-urlencoded',      // Use the Stripe publishable key as Bearer      Authorization: `Bearer $STRIPE_PUBLISHABLE_KEY`    ,    // Use a proper HTTP method    method: 'post',    // Format the credit card data to a string of key-value pairs    // divided by &    body: Object.keys(card)      .map(key => key + '=' + card[key])      .join('&')  ).then(response => response.json());;/** * The method imitates a request to our server. * * @param creditCardToken * @return Promise */const subscribeUser = (creditCardToken) =>   return new Promise((resolve) =>     console.log('Credit card tokenn', creditCardToken);    setTimeout(() =>       resolve( status: true );    , 1000)  );;/** * The main class that submits the credit card data and * handles the response from Stripe. */export default class AddSubscription extends React.Component   static navigationOptions =     title: 'Subscription page',  ;  constructor(props)     super(props);    this.state =       submitted: false,      error: null        // Handles submitting the payment request  onSubmit = async (creditCardInput) =>     const  navigation  = this.props;    // Disable the Submit button after the request is sent    this.setState( submitted: true );    let creditCardToken;    try       // Create a credit card token      creditCardToken = await getCreditCardToken(creditCardInput);      if (creditCardToken.error)         // Reset the state if Stripe responds with an error        // Set submitted to false to let the user subscribe again        this.setState( submitted: false, error: STRIPE_ERROR );        return;           catch (e)       // Reset the state if the request was sent with an error      // Set submitted to false to let the user subscribe again      this.setState( submitted: false, error: STRIPE_ERROR );      return;        // Send a request to your server with the received credit card token    const  error  = await subscribeUser(creditCardToken);    // Handle any errors from your server    if (error)       this.setState( submitted: false, error: SERVER_ERROR );     else       this.setState( submitted: false, error: null );      navigation.navigate('Home')      ;    // render the subscription view component and pass the props to it  render()     const  submitted, error  = this.state;    return (            );  

Comentarios y valoraciones

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *