Google Pay™
Una billetera electrónica disponible en Android, iOS y la web
Google Pay es digital Billetera electrónica que se puede usar con una cuenta de Google. Google Pay permite a los usuarios añadir su tarjeta de crédito/débito o cuenta bancaria y realizar pagos en línea. Puedes añadir una opción de Google Pay a tu sitio web para que los usuarios puedan pagar con Google
Cuando un cliente quiera realizar un pago en línea, seleccionará Google Pay, seleccionará el método de pago adecuado y enviará su pago.
El usuario selecciona Google Pay para realizar el pago.
muestra al cliente el cuadro de diálogo nativo de Google Pay. Si no ha iniciado sesión, el cliente ingresará los detalles.
Tras iniciar sesión correctamente, el usuario seleccionará un método de pago y la información de envío.
Si el cliente necesita añadir su método de pago, hágalo siguiendo las instrucciones del formulario de Google Pay.
El usuario selecciona Pagar.
Si 3DS está habilitada y, a continuación, se genera una solicitud de autenticación. El cliente completará la autenticación de la 3DS
The payment authorizes and the user gets a confirmation screen (success or error) to review the payment details and clicks ok.
Details | Description |
|---|---|
Payment Method Category | eWallet |
Country | Andorra, Austria, Belgium, Bosnia and Herzegovina, Bulgaria, Croatia, Cyprus, Czech Republic, Denmark, Estonia, Finland, France, Georgia, Germany, Gibraltar, Greece, Greenland, Hungary, Iceland, Ireland, Italy, Latvia, Liechtenstein, Lithuania, Luxembourg, Macedonia, Malta, Moldova, Monaco, Montenegro, Netherlands, Northern Ireland, Norway, Poland, Romania, San Marino, Slovak Republic (Slovakia), Slovenia, Spain, Sweden, Switzerland, Turkey, United Kingdom, Vatican |
Presentment Currency | EUR, GBP, ISK, USD, |
Refunds/Reversal: | Yes |
Recurring Payments: | Yes |
Disputes/Chargebacks: | Sí |
Límites de transacción: | Puede depender del país o del método de pago con tarjeta vinculada |
Plazo de liquidación: | 2-3 días |
Guías |
Campos del método de pago de Google Pay
Campo | Descripción |
|---|---|
número_método_pago | Número del token o número de identificación del método de pago. |
método_de_pago.mes_caducidad | El mes en que se produce la caducidad de la tarjeta. Relevante para las tarjetas. |
método_de_pago.año_caducidad | El año en que se produce la caducidad de la tarjeta. Relevante para las tarjetas. |
tipo_pan | Tipo de autenticación. Una de las siguientes opciones:
|
opciones_método_de_pago.csv | Hash del número de tarjeta, fecha de caducidad y CVV. Solo lectura Relevante para las tarjetas. |
payment_method_options.eci | Indicador de la industria de tarjetas electrónicas: Visa o Mastercard. |
La página de pago hospedado de Rapyd es una página segura que puedes generar para integrarla en tu carrito de compras. Al incorporar la página Hosted Checkout a tu flujo de trabajo de usuario, hay dos opciones:
Página completa (redireccionar)
Integración del kit de herramientas (iframe)
Asegúrate de completar los pasos de la página de integración de Hosted Checkout para personalizar tu experiencia de pago.
Generar página de pago alojada
Si el tipo de método de pago es Google Pay, el cliente debe abrir la página de pago en una sola ventana del navegador.
Solicitud
El Crear página de pago describe los parámetros de la solicitud.
JSON
{ "amount": 100, "complete_payment_url": "http://example.com/complete", "country": "SG", "currency": "SGD", "customer": "cus_9761efaa881b6edeab25e9fbfec1ddf5", "error_payment_url": "http://example.com/error", "merchant_reference_id": "0912-2021", "language": "en", "metadata": { "merchant_defined": true }, "payment_method_types_include": [ "by_visa_card" ], "expiration": 1632027189 }
Respuesta
La siguiente respuesta muestra la redirect_url para mostrar la página de pago alojada para que el usuario final seleccione el botón Google Pay e inicie un pedido con Google Pay. Objeto de página de pago describe los campos de la respuesta.
Consulte Crear página de pago para obtener una respuesta completa.
JSON
{ "status": { "error_code": "", "status": "SUCCESS", "message": "", "response_code": "", "operation_id": "4482961e-7732-49dc-8d0a-2c79491210a3" }, "data": { "id": "checkout_408606a46b1e1e60507a2b2fc578143c", "status": "NEW", "language": "en", "merchant_color": "323fff", "merchant_logo": null, "merchant_website": "https://rapyd.net", "merchant_customer_support": {}, "merchant_alias": "Rapyd", "merchant_terms": null, "merchant_privacy_policy": null, "page_expiration": 1632643036, "redirect_url": "https://sandboxcheckout.rapyd.net?token=checkout_408606a46b1e1e60507a2b2fc578143c", "merchant_main_button": "place_your_order", "cancel_checkout_url": "https://rapyd.net", "complete_checkout_url": "https://rapyd.net", "country": "GB", "currency": "EUR", "amount": 100, "payment": { "amount": 100, "currency": "USD", "description": "Google Pay test payment", }, "expiration": 1632027189, "captured": false, "refunded": false, "refunded_amount": 0, "receipt_email": null, "redirect_url": null, "complete_payment_url": "http://example.com/complete", "error_payment_url": "http://example.com/error", "receipt_number": null, "flow_type": null, "address": null, "statement_descriptor": null, "transaction_id": null, "created_at": 0, "updated_at": 0, "metadata": { "merchant_defined": true }, ... } // Full response is show in the Reference Guide
Recuperar la página de pago
Utilice Recuperar la página de pago para recopilar información sobre el monedero electrónico de Google Pay.
JSON
{ "status": { "error_code": "", "status": "SUCCESS", "message": "", "response_code": "", "operation_id": "4482961e-7732-49dc-8d0a-2c79491210a3" }, "data": { "id": "checkout_408606a46b1e1e60507a2b2fc578143c", "status": "NEW", "language": "en", "merchant_color": "323fff", "merchant_logo": null, "merchant_website": "https://rapyd.net", "merchant_customer_support": {}, "merchant_alias": "Rapyd", "merchant_terms": null, "merchant_privacy_policy": null, "page_expiration": 1632643036, "redirect_url": "https://sandboxcheckout.rapyd.net?token=checkout_408606a46b1e1e60507a2b2fc578143c", "merchant_main_button": "place_your_order", "cancel_checkout_url": "https://rapyd.net", "complete_checkout_url": "https://rapyd.net", "country": "GB", "currency": "EUR", "amount": 100, "payment": { "amount": 100, "currency": "USD", "description": "Google Pay test payment", "payment_method": { "type": "by_visa_card", "metadata": {}, "expiration": 1632027189, "captured": false, "refunded": false, "refunded_amount": 0, "receipt_email": null, "redirect_url": null, "complete_payment_url": "http://example.com/complete", "error_payment_url": "http://example.com/error", "receipt_number": null, "flow_type": null, "address": null, "statement_descriptor": null, "transaction_id": null, "created_at": 0, "updated_at": 0, "metadata": { "merchant_defined": true }, "failure_code": null, "failure_message": null, "paid": false, "paid_at": 0, "dispute": null, "refunds": null, "order": null, "outcome": null, "visual_codes": {}, "textual_codes": {}, "instructions": {}, "ewallet_id": null, "ewallets": [], "payment_method_options": {}, "payment_method_type": null, "payment_method_type_category": null, "fx_rate": null, "merchant_requested_currency": null, "merchant_requested_amount": null, "fixed_side": null, "payment_fees": null, "invoice": null, "escrow": null, "group_payment": null, "cancel_reason": null, "initiation_type": "customer_present", "mid": null, "next_action": "not_applicable" }, "payment_method_type": null, "payment_method_type_categories": null, "payment_method_types_include": [ ], "payment_method_types_exclude": null, "customer": null, "custom_elements": { "save_card_default": false, "display_description": false, "payment_fees_display": true, "merchant_currency_only": false, "billing_address_collect": false, "dynamic_currency_conversion": false }, "timestamp": 1631433436, "payment_expiration": null, "cart_items": [], "escrow": null, "escrow_release_days": null "payment_method_types": [ { "category": "ewallet", "order": 0, "types": [ { "type": "google_pay", "card_type": null, "network": VISA, "order": 0, "image": null, "instructions": [], "name": "Google Pay", "fields": [], "supported_currencies": [ "EUR" ], "payment_method_options": [], "supported_digital_wallet_providers": ["google_pay"], "digital_wallet_providers_details": { "google_pay": { "provider_type": "google_pay", "provider_name": "", "provider_default_merchant_id": "BCR2DN4TTCXOFL2X", "organization_provider_id": "", "provider_metadata": {} } } "min_amount": null, "max_amount": null, "is_redirect": false } ] } ] } }
Inserta la página de pago en tu sitio web con Google Pay disponible.
Pasos para incrustar el kit de herramientas
Añade el siguiente código a tu página de pago:
Add a
<script>tag with the URL of the Rapyd Checkout Toolkit:Production
<script src="https://checkouttoolkit.rapyd.net"></script>
Sandbox
<script src="https://sandboxcheckouttoolkit.rapyd.net"></script>
Add a
<div>tag with id="rapyd-toolkit":<div id="rapyd-checkout"></div>
Inicializa la página de pago con los siguientes campos:
JavaScript
Instantiating ‘checkout’ with parametersInstantiating 'checkout' & setting variables let checkout = new RapydCheckoutToolkit({ pay_button_text: "Click to pay", // Text that appears on the 'Pay' button. // String. Maximum length is 16 characters. // Default is "Place Your Order". Optional. pay_button_color: "blue", // Color of the 'Pay' button. String. // Standard CSS color name or hexadecimal code such as #323fff. // Default is the color that is returned in the 'merchant_color' // field of the response to 'Create Checkout Page'. Optional. id: "checkout_9ebe58dcb9d75e8f972a35350f96c2fa", // ID of the 'Create Checkout Page' response. String. Required. close_on_complete: true, // Causes the embedded Rapyd Checkout Toolkit window to close // when the payment is complete. Boolean. Default is 'true'. Optional. page_type: “collection” // Default is "collection". Optional. });
Llama a Display Toolkit () para mostrar la página de pago hospedado.
checkout.displayCheckout();
Inserta el código que se ejecuta cuando se producen los siguientes eventos. Usa tu código para leer el campo del evento en el objeto de la ventana.
JavaScript
window.addEventListener('onCheckoutPaymentSuccess', (event) => { console.log(event.detail) // Returns 'Payment' object. // Client code. }) window.addEventListener('onCheckoutFailure', (event) => { console.error(event.detail.error) // Returns an error message from the API. // Checkout page failed to generate // Client code. }) window.addEventListener('onCheckoutPaymentFailure', (event) => { console.error(event.detail.error) // Returns an error message from the API. // Client code. }) window.addEventListener('onLoading', (event) => { console.log(event.detail.loading) // returns true or false depending on the loading state // client code })
Si el pago se ha realizado correctamente
el pago se realiza correctamente, los clientes reciben un evento OnCheckoutPaymentSuccess con el objeto de pago con el campo: «digital_wallet» y el valor: «google_pay» para el objeto de pago en ese caso. Con Google Pay, el iframe permanece abierto y mostrará una página de confirmación final
Ejemplo de kit de herramientas Rapyd Checkout integrado
Este es un ejemplo de una página de Rapyd Checkout creada con el kit de herramientas:
HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rapyd Checkout Toolkit</title> </head> <body> <h1>Rapyd Checkout Toolkit Demo</h1> <div id="loader">Loading...</div> <div id="error" style="display: none;"></div> <div style="width: 500px" id="rapyd-checkout"></div> <script> const fileref = document.createElement("link"); fileref.rel = "stylesheet"; fileref.type = "text/css"; fileref.href = "RapydCheckoutToolkitDemo.css"; document.getElementsByTagName("head")[0].appendChild(fileref); </script> <script src="https://sandboxcheckouttoolkit.rapyd.net"></script> <script> let checkout = new RapydCheckoutToolkit({ pay_button_text: "Click to pay", pay_button_color: "blue", id: "checkout_4d7419fc75a721ec2cf39e80e9e20d26" }); checkout.displayCheckout(); window.addEventListener('onLoading', (event) => { if (event.detail.loading === false) { const loader = document.getElementById('loader'); loader.style.display = 'none'; } }); window.addEventListener('onCheckoutPaymentSuccess', function (event) { console.log(event.detail) }); window.addEventListener('checkoutOnFailed', function (event) { const loader = document.getElementById('error'); loader.style.display = ''; loader.style.color = 'red'; loader.innerText = event.detail.error; }); window.addEventListener('onCheckoutPaymentFailure', function (event) { console.log(event.detail.error) }); </script> </body> </html>