Compra como usuario registrado

馃摌

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

Did this page help you?