Web SDK: Almacenar credenciales de pago modularmente

A continuación, describimos el proceso paso a paso para habilitar las funcionalidades de inscripción de campos seguros en su sistema:

Paso 1: incluya la biblioteca en su proyecto.

Para utilizar la inscripción con campos seguros debe incluir nuestro SDK en su página antes de cerrar su tag <body>.

<script src="https://sdk.deuna.io/v1/static/js/main.min.js"></script>

Paso 2: Inicialice los campos seguros con la clave pública

En tu aplicación de JavaScript, crea una instancia de clase Deuna proporcionando un la información mostrada en el code snippet

const instanceDeuna = deunaSDK.init(
    publicApiKey: "....",
    orderToken: "<order.token>",
    env: "<staging o production>",
    onEventDispatch: (event: obj) => { console.log(event) }
)

Paso 3: Inicie el proceso de pago

Para hacerlo, utiliza el modularPaymentCredentialsStorage y proporcionar los parámetros de configuración necesarios.

Los parámetros esenciales son los country, que determina el país para el que está configurado el proceso de pago, y checkoutSessionId, que hace referencia a la sesión de pago del pago actual. El siguiente bloque de código presenta un ejemplo de la configuración de parámetros.

La siguiente tabla enumera todos los parámetros requeridos y sus descripciones.

Parámetro	Descripción
`country`	Este parámetro determina el país para el que se está configurando el proceso de pago. Debe establecerse en uno de los siguientes códigos de país: CO, BR, CL, PE, EC o MX.
`checkoutSessionId`	Se refiere a la sesión de checkout del pago actual. `Example: '88f6f491-032a-4b08-b549-f8f221bfc7da'`

  const modularPaymentCredentialsStorage = deuna.modularPaymentCredentialsStorage({
    country,
    checkoutSessionId,
  })

Paso 4: Monte los Modular Payment Credentials

Después de definir los parámetros, definirá, configurará y montará los Secure Fields. Para cada Secure Field, debe definir el name y options al crearlo con el modularPaymentCredentialsStorage.create.

La siguiente tabla presenta todas las configuraciones disponibles:

Parámetros	Descripción
`name`	Los nombres disponibles para los nombres de campo son cvv, pan o expiration .
`options.placeholder`	Marcador de posición predeterminado para el campo.
`options.styles`	Estilos CSS adicionales para el campo actual.
`options.label`	Etiqueta visible del campo.
`options.showError`	Define si se mostrarán los errores. Las opciones disponibles son `true` y `false`.
`options.onChange`	Una función auxiliar que se puede configurar y se ejecutará cuando cambie el contenido del campo. Indica si los campos tienen errores.
`options.onBlur`	Una función auxiliar que se puede configurar y se ejecutará al desenfocar desde la entrada.
`options.onFocus`	Una función auxiliar que se puede configurar y se ejecutará cuando se enfoque en la entrada.

Una vez que hayas configurado el parámetro, renderizarás el Secure Field creado con el render seleccionando un elemento HTML usando un selector de CSS válido (#, ., [data-*]).

El siguiente bloque de código presenta un ejemplo de la configuración de parámetros para tres campos seguros y, a medida que se montan, los campos se presentan al usuario.

  const secureNumber = modularPaymentCredentialsStorage.create({
    /**
     * Fields name, can be 'cvv' | 'card_number' | 'expiration_date'
     */
    name: 'card_number',
    // All options are optional
    options: {
      placeholder: '4242 4242 4242 4242',
      /**
       * you can edit card form styles
       * only you should write css then it will be injected into the iframe
       * example 
       * `@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
       *  .Deuna-text-field__content.focus label.Deuna-text-field__label {
       *    color: orange;
       *    font-family: 'Poppins' !important;
       *   }`
       */
      styles: ``,
      label: 'Card Number',
      showError: true,
      // Indicates if the fields has error
      onChange: ({ error }) => {
        if (error) {
          console.log('error_pan')
        } else {
          console.log('not_error_pan')
        }
      },
      // Trigger when blurring from input
      onBlur() {
        console.log('blur_pan')
      },
      // Trigger when focussing on input
      onFocus: () => {
        console.log('focus_pan')
      }
    },
  })

  // Render into desired element
  secureNumber.render('#pan')

  const secureExpiration = modularPaymentCredentialsStorage.create({
    /**
     * Fields name, can be 'cvv' | 'card_number' | 'expiration_date'
     */
    name: 'expiration_date',
    // All options are optional
    options: {
      placeholder: 'MM / YYYY',
      /**
       * you can edit card form styles
       * only you should write css then it will be injected into the iframe
       * example 
       * `@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
       *  .Deuna-text-field__content.focus label.Deuna-text-field__label {
       *    color: orange;
       *    font-family: 'Poppins' !important;
       *   }`
       */
      styles: ``,
      label: 'Card Expiration Date',
      showError: true,
      // Indicates if the fields has error
      onChange: ({ error }) => {
        if (error) {
          console.log('error_expiration')
        } else {
          console.log('not_error_expiration')
        }
      },
      // Trigger when blurring from input
      onBlur() {
        console.log('blur_expiration')
      },
      // Trigger when focussing on input
      onFocus: () => {
        console.log('focus_expiration')
      }
    },
  })

  // Render into desired element
  secureExpiration.render('#expiration_date')


  const secureCvv = modularPaymentCredentialsStorage.create({
    /**
     * Fields name, can be 'cvv' | 'card_number' | 'expiration_date'
     */
    name: 'cvv',
    // All options are optional
    options: {
      placeholder: 'CVV',
     /**
       * you can edit card form styles
       * only you should write css then it will be injected into the iframe
       * example 
       * `@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');
       *  .Deuna-text-field__content.focus label.Deuna-text-field__label {
       *    color: orange;
       *    font-family: 'Arial' !important;
       *   }`
       */
      styles: ``,
      label: 'CVV',
      showError: true,
      // Indicates if the fields has error
      onChange: ({ error }) => {
        if (error) {
          console.log('error_cvv')
        } else {
          console.log('not_error_cvv')
        }
      },
      // Trigger when blurring from input
      onBlur() {
        console.log('blur_cvv')
      },
      // Trigger when focussing on input
      onFocus: () => {
        console.log('focus_cvv')
      }
    },
  })

  // Render into desired element
  secureCvv.render('#cvv')

Una vez montados, se mostrarán los tres campos seguros.

Paso 5: Crear un token abovedado

Para inscribirse, cree un Vaulted Token.

// Create Vaulted Token
// This will trigger an error if there are missing data
// You can catch it using a try/catch
const vaultedToken = await modularPaymentCredentialsStorage.generateVaultedToken({
  // Required: You can create an input to get this formation
  cardHolderName: 'Esteban Posada',
  customer: {
    document: {
      document_number: '1037888999',
      document_type: 'CC',
    },
  },
})

Si necesita la respuesta completa, puede utilizar modularPaymentCredentialsStorage.generateVaultedTokenWithInformation.

const vaultedTokenWithInformation = await modularPaymentCredentialsStorage.generateVaultedTokenWithInformation({
  // Required: You can create an input to get this formation
  cardHolderName: 'Esteban Posada',
  customer: {
    document: {
      document_number: '1037888999',
      document_type: 'CC',
    },
  },
})

Pasos adicionales

Además de los ejemplos de código proporcionados, puede acceder a la App Demo para obtener una implementación completa de DEUNA Modular Payment Credentials Storage.