Documentación

Orden de un usuario registrado

Suggest Edits

Para permitir que tus usuarios registrados realicen compras en tu e-commerce, es importante que primero verifiques si ya tienen una cuenta y que les permitas iniciar sesión en ella.

A continuación, te explicaremos cómo puedes realizar la verificación de usuario y cómo enviar un código OTP (One Time Password) al correo electrónico o al teléfono del usuario para que pueda iniciar sesión.

Antes de continuar, recuerda previamente haber completado los pasos de:

  • Inicializar el Checkout.
  • Tokenizar una orden.

**Verificación de usuario

Para verificar si un usuario ya tiene una cuenta en tu e-commerce, puedes utilizar la función checkIfUserExists() de nuestro SDK. Esta función recibirá como parámetro el correo electrónico del usuario a verificar y devolverá un objeto con una propiedad "success" que indicará si el usuario existe o no en tu e-commerce. Aquí te mostramos cómo puedes utilizar esta función:

const userExist = await SDK.checkIfUserExists("[email protected]")
if(userExist.data?.success){
  console.log(userToken.data);
}
else{
  console.warn(userExist.error!.error);
  return;
}

**Envío de código OTP para inicio de sesión

Una vez que hayas verificado si el usuario ya tiene una cuenta en tu e-commerce, es necesario enviar un código OTP al correo electrónico o al teléfono del usuario para que pueda iniciar sesión. Para esto, en nuestro SDK contamos con las funciones sendOtpToEmail() y sendOtpToSMS().

Enviar OTP al correo del usuario:

const userExist = await SDK.checkIfUserExists("[email protected]")
if(userExist.data?.success){
  await SDK.sendOtpToEmail('[email protected]'); 
  return;
}
else{
  console.warn(userExist.error!.error);
  return;
}

Enviar OTP mediante SMS al teléfono del usuario:

const userExist = await SDK.checkIfUserExists("[email protected]")
if(userExist.data?.success){
  await SDK.sendOtpToSMS('[email protected]'); 
  return;
}
else{
  console.warn(userExist.error!.error);
  return;
}

Una vez que hayas enviado el código OTP es necesario que el usuario lo ingrese en una interfaz de tu e-commerce para iniciar sesión.

Inicio de sesión mediante código OTP enviado

Para que el usuario pueda iniciar sesión utilizando el código OTP enviado a su correo electrónico o teléfono, debes utilizar la función loginWithOtp(). Esta función recibirá como parámetros el correo electrónico del usuario, el código OTP que se envió y el tipo de envío (OtpType.Email o OtpType.Sms).

Inicio de sesión mediante código enviado por correo electrónico:

const userToken = await SDK.loginWithOtp('[email protected]', '060155', OtpType.Email);

Inicio de sesión mediante código enviado por SMS:

const userToken = await SDK.loginWithOtp('[email protected]', '060155', OtpType.Sms);

Estás listo para permitir que tus usuarios registrados inicien sesión y realicen compras en tu e-commerce ¡Continuemos!.

Establece una dirección.

Es necesario crear una dirección para que se pueda realizar la entrega de la compra. Debes incluir los campos requeridos para crear un objeto de tipo "address". Puedes conocer más acerca de este tipo de campo y su descripción en nuestra documentación aquí.

const address: Address = {
    first_name: "Jhon",
    last_name: "Doe",
    phone: "+599999999",
    identity_document: "123456789",
    lat: -0.190974,
    lng: -78.496911,
    address1: "Av. América 56, Quito 170129, Ecuador",
    address2: "Av. América 56, Quito 170129, Ecuador",
    city: "Quito",
    zipcode: "170129",
    state_name: "Pichincha",
    state_code: "EC",
    country: "Ecuador",
    address_type: "home",
    additional_description: "Cachan de la florita",
    is_default_address: true,
    is_billing_address: true,
  };

Obten los métodos de envío y establecer uno

