Skip to main content

Documentación

Integración de páginas Hosted Checkout

Siga estos pasos y añada rápidamente Rapyd Hosted Checkout a su sitio web.

Inicie sesión en el Client Portal de Rapyd y comience a crear su propia experiencia de pago. Añada sus propios colores y logotipo y seleccione todos los métodos de pago que quiera aceptar.

Personalice su página de Checkout

Checkout le permite personalizar la apariencia para que coincida con su marca y su experiencia en el sitio web.

  1. Una vez que haya creado una cuenta Rapyd, inicie sesión en el Client Portal tal y como se describe en Acceder al Client Portal y navegue hasta Ajustes > Marca.

    hosted-checkout-page-integration-flow-1.png

    Seleccione su página alojada para ver

    La barra de vista previa, ubicada sobre la ventana de vista previa, mostrará una vista previa de la marca de su página de Hosted Checkout. Puede alternar entre la página de Hosted Checkout, la página de guardar los detalles de la tarjeta y la página de detalles de la cuenta del beneficiario. La configuración de marca afecta a todas las páginas alojadas, incluidas Rapyd Collect, Disburse e Issuing.

  2. En el panel Elementos de marca del lado izquierdo de la página, toque el icono Suba el logotipo y suba un archivo de imagen (png, jpg, jpeg, gif) que contenga el logotipo de su empresa.

  3. Toque el campo Color de marca para seleccionar el color de los botones de la pantalla.

    hosted-checkout-page-integration-flow-2.png
  4. En el campo URL alternativa, introduzca la URL de la página que aparece cuando se completa o cancela el proceso cuando complete_checkout_url o cancel_checkout_url no está especificado.

    hosted-checkout-page-integration-flow-3.png

    Completar y cancelar URLs

    Otras páginas alojadas pueden tener campos diferentes, como url completa y cancel_url

    • Página de tokenización de beneficiarios

    • Página alojada de Rapyd Verify

    • Página IDV alojada

    • Página alojada Objeto de token de tarjeta

  5. Elimine cualquier método de pago que no vaya a aceptar (solo Hosted Checkout).

    • Banco: incluye redireccionamiento bancario y transferencia bancaria

    • Tarjeta

    • Efectivo

    • eWallet

    hosted-checkout-page-integration-flow-4.png
  6. Elija el texto del botón en el menú desplegable (solo en Hosted Checkout).

    hosted-checkout-page-integration-flow-5.png
  7. Detalles del servicio de atención al cliente - Puede añadir su información de contacto del servicio de atención al cliente (opcional) para que aparezca en sus páginas alojadas.

    hosted-checkout-page-integration-flow-6.png
  8. Toque el botón Guardar cambios en la esquina inferior derecha de la pantalla.

    hosted-checkout-page-integration-flow-7.png
Obtenga una vista previa de su página alojada

En la página de personalización de marca, cambie entre el icono móvil o el icono de escritorio para ver la vista previa de la página alojada.

hosted-checkout-page-integration-flow-8.png

Para generar su página de Rapyd Checkout, use el método Crear una página de Checkout.

  1. Antes de enviar su primera solicitud de API a la plataforma Rapyd, debe configurar sus Encabezados de autenticación incluyendo su Solicitar firmas, y a continuación, enviar una solicitud HTTPS POST a Rapyd, que generará la página de Checkout de Rapyd.

    Nota: Ver Realice su primera llamada a la API para configurarlo si aún no lo ha hecho.

  2. Una vez que haya completado la configuración de los encabezados y la firma, solicite el cuerpo del Checkout. Los siguientes tres parámetros obligatorios son necesarios para crear una página de Checkout:

    • Monto

    • País

    • Moneda

El siguiente ejemplo muestra una lista de parámetros obligatorios y opcionales que se utilizan en el cuerpo de una solicitud de creación de página de Checkout. La solicitud debe contener al menos los tres parámetros obligatorios mencionados anteriormente:

Descripción de los parámetros

Parámetro

Descripción

Monto (obligatorio)

El monto del pago, en unidades de la moneda definida en moneda. Decimal.

país (obligatorio)

El código ISO 3166-1 ALPHA-2 de dos letras para el país. En mayúscula.

moneda (obligatorio)

Código ISO 4217 de tres letras para la moneda utilizada en el campo monto . En mayúscula.

complete_checkout_url

URL a la que se redirige al cliente cuando el checkout se realiza correctamente. Esta página se puede configurar de forma dinámica para cada página de checkout generada, ya que anula la URL alternativa que se estableció en el Client Portal.

cancel_checkout_url

URL a la que se redirige al cliente después de presionar Volver al sitio web para salir de la página alojada. Esta URL anula la URL de merchant_website

No admite las URLs de localhost.

