Bóveda de pagos

Para habilitar la funcionalidad de guardar credenciales de pago a tus usuarios, el primer paso es asegurarse de incluir el archivo DEUNA SDK en tu página web antes de cerrar el <body>. Vea un ejemplo a continuación:

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

Crear una instancia

En tu aplicación de JavaScript, crea una instancia de clase Deuna proporcionando un la información mostrada en el code snippet. Consulta la página Obtenga sus credenciales de API si no tienes tus credenciales. En el siguiente ejemplo, la clase inicializada se atribuye a la constante instanceDeuna.

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

Montar el Registro

La configuración y el montaje se realizan en el mismo paso para Registro. Para hacerlo, utiliza el deuna.mountPaymentCredentialStorage y proporciona los parámetros necesarios. La siguiente tabla enumera todos los parámetros y sus descripciones.

Parámetro	Descripción
`userAuthToken`	Se refiere a la sesión de cliente del pago actual. `Example: 'e15640i1-pse5-1538-a14c-as462ae8a163'`
`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.
`language`	Define el idioma a utilizar en los formularios de pago. Puedes configurarlo en una de las opciones de idioma disponibles: es (español), en (inglés) o pt (portugués).
`isLoadingSpinner`	Controla la visibilidad de la página de carga/spinner de Deuna durante el proceso de pago.
`onLoading`	Requerido para recibir notificaciones sobre llamadas al servidor o eventos de carga durante el proceso de pago.
`renderMode`	Determina el modo en que se mostrarán los formularios de pago.
`elementSelector`	Especifica el elemento HTML en el que deseas montar el SDK de Deuna. El SDK se representará dentro de este elemento.
`creditCard`	Defina configuraciones específicas para el formulario de tarjeta de crédito.
`deunaPaymentCredentialStorageStatus`	Defina una devolución de llamada para ejecutar después de que finalice el proceso de inscripción. se llama con `vaultedToken` y `status` parámetros. El `status` devuelto puede ser uno de: ▪️ `CREATED` ▪️ `EXPIRED` ▪️ `REJECTED` ▪️ `READY_TO_STORE_PAYMENT_CREDENTIAL` ▪️ `STORE_PAYMENT_CREDENTIAL_IN_PROCESS` ▪️ `DISCARD_PAYMENT_CREDENTIAL_IN_PROCESS` ▪️ ️`STORE_PAYMENT_CREDENTIAL` ▪️ `DECLINED` ▪️ `CANCELED` ▪️ `ERROR`
`issuersFormEnable`	Habilita el formulario del emisor (listado de bancos).
`texts`	Proporciona texto personalizado para los botones del formulario de pago para que coincida con el idioma o la marca de tu aplicación.
`externalPaymentButtons`	Configura botones de pago externos como Paypal, Google Pay o Apple Pay.

El siguiente bloque de código presenta un ejemplo de configuración y montaje de parámetros de Registro.

deuna.mountPaymentCredentialStorage({
  userAuthToken: 'e15640i1-pse5-1538-a14c-as462ae8a163',
  /**
   * country can be one of CO, BR, CL, PE, EC, MX
   */
  country: country,
  /**
  * Language can be one of es, en, pt
  * Default is browser language
  */
  language: 'es',
  /**
   * Hide or show the DEUNA loading/spinner page
   * Default is true
   * @optional
   */
  showLoadingSpinner: true,
  /**
   * Required if you'd like to be informed if there is a server call
   * @param { isLoading: boolean, type: 'DOCUMENT' | 'SINGLE_USE_TOKEN'  } data
   * @optional
   */
  onLoading: (args) => {
    console.log(args);
  }
  /**
   * Where the forms will be shown
   * Default { type: 'modal' }
   * @optional
   */
  renderMode: {
    /**
     * Type can be one of `modal` or `element`
     * Default modal
     */
    type: 'modal',
    /**
     * Element where the form will be rendered
     * Only needed if type is element
     */
    elementSelector: '#form-element',
  },
  /**
   *  API card
   *  @optional
   */
  creditCard: {
    /**
     * Mode render card can be step or extends
     * Default extends
     */
    type: "extends",
    /**
     * 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-front-side-card__name-label { 
     *    color: red !important;
     *    font-family: 'Luckiest Guy' !important;
     *   }`
     */
    styles: '',
    /** 
     * Show checkbox for save/enroll card 
     * Default is false
     */
    cardSaveEnable: false,
    /**
     * Custom texts in Card forms buttons
     * Example:
     * 
     *  texts: {
     *    cardForm?: {
     *      enrollmentSubmitButton?: string;
     *       paymentSubmitButton?: string;
     *     }
     *     cardStepper?: {
     *       numberCardStep?: {
     *         nextButton?: string;
     *       },
     *       cardHolderNameStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       },
     *       expirationDateStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       },
     *       cvvStep?: {
     *         prevButton?: string;
     *         nextButton?: string;
     *       }
     *     }
     *  }
     */
    texts: {},
    /**
     * Hide or show the document fields into card form
     * Default is true
     * @optional
     */
    documentEnable: true,
  },
  /**
   * Call back is called with the following object
   * @param {{ 
   *  status: 'CREATED'
   *    | 'EXPIRED',
   *    | 'REJECTED',
   *    | 'READY_TO_STORE_PAYMENT_CREDENTIAL',
   *    | 'STORE_PAYMENT_CREDENTIAL_IN_PROCESS',
   *    | 'DISCARD_PAYMENT_CREDENTIAL_IN_PROCESS',
   *    | 'STORED_PAYMENT_CREDENTIAL',
   *    | 'DECLINED',
   *    | 'CANCELED',
   *    | 'ERROR',
   *  vaultedToken: string,
   * }}
   */
  deunaPaymentCredentialStorageStatus: ({ status, vaultedToken}) => {
    console.log('status', { status, vaultedToken})
  },
  /**
   * If this is called the SDK should be mounted again
   * @param { error: 'CANCELED_BY_USER' | any }
   * @optional
   */
  deunaError: (error) => {
    console.log('There was an error', error)
  },
});