Después de haber creado la dirección, es necesario obtener los métodos de envío disponibles para la orden. Para esto, se utiliza el método getShippingMethods de la instancia del Checkout.

const orderAddress = await order.getShippingMethods(address);

Este método devuelve una lista con los métodos de envío disponibles para la orden, los cuales pueden ser diferentes dependiendo de la dirección y el tipo de orden. Cada método de envío tiene un código que se debe utilizar para establecer el método de envío deseado en la orden.

Para establecer un método de envío en la orden, se utiliza el método setShippingMethod de la instancia del Checkout. En este ejemplo, se establecerá el primer método de envío disponible en la lista de métodos de envío obtenida anteriormente.

const methodCode = orderAddress.data!.shipping_methods[0].code;
await order.setShippingMethod(methodCode);

Al establecer el método de envío, la dirección que se proporcionó anteriormente también se asigna automáticamente a la orden.

Listar los métodos de pago

En este paso, debemos cargar los métodos de pago que se encuentran disponibles según el panel de administración de tu comercio. Para cargar los métodos de pago, podrás utilizar el método getPaymentMethods de nuestro SDK. Este método devolverá una lista con todos los métodos de pago disponibles para tu comercio.

A continuación te mostramos la respuesta obtenida para un comercio que tiene activos dos métodos de pago: POS y Tarjeta de crédito.

{
  data: [
    {
      enabled: true,
      method_type: 'cash',
      processor_name: 'cash',
      specific_fields: null,
      input_schema: [],
      labels: [Object],
      exclude_cvv: false
    },
    {
      enabled: true,
      method_type: 'credit_card',
      processor_name: 'paymentez_credit',
      specific_fields: null,
      input_schema: [Array],
      labels: [Object],
      exclude_cvv: false
    }
  ]
}

Por ejemplo, si el método de pago seleccionado por el usuario es de tipo CreditCard, se debe enviar un payload con la información de la tarjeta de crédito del usuario como se muestra a continuación:

if (paymentMethod.method_type == PaymentMethodTypes.CreditCard) {
    const creditCard: CreditCard = {
      expiry_month: "06",
      expiry_year: "2025",
      card_holder: "Jhon Doe",
      card_holder_dni: "9999999999",
      card_number: "4242424242424242",
      card_cvv: "123",
      address1: "Calle 12 avenida 17",
      zip: "170129",
      city: "Quito",
      state: "Pichincha",
      country: "Ecuador",
      phone: "593999999999",
    };
    orderResp.setCreditCard(creditCard);
  }
 order.setPaymentMethod(paymentMethod);

En nuestra documentación puedes encontrar datos de prueba de los procesadores integrados actualmente.

En caso de que los métodos de pago no estén configurados en el panel de administración o no estén configurados correctamente, se mostrará un mensaje de error en la consola.

const getPaymentMethods = await SDK.getPaymentMethods();
// If the payment methods are not configured correctly, this error will appear.
if (getPaymentMethods.error != null) {
  console.log("Error in getPaymentMethods");
  return;
}
// If the payment methods are not configured in the admin this error appears
if (getPaymentMethods.data?.data.length == 0) {
  console.log("Payment methods not configured");
  return;
}
console.log(getPaymentMethods.data?.data);

Una vez que hayas obtenido los métodos de pago disponibles, podrás utilizarlos para establecer un método de pago para la orden. Con esto estamos listos para continuar con el siguiente paso en el proceso de compra.

Procesar pago

Ahora vamos a procesar el pago de la orden seleccionando un método de pago de los listados en el paso anterior. La función SDK.pay se utiliza para procesar el pago de una orden y requiere los siguientes parámetros:

  • email (opcional): correo electrónico del usuario.
  • payment_method: método de pago seleccionado por el usuario.
  • card_tokenized (opcional): objeto que contiene el ID del token de la tarjeta y, opcionalmente, el código CVV. Este objeto se utiliza si el usuario ya ha tokenizado su tarjeta de crédito previamente.
  • card (opcional): objeto que contiene la información de la tarjeta de crédito, incluyendo el nombre del titular, el número de la tarjeta, el código CVV y la fecha de caducidad. Este objeto se utiliza si el usuario no ha tokenizado su tarjeta de crédito previamente.
  • billing_address: objeto que contiene la información de facturación del usuario.

