Integración del kit de herramientas de pago

Una solución de pago sin preocuparse por el cumplimiento de PCI-DSS.

Crea tu propia página personalizada

Checkout Toolkit ha sido especialmente diseñado para integrarse directamente en los campos de pago de tu carrito de compras para que tu empresa tenga más control sobre toda la experiencia de pago.

Tutorial: Cómo crear una página de pago alojada e incrustar un kit de herramientas de pago

¿Busca un inicio rápido? ¿Esto tutorial te guiará paso a paso para crear una página de pago alojada con Rapyd Checkout y, a continuación, incrustarla en tu sitio web mediante el kit de herramientas de pago de Rapyd.

Cómo integrar el kit de herramientas de pago

Ejemplo de código complementario para vídeo: demostración del kit de herramientas de pago

Dispositivos de usuario final compatibles

Se admiten los siguientes dispositivos de usuario final:

Dispositivo	Descripción
Navegadores de teléfonos móviles	El ancho es adaptable y se admite a partir de 320 píxeles. Para una legibilidad óptima, defina el ancho de la pantalla. El tamaño de la altura es dinámico y cambia según el contenido Nota: No establezca un límite en la altura.
Navegadores de escritorio	Soporta un ancho de 500 px y más. El tamaño de la altura es dinámico y puede cambiar según el contenido Nota: No establezca un límite en la altura.

Dispositivo

Descripción

Navegadores de teléfonos móviles

El ancho es adaptable y se admite a partir de 320 píxeles. Para una legibilidad óptima, defina el ancho de la pantalla. El tamaño de la altura es dinámico y cambia según el contenido

Nota: No establezca un límite en la altura.

Navegadores de escritorio

Soporta un ancho de 500 px y más. El tamaño de la altura es dinámico y puede cambiar según el contenido

Nota: No establezca un límite en la altura.

Pasos para crear tu página de pago

Antes de incrustar el iframe en su página, consulte Integración de la página de pago alojada y sigue los pasos 1 y 2 para crear tu página de pago.

Una vez que hayas creado la página de pago, en la respuesta a la pregunta Crear página de pago, recibirás el ID del objeto de la página de pago, una cadena que comienza por checkout_, (por ejemplo: id: «checkout_9ebe58dcb9d75e8f972a35350f96c2fa»).

Filtrado para una sola categoría de tipo de método de pago

Es necesario especificar uno categoría de tipo de método de pago en la solicitud Create Checkout, o alternativamente, uno tipo de método de pago o uno lista de tipos de métodos de pago de la misma categoría.

Añade el siguiente código a tu página de pago:

Add a <script> tag with the URL of the Rapyd Checkout Toolkit:
```
<script src="https://checkouttoolkit.rapyd.net"></script>
```
Nota
Para ejecutar este método en sandbox, usa el siguiente código:
```
<script src="https://sandboxcheckouttoolkit.rapyd.net"></script>
```
Add a <div> tag with id="rapyd-checkout":
```
<div id="rapyd-checkout"></div>
```

Inicializa el objeto 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.
    wait_on_payment_confirmation: false,
          // Default is 'false'. Optional. 
          // You can keep the Toolkit open in a pending state. 
          // The iframe will close when the payment session has been completed. 
          // The timeout is set to 10 minutes.
    wait_on_payment_redirect: false,
          // Default is 'false'. Optional.
          // The iframe will close when the payment session has been completed.
          // The user will redirect to complete the 3DS Verification. 
    hide_submit_button: false, 
          // Default is 'false'. Optional. 
          // The submit button will not be visible if set to 'true'. (See CHECKOUT_SUBMIT_PAYMENT event). 
          // This is relevant only for the Checkout Toolkit (not other toolkit solutions). 
    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 Checkout () para mostrar la página de pago.
