Documentación

Bóveda de pagos

Suggest Edits

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ámetroDescripción
userAuthTokenSe refiere a la sesión de cliente del pago actual.
Example: 'e15640i1-pse5-1538-a14c-as462ae8a163'
countryEste 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.
languageDefine 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).
isLoadingSpinnerControla la visibilidad de la página de carga/spinner de Deuna durante el proceso de pago.
onLoadingRequerido para recibir notificaciones sobre llamadas al servidor o eventos de carga durante el proceso de pago.
renderModeDetermina el modo en que se mostrarán los formularios de pago.
elementSelectorEspecifica el elemento HTML en el que deseas montar el SDK de Deuna. El SDK se representará dentro de este elemento.
creditCardDefina configuraciones específicas para el formulario de tarjeta de crédito.
deunaPaymentCredentialStorageStatusDefina 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
issuersFormEnableHabilita el formulario del emisor (listado de bancos).
textsProporciona texto personalizado para los botones del formulario de pago para que coincida con el idioma o la marca de tu aplicación.
externalPaymentButtonsConfigura 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ámetroDescripción
keepLoaderPuede 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ámetroDescripción
renderModeDetermina 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ámetroDescripción
cardDefine 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ámetroDescripción
textsProporciona 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.

Updated 2 months ago