Skip to main content

Documentación

Integración de páginas de pago alojadas

Sigue estos pasos y añade rápidamente Rapyd Hosted Checkout a tu sitio web.

Inicia sesión en el portal de clientes de Rapyd y comienza a crear tu propia experiencia de pago. Añade tus propios colores y logotipo y selecciona todos los métodos de pago que quieras aceptar

Personaliza tu página de pago

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

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

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

    Selecciona tu página alojada para verla

    La barra de vista previa, ubicada sobre la ventana de vista previa, mostrará una vista previa de la marca de tu página de Hosted Checkout. Puedes alternar entre la página de pago hospedado, 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

  2. En el Elementos de marca en el panel del lado izquierdo de la página, toca el Sube el logotipo icono y sube un archivo de imagen (png, jpg, jpeg, gif) que contenga el logotipo de tu empresa.

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

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

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

    Completar y cancelar direcciones URL

    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

    • Objeto de token de tarjeta de página alojada

  5. Elimina cualquier método de pago que no vayas a aceptar (solo pago organizado).

    • Banco: incluye redireccionamiento bancario y transferencia bancaria

    • Tarjeta

    • Efectivo

    • Billetera electrónica

    hosted-checkout-page-integration-flow-4.png
  6. Elige 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 - Puedes añadir tu información de contacto del servicio de atención al cliente (opcional) para que aparezca en tus páginas alojadas.

    hosted-checkout-page-integration-flow-6.png
  8. Pulsa el Guardar cambios botón 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, cambia 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 tu página de Rapyd Checkout, usa Crea una página de pago método.

  1. Antes de enviar tu primera solicitud de API a la plataforma Rapyd, debes configurar tu Encabezados de autenticación incluyendo su Solicita firmasy, a continuación, envía una solicitud HTTPS POST a Rapyd, que generará la página de pago de Rapyd.

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

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

    • 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 pago. La solicitud debe contener al menos los tres parámetros obligatorios mencionados anteriormente:

Descripción de los parámetros

Parámetro

Descripción

importe (obligatorio)

El importe 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 importe campo. Mayúscula

url de pago completa

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

cancelar_checkout_url

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

No admite las URL de localhost.

tipo_de_método_de_pago include

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

id_de referencia_comerciante

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

divisa_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 pago muestra la siguiente información:

  • Monto y moneda originales.

  • El importe convertido en la divisa solicitada.

  • El tipo de cambio.

cantidad_descontada

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

porcentaje de descuento

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

campos de cliente requeridos (opcional)

Una serie de campos en el elementos_personalizados objeto. 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 payment_flow_type si los métodos de pago que proporcionas a tus clientes son una redirección de terceros, asegúrate de incluir las URL en el URL de pago completa y error_payment_url parámetros.

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

Para determinar el payment_flow_type, 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";
        }
        ?>
    • Pitón

      • 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)

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

Rellene previamente los campos de pago

Puedes rellenar previamente o eximir determinados campos de pago incluyéndolos en el merchant_fields objeto en tu 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 pago:

Descripción de los campos

Campos

Descripción

identificación

ID de la página de Rapyd Checkout.

cantidad

El importe del pago, en unidades de la divisa definida en la divisa.

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 divisa utilizada en el campo de importe.

cliente

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

sitio web del 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 portal del cliente al configurar el campo URL alternativo, tal como se describe en Personalización de la página alojada.

logo_de_comerciante

URL del logotipo del vendedor, proporcionada por el vendedor.

redireccionar_url

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
            }
        }

Redirige a tu cliente a la URL que recibiste en la respuesta a Crear página de pago. La URL de redireccionamiento aparece en redirect_url campo e incluye todos los parámetros de la sesión de pago.

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

Como alternativa, puede especificar un page_expiration parámetro en Crear página de pago solicite y elija un valor diferente para el vencimiento de la página de pago, 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 pago ha caducado.

DICIEMBRE

Se ha rechazado el pago.