```
checkout.displayCheckout();
```
Paso opcional. close_on_complete está establecido en falso, llama checkout.closeCheckout () para cerrar la ventana del Rapyd Checkout Toolkit.
```
checkout.closeCheckout();
```
Paso opcional. Puedes pasar el hide_submit_payment campo como «verdadero» para ocultar el botón de envío de pago creado por el Rapyd Checkout Toolkit. Luego, activando el CHECKOUT_SUBMIT_PAYMENT evento, puedes gestionar el botón de envío. Relevante solo para Checkout Toolkit.
- - JavaScript
    const iframeElement = document.getElementById('rapyd-checkout-frame'); iframeElement.contentWindow.postMessage({type: "CHECKOUT_SUBMIT_PAYMENT"}, '*');

Inserta el código que se ejecuta cuando se producen los siguientes eventos. Usa tu código para leer el campo de eventos del ventana objeto.

JavaScript

window.addEventListener('onCheckoutPaymentSuccess', (event) => {
                    console.log(event.detail)
                    // Returns 'Payment' object.
                    // 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
})
            
window.addEventListener('onCheckoutPaymentPending', (event) => {
                    console.log(event.detail)
                    // Returns 'Payment' object.
                    // Client code.
})

window.addEventListener('onCheckoutPaymentExpired', (event) => {
                    console.error(event.detail.error)
                    // Returns a constant error message
                    // The event is triggered when the payment status is 'EXP'. 
                    // "CHECKOUT_PAYMENT_EXPIRED"
})
  

window.addEventListener('onCheckoutUpdateCardSuccess', (event) => {
                    console.log(event.detail)
                    // Returns payment method object. 
                    // client code
})
            