tipo_de_método_de_pago_incluye

Lista de métodos de pago que se muestran en la página de checkout.

id_de referencia_comerciante

Identificador de la transacción. Definido por el comerciante. Se puede usar para la reconciliación.

moneda_solicitada

Determina la moneda que usará el cliente para pagar, cuando sea diferente de la moneda que el vendedor quiere recibir. Código ISO 4217 de tres letras. Cuando se establece este campo, la página de checkout muestra la siguiente información:

  • Monto y moneda originales.

  • El importe convertido en la moneda solicitada.

  • El tipo de cambio.

cantidad_descontada

La cantidad de moneda que se va a restar del pago. Decimal. Un parámetro del objeto items_del__carro. Este parámetro no se puede pasar con el parámetro porcentaje_descontado.

porcentaje_descontado

Un descuento medido en porcentaje. Un parámetro del objeto items_del__carrito. Este parámetro no se puede pasar con el parámetro cantidad_descontada.

campos de cliente requeridos (opcional)

Una serie de campos en el objeto elementos_personalizados. Proporcione los siguientes valores para los campos:

  • nombre - El nombre completo del cliente

  • correo electrónico - La dirección de correo electrónico del cliente

  • número_teléfono - El número de teléfono del cliente

  • dirección - La dirección asociada al cliente

Flujo de pagos de terceros

Cuando el Tipo_flujo_pago de los métodos de pago que proporcione a sus clientes son una redirección de terceros, asegúrese de incluir las URL en los parámetros complete_payment_url y error_payment_url.

El cliente será redirigido a estas URL después de completar el pago.

Para determinar el tipo_flujo_pago, consulte List Payment Methods by Country.

Ejemplo de un cuerpo de solicitud
    • JSON

      • // Request URL: POST https://sandboxapi.rapyd.net/v1/checkout
        // Message body:
        {
            "amount": 100,
            "country": "SG",
            "currency": "SGD",
            "requested_currency": "USD",
            "complete_checkout_url": "https://example.com/complete",
            "cancel_checkout_url":"https://example.com/cancel"
            "merchant_reference_id": "950ae8c6-76",
            "payment_method_types_include": [
                "sg_credit_mastercard_card",
                "sg_credit_visa_card"   
             ]
        }
    • .Net

      • using System;
         using System.Text.Json;
        
         namespace RapydApiRequestSample
         {
            class Program
            {
                static void Main(string[] args)
                {
                    try
                    {
                        string[] payment_method_types_include = new string[] { "sg_credit_mastercard_card", "sg_credit_visa_card" };
        
                        var requestObj = new
                        {
                            amount = 100,
                            complete_checkout_url = "http://example.com/complete",
                            country = "SG",
                            currency = "SGD",
                         requested_currency = “USD”,
                            merchant_reference_id = "950ae8c6-76",
                            payment_method_types_include
                        };
        
                        string request = JsonSerializer.Serialize(requestObj);
        
                        string result = RapydApiRequestSample.Utilities.MakeRequest("POST", "/v1/checkout", request);
        
                        Console.WriteLine(result);
                    }
                    catch (Exception e)
                    {
                        Console.WriteLine("Error completing request: " + e.Message);
                    }
                }
            }
         }
    • JavaScript

      • const makeRequest = require('<path-to-your-utility-file>/utilities').makeRequest;
        
        async function main() {
          try {
            const body = {
              amount: 100,
              complete_checkout_url: 'http://example.com/complete',
              country: ‘SG’,
              currency: 'SGD',
              requested_currency: ‘USD’,
              merchant_reference_id: '950ae8c6-76',
              payment_method_types_include: [‘sg_credit_mastercard_card’, ‘sg_credit_visa_card’]
            };
            const result = await makeRequest('POST', '/v1/checkout', body);
        
            console.log(result);
          } catch (error) {
            console.error('Error completing request', error);
          }
        }
    • PHP

      • <?php
        $path = $_SERVER['DOCUMENT_ROOT'];
        $path .= "/<path-to-your-utility-file>/utilities.php";
        include($path);
        
        $body = [
            "amount" => 100,
            "complete_checkout_url" => "http://example.com/complete",
            "country" => "SG",
            "currency" => "SGD",
            “requested_currency” => “USD”,
            "merchant_reference_id" => "950ae8c6-76",
            "payment_method_types_include" => [
               "sg_credit_mastercard_card", 
               "sg_credit_visa_card"
            ]
        ];
        
        try {
            $object = make_request('post', '/v1/checkout', $body);
            var_dump($object);
        } catch (Exception $e) {
            echo "Error: $e";
        }
        ?>
    • Python

      • from pprint import pprint
        
        from utilities import make_request
        
        checkout_page = {
            "amount": 100,
            "complete_checkout_url": "http://example.com/complete",
            "country": "SG",
            "currency": "SGD",
            "merchant_reference_id": "950ae8c6-76",
            "payment_method_types_include": [
                "sg_credit_mastercard_card", 
                "sg_credit_visa_card"
            ]
        }
        
        results = make_request(method="post",
                               path="/v1/checkout",
                               body=checkout_page)
        pprint(results)