Personalizaciones

Además de los ejemplos de código provistos, puedes acceder a el App Demo para una implementación completa de los SDK de Deuna o ir directamente a las demostraciones de checkout de HTML y JavaScript disponibles en GitHub.

DEUNA Web SDK proporciona servicios y configuraciones adicionales que puede usar para mejorar la experiencia de los clientes:

Cargador: Controle el uso del cargador

Parámetro	Descripción
`keepLoader`	Puede elegir si desea ocultar o mostrar la página de carga/giratoria de DEUNA. Habilitar esta opción garantiza que el componente de carga permanezca mostrado hasta que se llame a la función hideLoader() o continuePayment(). The default value is true.

deuna.startCheckout({
  showLoading: true,
})

Modo de representación de formularios

Parámetro	Descripción
`renderMode`	Determina el modo en que se mostrarán los formularios de pago. - `type`: puede ser uno de `modal` o `element` - `elementSelector`: Elemento donde se representará el formulario. * Sólo es necesario si `type` es `element`.

deuna.startCheckout({
  renderMode: {
    type: 'modal',
    elementSelector: '#form-element',
  },
})

Configuraciones de formulario de tarjeta

Parámetro	Descripción
`card`	Define configuraciones especificas para el formulario de tarjeta de crédito - `type`: `step` o `extends`

deuna.startCheckout({
  card: {
    type: "extends",
    styles: '',
    cardSaveEnable: false,
    texts: {}
  },
})

Botones de formulario de pago de texto

Parámetro	Descripción
`texts`	Proporciona texto personalizado para los botones del formulario de pago para que coincida con el idioma o la marca de tu aplicación.

deuna.startCheckout({
  texts: {
  	customerForm?: {
      submitButton?: string;
    }
    paymentOtp?: {
      sendOtpButton?: string;
    }
  }
})

Puedes ver una pagina web DEMO con estas funcionalidades.

Personalizaciones de SDK: cambie la apariencia de SDK para que coincida con su marca.\