window.addEventListener('onCheckoutDeleteCardSuccess', (event) => {
                    console.log(event.detail)
                    // Returns deleted payment method object.
                    // client code

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

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>
    <script src="https://checkouttoolkit.rapyd.net"></script>
    <script>
        window.onload = function () {
            let checkout = new RapydCheckoutToolkit({
                pay_button_text: "Click to pay",
                pay_button_color: "blue",
                id: "checkout_9ebe58dcb9d75e8f972a35350f96c2fa"
            });
            checkout.displayCheckout();
        }
        window.addEventListener('onCheckoutPaymentSuccess', function (event) {
            console.log(event.detail)
        });
        window.addEventListener('onCheckoutPaymentFailure', function (event) {
            console.log(event.detail.error)
        });
    </script>
</head>

<body style="background-color: #f1f1f1; display: flex; align-items: center; flex-direction: column; margin: 0">
    <h1>Rapyd Checkout Toolkit Demo</h1>
    <div style="width: 500px" id="rapyd-checkout"></div>
</body>

</html>

Tras el pago exitoso, los clientes reciben un Al finalizar la compra, el pago se realiza correctamente evento con el objeto de pago.

Tenga en cuenta los siguientes campos y las tareas asociadas a cada uno de ellos.

Campos de objetos de pago

Campo	Descripción	Acción
estado	Indica el estado del pago (solo lectura). Respuestas - (Una de las siguientes): ACTUAR - Activo y en espera de pago. Se puede actualizar. PUEDE - Cancelado por el comerciante o el banco del cliente. CLO - Cerrado y pagado. ERRAR - Error. Se intentó completar el pago, pero falló. EXP - El pago ha caducado.	Puedes usar este campo para comprobar el estado del pago, si está activo, pendiente de finalización o cerrado y pagado.
redireccionar_url	URL de terceros en la que el cliente debe completar el pago, por ejemplo: pagos con tarjeta con autenticación 3DS, redireccionamiento bancario de pagos o redireccionamiento a monederos electrónicos.	Cuando el estado del pago es ACTUAR y se devuelve una URL en el campo redirect_url, asegúrate de redirigir al cliente a esta URL. Cuando se completa este pago, se redirige al cliente a la URL que proporcionaste en complete_payment_url o error_payment_url.
instrucciones	Describe los pasos necesarios que debe seguir el cliente para completar el pago. (Solo lectura)	Cuando el estado del pago es ACTUAR y se proporcionan las instrucciones, puedes mostrárselas al cliente.
códigos_textuales	Un código de texto o un conjunto de códigos de texto para que el cliente los utilice para completar los pasos descritos en el campo de instrucciones. (Solo lectura)	Cuando el estado del pago es ACTUAR y se proporcionan los textual_codes, muéstralos junto con la clave y el valor al cliente.
códigos_visuales	Una imagen o un conjunto de imágenes para que el cliente las utilice para completar los pasos descritos en el campo de instrucciones, por ejemplo, un código QR o un código de barras. (Solo lectura)	Cuando el estado del pago es ACTUAR y se proporcionan visual_codes, muéstrelos junto con la clave y el valor al cliente. Si el valor es una URL, muéstrela como una imagen. Si el valor es base 64, muestre la imagen.

Recomendación: Asegúrese de implementar elementos de navegación (por ejemplo, volver, devolver o cancelar) en su sitio web al integrar la solución de integración de Toolkit.

Personalizaciones del kit de herramientas de pago

Puedes usar el kit de herramientas para personalizar tu página de pago según tus preferencias.

Botones de billetera digital

Un parámetro llamado digital_wallets_buttons_only se ha añadido al kit de herramientas de pago. El valor predeterminado falso. Si el valor predeterminado está establecido en verdadero, luego aparecerán botones en la página de pago alojada que te permitirán vincularte a monederos digitales como Google Pay y Apple Pay.

Una matriz llamada digital_wallets_include_methods se ha añadido. Puede especificar los valores siguientes: google_pay o apple_pay. El valor que superes determinará el método de pago utilizado para el botón. Predeterminado: ambos.

Un objeto llamado digital_wallets_buttons_customization se ha añadido y contiene los siguientes objetos y parámetros:

estilo de botón - un objeto que contiene la configuración de cada tipo de monedero digital. En el caso de Apple Pay, los valores siguientes son: negro, blanco, o contorno blanco. Predeterminado: negro.
En el caso de Google Pay, los valores siguientes son: negro o blanco. Predeterminado: negro.
tipo_botón - permite al vendedor especificar el texto del botón. En el caso de Apple Pay, los valores siguientes son: agregar dinero, libro, comprar, salida, contribuir, donar, pedido, llanura, recargar, alquilar, suscríbete, apoyo, punta, recarga. Predeterminado: comprar
En el caso de Google Pay, los valores siguientes son: libro, comprar, pago, donar, pedido, pagar, suscríbete. Predeterminado: comprar

Nota: Para obtener más información, consulte Apple Pay y Google Pay documentación de usuario.

Usa el siguiente ejemplo de código para crear los botones del monedero digital con el kit de herramientas:

JavaScript

let checkout = new RapydCheckoutToolkit({
    pay_button_text: "Click to pay",   // Max 16 characters
    pay_button_color: "blue",           // CSS color or hex
    id: "checkout_b0d925ac8612bb417c227f0ae73447a4",  // Your actual checkout page ID
    close_on_complete: true,            // Close checkout window after payment
    page_type: "collection",            // Optional, default is "collection"
    digital_wallets_buttons_only: true,
    digital_wallets_include_methods: ["google_pay", "apple_pay"],
    digital_wallets_buttons_customization: {
        google_pay: {
            button_color: "black",
            button_type: "book"
        },
        apple_pay: { 
            button_color: "black",
            button_type: "book"
        }
    }

Traducciones

Tienes la opción de cambiar el idioma predeterminado de tu página de pago a cualquiera de los idiomas disponibles actualmente en la lista siguiente:

Chino simplificado	Chino tradicional	inglés
estonio	alemán	griego
hindi	islandés	indonesio
italiano	japonés	coreano
Bahasa Malayu (malayo)	lituano	ruso
portugués	eslovaca	esloveno
español	tailandés	turco
tagalo	ucraniano	vietnamita
danés	hebreo	polaco
sueco	checo	letón
maltés	noruego

Especifíquelo en el campo de parámetros de idioma al generar la página de pago.

Nota: Consulta la lista completa de idiomas en Compatibilidad con los idiomas de las páginas alojadas.

Estado pendiente del kit de herramientas de pago

Puedes pasar el confirmación de wait_on_payment campo como «verdadero» para mantener el iframe abierto en estado pendiente. El Pago pendiente al finalizar la compra se activa el evento, que devuelve el objeto de pago. El usuario es redirigido a pendiente página de estado mientras completan su pago. Los códigos de pago o las instrucciones se muestran si están presentes en el objeto de pago.

El pendiente la página de estado tiene un tiempo de espera predeterminado de 10 minutos. A continuación, se cierra el iframe El pago al finalizar la compra ha caducado el evento se activa si el pago no se completa dentro de ese período de tiempo.

El comerciante puede pasar el payment_expiration parámetro para el Crear página de pago solicitud para acortar el plazo de pago de 10 minutos.

Nota: No establezca un límite en la altura.

Redirección de autenticación 3DS

Puedes pasar el wait_on_payment_redirect campo como «verdadero» para aplicar una experiencia de pago a los pagos con tarjeta con la verificación 3DS incluida. El Pago pendiente al finalizar la compra se activa el evento, que devuelve el objeto de pago. Se redirige al usuario y completa la verificación de la 3DS

El iframe se cierra cuando Al finalizar la compra, ¿se ha realizado correctamente el pago? el evento se activa cuando se completa el pago, o si el Fallo en el pago al finalizar la compra el evento se activa si el pago está incompleto o se produce un error.

CSS personalizado

Elementos

En la siguiente tabla se enumeran todos los elementos disponibles:

Descripción de los parámetros corporales

Parámetro corporal	Descripción
información sobre herramientas	Información sobre herramientas, que se utiliza para mostrar información adicional sobre ciertos campos, por ejemplo, el código CVV en los pagos con tarjeta
enviar	Botón Enviar
entrada	Campos de entrada
menú desplegable	Listas desplegables
claro	Botón Borrar, que se usa para borrar la entrada en los campos de entrada y las listas desplegables
global	Un elemento diseñado para configuraciones generales Nota: Consulte a continuación para obtener más detalles

Elementos globales

fuentes array: global.fonts es una matriz de fuentes personalizadas, que puede contener una URL o un objeto, como se ve en el ejemplo siguiente. La familia establecida en global.fonts se puede usar en

CSS

global = {
  fonts: [
    "https://fonts.googleapis.com/css2?family=Mulish:wght@200&amp;display=swap",
    {
      family: 'myCustomFont',
      src: '/fonts/myCustomFontRegular.woff2',
      fontWeight: 400
    },
    {
      family: 'myCustomFont',
      src: '/fonts/myCustomFontBold.woff2',
      fontWeight: 700
    }
  ]
}

Tamaños de fuente: los tamaños configurados se aplican a todos los textos de Checkout Toolkit. Puedes anular los global.fontSizes configurando las fuentes por elemento. FontSizes admite todas las unidades de CSS (por ejemplo, rem, px)

Nota

Recomendamos usar unidades REM para que la aplicación pueda adaptarse a dispositivos de todos los tamaños (ya que la interfaz de usuario está diseñada para unidades REM).
La interfaz de usuario de Rapyd se basa en un tamaño de fuente raíz de 10 píxeles (1 rem = 10 px).

Variantes y estados

Cada elemento se puede configurar con una o más de las siguientes variantes o pseudoclases y pseudoelementos:

Variantes y estados	Descripción	Elementos a los que se aplica
marcador de posición	Aplicado al marcador de posición del elemento	entrada menú desplegable
discapacitado	Se aplica cuando el elemento está desactivado	entrada menú desplegable
flotar	Se aplica cuando el elemento está en estado flotante	menú desplegable enviar claro botón contenido de información sobre herramientas
activo	Se aplica cuando el elemento está en estado activo	entrada menú desplegable enviar claro botón de información sobre herramientas
error	Se aplica cuando el elemento está en estado de error	entrada menú desplegable
enfoque	Se aplica cuando el elemento está enfocado mientras se navega por una página web con la tecla TAB (o equivalente)	entrada menú desplegable
selección	Se aplica a un texto seleccionado dentro de un elemento	entrada
artículo	Se aplica a todos los elementos de un campo desplegable	menú desplegable
lista	Se aplica a la lista completa en un campo desplegable	menú desplegable
base	El estilo predeterminado	entrada menú desplegable enviar claro botón de información sobre herramientas contenido de información sobre herramientas

Propiedades de CSS

Cada nombre de propiedad especificado debe estar en mayúsculas, por ejemplo, borderRadius, no border-radius.

Tema predeterminado del kit de herramientas y propiedades CSS disponibles

CSS

const defaultTheme = {
  "global": {
    "fonts": [],
    "fontSizes": {
      "extraSmall": "1.2rem",
      "small": "1.4rem",
      "medium": "1.6rem",
      "large": "2rem",
      "extraLarge": "4rem"
    },
  "input": {
    "base": {
      "borderColor": "#e9ecef",
      "backgroundColor": "#fff",
      "borderRadius": "4px",
      "color": "#1a1a1a",
      "fontSize": "1.4rem",
      "fontWeight": 500,
      "fontFamily": ""
    },
    "active": {
      "borderColor": "#0046ff",
      "backgroundColor": "",
      "color": "",
      "labelColor": "#0046ff"
    },
    "error": {
      "borderColor": "#ff3650",
      "backgroundColor": "",
      "color": "",
      "labelColor": "#ff3650"
    },
    "focus": {
      "outline": "none"
    },
    "placeholder": {
      "fontSize": "1.4rem",
      "fontWeight": 500,
      "color": "#9ba2a7",
      "fontFamily": ""
    },
    "selection": {
      "color": "",
      "backgroundColor": ""
    },
    "disabled": {
      "backgroundColor": "#fbfbfb",
      "color": ""
    }
  },
  "cardFields": {
    "title": {
      "color": ""
    },
    "saveForFutureLabel": {
      "color": ""
    }
  },
  "requiredFields": {
    "title": {
      "color": ""
    }
  },
  "orderDetails": {
    "title": {
      "color": ""
    },
    "totalLabel": {
      "color": ""
    },
    "totalValue": {
      "color": ""
    }
  },
  "pciMessage": {
    "color": ""
  },
  "dropdown": {
    "backgroundColor": "",
    "title": {
      "color": ""
    },
    "base": {
      "fontSize": "1.4rem",
      "fontWeight": 500,
      "color": "#1a1a1a",
      "borderColor": "#e9ecef",
      "backgroundColor": "#fff",
      "borderRadius": "4px",
      "fontFamily": ""
    },
    "active": {
      "borderColor": "#0046ff",
      "backgroundColor": "",
      "color": ""
    },
    "error": {
      "borderColor": "#ff3650",
      "backgroundColor": "",
      "color": "#ff3650"
    },
    "focus": {
      "outline": "none"
    },
    "placeholder": {
      "fontSize": "1.4rem",
      "fontWeight": 500,
      "color": "#000",
      "fontFamily": ""
    },
    "disabled": {
      "color": "#9ba2a7",
      "backgroundColor": "#fbfbfb"
    },
    "item": {
      "transition": "0.3s",
      "base": {
        "backgroundColor": "#fff",
        "color": "#1a1a1a",
        "fontFamily": ""
      },
      "active": {
        "backgroundColor": "#e9ecef",
        "color": ""
      },
      "hover": {
        "backgroundColor": "#f6f6f9",
        "color": ""
      },
      "selected": {
        "backgroundColor": "#e9ecef",
        "color": ""
      }
    },
    "list": {
      "backgroundColor": "#ffffff",
      "borderRadius": "4px",
      "boxShadow": "0 0 4px 0 rgba(110, 119, 125, 0.16)",
      "border": "solid 2px #e9ecef"
    }
  },
  "submit": {
    "base": {
      "backgroundColor": "",
      "color": "",
      "fontWeight": "",
      "fontSize": "",
      "borderRadius": "",
      "fontFamily": "",
      "border": "",
      "boxShadow": "",
      "width": "",
      "height": "",
      "padding": "",
      "cursor": ""
    },
    "hover": {
      "backgroundColor": "",
      "color": "",
      "fontWeight": "",
      "borderRadius": "",
      "border": "",
      "boxShadow": "",
      "transition": "0.3s"
    },
    "active": {
      "color": "",
      "backgroundColor": ""
    }
  },
  "clear": {
    "base": {
      "width": "24px",
      "height": "24px",
      "padding": "10px",
      "borderRadius": "50%",
      "backgroundColor": "transparent",
      "cursor": "pointer"
    },
    "hover": {
      "backgroundColor": "#e9ecef",
      "transition": "0.3s"
    },
    "active": {
      "backgroundColor": "#d7dbdf"
    }
  },
  "tooltip": {
    "button": {
      "base": {
        "width": "16px",
        "height": "16px",
        "border": "solid 1px #6e777d",
        "borderRadius": "50%",
        "backgroundColor": "#ffffff"
      },
      "hover": {
        "backgroundColor": "#e9ecef",
        "border": "",
        "borderRadius": "",
        "transition": "0.3s"
      },
      "active": {
        "backgroundColor": "#e9ecef",
        "border": "",
        "borderRadius": ""
      }
    },
    "content": {
      "base": {
        "padding": "16px 18px",
        "borderRadius": "4px",
        "boxShadow": "0 0 6px 0 rgba(0, 0, 0, 0.12)",
        "border": "solid 1px #ededed",
        "backgroundColor": "#ffffff"
      },
      "hover": {
        "padding": "",
        "borderRadius": "",
        "boxShadow": "",
        "border": "",
        "backgroundColor": "",
        "transition": "3000ms"
      }
    }
  },
  "cart": {
    "background": "none",
    "border": "none",
    "fontFamily": "inherit",
    "description": {
      "fontSize": "1.2rem",
      "fontWeight": 400,
      "color": "#1a1a1a"
    },
    "amount": {
      "fontSize": "1.4rem",
      "fontWeight": 600,
      "color": "#1a1a1a"
    },
    "quantityTitle": {
      "fontSize": "1.2rem",
      "color": "#6e777d"
    },
    "quantityValue": {
      "fontSize": "1.4rem",
      "fontWeight": 600,
      "color": "#4a4a4a"
    },
    "image": {
        "width": "",
        "height": "80px",
        "border": "none",
        "borderRadius": 0,
        "hover": {
          "border": "none",
          "borderRadius": 0,
          "transition": "0.3s"
        },
          "focus": {
            "outline": "none"
        }
      }
    }, 
    "instructions": {
       "title": {
         "color": ""
       },
       "text": {
         "color": ""
       },
       "numbering": {
         "background": "",
         "text": ""
       }
    }  
  };

Pasar un objeto de estilo

Puede pasar un objeto de estilo en el método init, junto con el resto de los campos. Vea el ejemplo siguiente

JavaScript

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.
          // If the client will pass a backgroundColor in the style object
    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.    
    style: {
          global: {
            fonts: [
                "https://fonts.googleapis.com/css2?family=Mulish:wght@200&amp;display=swap",
                 {
                    family: 'myCustomFont',
                    src: '/fonts/myCustomFontRegular.woff2',
                    fontWeight: 400
                 },
                 {
                    family: 'myCustomFont',
                    src: '/fonts/myCustomFontBold.woff2',
                    fontWeight: 700
                 }
            ]
        },
        submit: {
            base: {
                backgroundColor: '#0000FF',
                    // If passed for the 'submit' element, it will override the pay_button_color field.
                fontFamily: 'myCustomFont',
   
            }
        }  
});

En esta sección:

Documentación

Integración del kit de herramientas de pago

Crea tu propia página personalizada

Tutorial: Cómo crear una página de pago alojada e incrustar un kit de herramientas de pago

Cómo integrar el kit de herramientas de pago

Dispositivos de usuario final compatibles

Pasos para crear tu página de pago

Filtrado para una sola categoría de tipo de método de pago

Nota

Ejemplo de kit de herramientas Rapyd Checkout integrado

Personalizaciones del kit de herramientas de pago

Botones de billetera digital

Traducciones

Estado pendiente del kit de herramientas de pago

Redirección de autenticación 3DS

CSS personalizado

Elementos

Elementos globales

Nota

Variantes y estados

Propiedades de CSS

Tema predeterminado del kit de herramientas y propiedades CSS disponibles

Pasar un objeto de estilo

Resultados de la búsqueda