Compra como usuario registrado

Suggest Edits

📘

NOTA:

Antes de continuar recuerda realizar los 3 pasos de Inicio

4. Verificar correo e inicia sesión

Verificación de usuario

Una vez tengas la orden, verífica si el correo del usuario existe de la siguiente forma:

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

En caso de existir el usuario, envía un código OTP al correo o al teléfono del usuario.

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

Enviar OTP al correo del usuario

const userExist = await SDK.userExist("[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.userExist("[email protected]")
if(userExist.data?.success){
  await SDK.sendOtpToSMS('[email protected]'); 
  return;
}
else{
  console.warn(userExist.error!.error);
  return;
}

Login mediante código enviado

🚧

Debe existir una interfaz donde el usuario coloque el código OTP enviado al correo o al teléfono.

Según el método por el cual se realizó el envío del código OTP utiliza ya sea OtpType.Email o OtpType.Sms en la función sendOtpToEmail con el cual se obtendrá un token de sesión.

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

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

5. Establecer una dirección

Es momento de crear una dirección, encontrarás un ejemplo de un payload donde se puede observar los campos requeridos para crear un objeto de tipo address, puedes conocer más acerca de los tipos de campo y su descripción en Obtener métodos de envío.

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,
  };

Pickup

Si el payload que enviaste al tokenizar la orden en el paso 2 es de tipo pickup deberás asignar el payload de address en la dirección de facturación de la siguiente manera.

await order.setBillingAddress(address);

Delivery

Si el payload que enviaste al tokenizar la orden en el paso 2 es de tipo delivery deberás asignar el payload de address para obtener los métodos de envío.

const orderAddress = await order.getShippingMethods(address);

El método getShippingMethods devuelve una lista con los métodos de envío disponibles para la orden, para asignarlo a la orden tendrás que usar el método setShippingMethod con el código del método de envío.
En este ejemplo se obtendrá el primer método de envío.

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

6. Seleccionar el método de pago

Cargar métodos de pago

Luego de establecer la dirección de la orden, obtén los métodos de pago que se encuentran en el panel de administración del comercio, esto devolverá una lista con todos los métodos de pago disponibles para tu comercio.
Para el ejemplo se usa el primer elemento de la lista de los métodos de pago.

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);

El comercio usado de ejemplo tiene dos métodos de pago:

  • Efectivo
  • Tarjeta de crédito con el procesador de pago
{
  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
    }
  ]
}

Asignar un método de pago

// If we want to use Cash as a payment method we must assign the first item in the list.
const paymentMethod = getPaymentMethods.data?.data[0]!;
// If we want to use Credit Card as payment method we must assign the second item in the list.
const paymentMethod = getPaymentMethods.data?.data[1]!;

Tarjeta de crédito

Si el elemento que se selecciono de la lista de métodos de pago es de tipo CreditCard deberás de enviar el siguiente payload con la información de la tarjeta de crédito.
Puedes encontrar datos de prueba de los procesadores integrados actualmente.

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);

Efectivo

Si el elemento que seleccionaste de la lista de métodos de pago es de tipo Cash, puedes enviarle el atributo CashChange que hace referencia al cambio que pide el cliente para la orden, esto es opcional.

if (paymentMethod.method_type == PaymentMethodTypes.Cash) {
    order.setCashChange(50);
}
 order.setPaymentMethod(paymentMethod);

7. Procesar Pago

Por último debemos procesar el pago de la orden. Este método nos devolverá la orden con un estado de succeeded.

const pago = await order.processPayment();

❗️

Tarjeta de crédito con OTP

Algunos métodos de pago requieren una validación extra de la identidad del usuario. La forma de validación es con un código OTP. Puedes obtener mas información al respecto en Validar una compra con OTP.

Verificar orden en el panel de administración

Listo. Si seguiste los pasos de manera correcta deberás poder ver la transacción en el panel de admin y tu código deberá verse del siguiente modo:

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.userExist("[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 4 months ago

Continua leyendo