Google Pay
Obtén más información sobre cómo aceptar pagos con Google Pay.
Google Pay allows customers to make payments in your app or website using any credit or debit card saved to their Google Account, including those from Google Play, YouTube, Chrome, or an Android device. Use the Google Pay API to request any credit or debit card stored in your customer’s Google account.
Google Pay es totalmente compatible con los productos y funcionalidades de Stripe (p. ej., pagos recurrentes), por lo que puedes usarlo en lugar de una forma de pago tradicional cada vez que sea posible. Úsalo para aceptar pagos por bienes tangibles, donaciones, suscripciones y mucho más.
Cómo usar Stripe y Google Pay versus el sistema de facturación de Google Play![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Para la venta de bienes tangibles y servicios, en tu aplicación se puede aceptar Google Pay o cualquier otro método de pago admitido por Stripe. Esos pagos se procesan mediante Stripe, y solo tienes que pagar las comisiones de procesamiento que Stripe establece. Sin embargo, para las compras de productos y contenido digitales dentro de la aplicación se debe usar el sistema de facturación de Google Play. Esos pagos son procesados por Google y están sujetos a sus comisiones de transacción.
Para obtener más información sobre qué compras deben utilizar el sistema de facturación de Google Play, consulta las de Google Play condiciones para desarrolladores.
El SDK nativo de React de Stripe es la forma más rápida y sencilla de empezar a aceptar Google Pay en tus aplicaciones nativas de React. El componente PlatformPayButton incluye la interfaz de usuario requerida de Google y puedes utilizar los métodos confirmPlatformPayPayment
y createPlatformPayPaymentMethod
para cobrar o crear pagos en tu app sin problemas con una configuración mínima.
Configurar StripeLado del servidorLado del cliente![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Lado del servidor![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Esta integración necesita puntos de conexión en tu servidor que se comuniquen con la API de Stripe. Usa nuestras bibliotecas oficiales para acceder a la API de Stripe desde tu servidor:
Lado del cliente![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
El SDK para React Native es de código abierto y está plenamente documentado. Internamente, utiliza SDK para iOS nativo y Android. Para instalar el SDK para React Native de Stripe, ejecuta uno de los siguientes comandos en el directorio del proyecto (según el administrador de paquetes que utilices):
A continuación, instala otras dependencias necesarias:
- Para iOS, navega hasta el directorio de ios y ejecuta
pod install
para asegurarte de instalar también las dependencias nativas necesarias. - Para Android, no hay más dependencias para instalar.
Inicialización de Stripe![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
To initialize Stripe in your React Native app, either wrap your payment screen with the StripeProvider
component, or use the initStripe
initialization method. Only the API publishable key in publishableKey
is required. The following example shows how to initialize Stripe using the StripeProvider
component.
import { StripeProvider } from '@stripe/stripe-react-native'; function App() { const [publishableKey, setPublishableKey] = useState(''); const fetchPublishableKey = async () => { const key = await fetchKey(); // fetch key from your server here setPublishableKey(key); }; useEffect(() => { fetchPublishableKey(); }, []); return ( <StripeProvider publishableKey={publishableKey} merchantIdentifier="merchant.identifier" // required for Apple Pay urlScheme="your-url-scheme" // required for 3D Secure and bank redirects > // Your app code here </StripeProvider> ); }
Habilitar Google Pay![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Para usar Google Pay, primero habilita la API de Google Pay agregando lo siguiente a la etiqueta <application>
de tu AndroidManifest.xml:
<application> ... <meta-data android:name="com.google.android.gms.wallet.api.enabled" android:value="true" /> </application>
Para obtener más detalles, consulta cómo configurar la API de Google Pay para Android.
Crear un PaymentIntentLado del servidor![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Primero, crea un PaymentIntent
en tu servidor y especifica el importe por cobrar y la moneda. Si ya tienes una integración que usa la API Payment Intents, agrega card
a la lista de tipos de métodos de pago para tu PaymentIntent
(este es también el método de pago predeterminado si no se define ningún método de pago):
El PaymentIntent incluye un secreto de cliente. Puedes usar el secreto de cliente en tu aplicación React Native para completar el proceso de pago en modo seguro sin volver a especificar el objeto PaymentIntent completo. En tu aplicación, solicita un PaymentIntent desde tu servidor y almacena el secreto de cliente.
Inicializar Google PayLado del cliente![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Primero, comprueba si el dispositivo es compatible con Google Pay llamando a isPlatformPaySupported
.
import { usePlatformPay } from '@stripe/stripe-react-native'; function PaymentScreen() { const { isPlatformPaySupported } = usePlatformPay(); React.useEffect(() => { (async function () { if (!(await isPlatformPaySupported({ googlePay: {testEnv: true} }))) { Alert.alert('Google Pay is not supported.'); return; } })(); }, []); ... return ( <View > ... </View> ); }
Presentar la hoja de Google PayLado del cliente![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Una vez que sepas que Google Pay está disponible y que tu aplicación obtuvo un secreto de cliente de PaymentIntent
o SetupIntent
, llama a confirmPlatformPayPayment
. En cambio, si confirmas un SetupIntent
, usa confirmPlatformPaySetupIntent
.
import {PlatformPayButton, usePlatformPay} from '@stripe/stripe-react-native'; function PaymentScreen() { const { isPlatformPaySupported, confirmPlatformPayPayment, } = usePlatformPay(); React.useEffect(() => { ... // see above }, []); const fetchPaymentIntentClientSecret = async () => { // Fetch payment intent created on the server, see above const response = await fetch(`${API_URL}/create-payment-intent`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ currency: 'usd', }), }); const { clientSecret } = await response.json(); return clientSecret; }; const pay = async () => { const clientSecret = await fetchPaymentIntentClientSecret(); const { error } = await confirmPlatformPayPayment( clientSecret, { googlePay: { testEnv: true, merchantName: 'My merchant name', merchantCountryCode: 'US', currencyCode: 'USD', billingAddressConfig: { format: PlatformPay.BillingAddressFormat.Full, isPhoneNumberRequired: true, isRequired: true, }, }, } ); if (error) { Alert.alert(error.code, error.message); // Update UI to prompt user to retry payment (and possibly another payment method) return; } Alert.alert('Success', 'The payment was confirmed successfully.'); }; return ( <View > <PlatformPayButton type={PlatformPay.ButtonType.Pay} onPress={pay} style={{ width: '100%', height: 50, }} /> </View> ); }
Cómo activar Google Pay![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
Sigue las instrucciones de Google para solicitar acceso en el entorno de producción de la aplicación. Elige el tipo de integración Puerta de enlace cuando se te solicite y proporciona capturas de pantalla de tu aplicación para su revisión.
Una vez que tu aplicación se haya aprobado, prueba tu integración en producción con testEnv: false
y lanzando Google Pay desde una versión firmada de tu aplicación. Recuerda usar tus claves de API activas. Puedes usar un PaymentIntent
con capture_
= manual
para procesar una transacción sin capturar el pago.