Puede incluir el identificador de cliente empezando por cus_ y save_card_default para incluir la casilla rellenada «guardar tarjeta», tal y como se describe en Crear página de checkout.

Rellene previamente los campos de Checkout

Puede rellenar previamente o eximir determinados campos de Checkout incluyéndolos en el objeto merchant_fields en su solicitud de API. Los campos no aparecerán en la página alojada.

La siguiente lista de ejemplos muestra el cuerpo de la respuesta, que contiene los siguientes campos, tal y como se describe en Crear página de Checkout:

Descripción de los campos

Campos

Descripción

identificación

ID de la página de Rapyd Checkout.

Monto

El monto del pago, en unidades de la moneda definida en moneda.

país

El código ISO 3166-1 ALPHA-2 de dos letras para el país.

moneda

Código ISO 4217 de tres letras para la moneda utilizada en el campo de monto.

cliente

ID del objeto «cliente». Cadena de texto que comienza con cus_. Relevante cuando el cliente ya está registrado y almacenado en la plataforma Rapyd.

sitioweb_comerciante

URL del sitio web del comerciante, proporcionada por el comerciante. Relevante cuando cancel_checkout_url o complete_checkout_url no están configurados. Se configuran en el Client Portal al configurar el campo URL alternativo, tal como se describe en Personalización de la página alojada.

logo_comerciante

URL del logotipo del comerciante, proporcionada por el comerciante.

url_redireccion

URL de la redirección de la página de Rapyd Checkout, proporcionada por Rapyd.

La respuesta también muestra todo el objeto de pago, que se ha editado, excepto el complete_payment_url y el error_payment_url.

Ejemplo de un cuerpo de respuesta
    • JSON

      • {
            "status": {
                "error_code": "",
                "status": "SUCCESS",
                "message": "",
                "response_code": "",
                "operation_id": "c343cac1-d682-4983-a386-345aa75d9aaf"
            },
            "data": {
                "id": "checkout_e6a30340c23be7201346eade2bfe3417",
                "country": "SG",
                "currency": "SGD",
                "amount": 100,
                "status": "NEW",
                "payment": {
                    "id": "",
                    "amount": 100,
                    "original_amount": 0,
                    "is_partial": false,
                    "currency_code": "SGD",
                    "country_code": "SG",
        
        //          ...
                     
                    "merchant_reference_id": "950ae8c6-76",
        
        //          ...
                     "merchant_requested_currency": "USD",
        
        //          ...
                },
               "payment_method_type": "",
               "payment_method_type_categories": null,
               "payment_method_types_include": [
                "sg_credit_mastercard_card",
                "sg_credit_visa_card"   
                 ],
              
        //          ...
               "payment_method_types_exclude": null,
                "customer": "",
                "customer_default_payment_method": {},
                "country_name": "Singapore",
                "merchant_color": "5387e6",
                "merchant_website": "https://www.rapyd.net/",
                "merchant_logo": "https://sboxiconslib.rapyd.net/merchant-logos/ohpc_04e7f6ae2362818fb6eb723b821824ad.jpg",
                "merchant_customer_support": {},
               //          ...
                "language": "en",
                "complete_checkout_url": "http://example.com/complete",
                "cancel_checkout_url": "",
                "redirect_url": "https://sandboxcheckout.rapyd.net?token=checkout_e6a30340c23be7201346eade2bfe3417",
                "timestamp": 1592143929,
                "expiration": 1593353529
            }
        }

Redirija a su cliente a la URL que recibió en la respuesta a Crear página de Checkout. La URL de redireccionamiento aparece en el campo redirect_url e incluye todos los parámetros de la sesión de Checkout.

Nota: La página de Checkout caduca 14 días después de la creación de forma predeterminada.

Como alternativa, puede especificar un parámetro page_expiration en la solicitud Crear página de Checkout y elija un valor diferente para el vencimiento de la página de Checkout, en Hora de Unix.

El siguiente diagrama de estados finitos resume los estados de la página Hosted Checkout.

checkout.svg

Descripción de los estados

Estado

Descripción

NUEVO

Se generó la página Hosted Checkout.

INP

El cliente ha introducido la información de pago. El pago está en curso.

DON

Se completó el pago.

EXP

La página de Checkout ha caducado.

DEC

Se ha rechazado el pago.