Este método nos devolverá la orden con un estado de succeeded.

const pago = await order.processPayment();

Verificar la orden en el panel de administración

Verificar orden en el panel de administración consiste en revisar y verificar que la transacción ha sido procesada correctamente y que los detalles de la orden de compra estén correctos.

Para verificar la orden en el panel de administración, sigue estos pasos:

  1. Inicia sesión en el panel de administración de tu cuenta.
  2. Busca la sección de pedidos o transacciones recientes.
  3. Busca la transacción que acabas de procesar y verifica que los detalles de la orden, como la información del cliente, la dirección de envío, el método de envío y el método de pago, estén correctos.
import { Address, Checkout, Environment, PaymentMethodTypes, CreditCard, OtpType } from "@d-una/checkout-sdk";

async function Init() {
  const SDK = await Checkout.init({
    env: Environment.Staging,
    apiKey: "your Public API Key"
  });

  const { data, error } = await SDK.getOrderTokenized("Order token");
  if (error) {
    console.warn(error.error);
    return;
  }

  const order = data!;

  const userExist = await SDK.checkIfUserExists("[email protected]")
  if(userExist.data?.success){
    // Once we receive the OTP to our email we must comment or delete this line 
    // await SDK.sendOtpToEmail('[email protected]'); 
    // return;
    const userToken = await SDK.loginWithOtp('[email protected]', '123456', OtpType.Email);
    if (userToken.error){
      console.warn(userToken.error!.error);
      return;
    }
    console.log(userToken.data);
  }
  else{
    console.warn(userExist.error!.error);
    return;
  }

 const address: Address = {
    first_name: "Jhon",
    last_name: "Doe",
    phone: "+599999999",
    identity_document: "123456789",
    lat: -0.190974,
    lng: -78.496911,
    address1: "Av. América 56, Quito 170129, Ecuador",
    address2: "Av. América 56, Quito 170129, Ecuador",
    city: "Quito",
    zipcode: "170129",
    state_name: "Pichincha",
    state_code: "EC",
    country: "Ecuador",
    address_type: "home",
    additional_description: "Cachan de la florita",
    is_default_address: true,
    is_billing_address: true,
  };

  await order.setBillingAddress(address);

  // If the order is of type delivery
  // await order.setShippingRate(address);
  const getPaymentMethods = await SDK.getPaymentMethods();
  if (getPaymentMethods.error) {
    console.warn(getPaymentMethods.error!.error);
    return;
  }

  if (getPaymentMethods.data?.data.length == 0) {
    console.warn("Payment methods not configured");
    return;
  }

  const paymentMethod = getPaymentMethods.data?.data[1]!;

  if (paymentMethod.method_type == PaymentMethodTypes.CreditCard) {
    const creditCard: CreditCard = {
      expiry_month: "06",
      expiry_year: "2025",
      card_holder: "Jhon Doe",
      card_holder_dni: "9999999999",
      card_number: "4242424242424242",
      card_cvv: "123",
      address1: "Calle 12 avenida 17",
      zip: "170129",
      city: "Quito",
      state: "Pichincha",
      country: "Ecuador",
      phone: "593999999999",
    };
    order.setCreditCard(creditCard);
  }
  // If the item in the list of payment methods is Cash
  // if (paymentMethod.method_type == PaymentMethodTypes.Cash) {
  //   Este método es opcional 
  //   order.setCashChange(50);
  // }
  order.setPaymentMethod(paymentMethod);
  const pago = await order.processPayment();
}

Init();

Updated 10 months ago