Documentación

Orden de un usuario invitado

Suggest Edits

Este proceso permite a un usuario realizar una compra sin tener que registrarse y crear una cuenta en tu e-commerce. Para este proceso de orden de un usuario invitado es necesario que previamente hayas completado los pasos de:

  • Inicializar el Checkout.
  • Tokenizar una orden.

Dicho esto, podemos continuar.

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: 'pos',
      processor_name: 'pos',
      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 Credit Card, 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();
// Si los metodos de pago no estan bien configurados aparecera este error
if (getPaymentMethods.error != null) {
  console.log("Error in getPaymentMethods");
  return;
}
// Si los metodos de pago no esta configurados en el admin aparece este error
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 SDK.pay(
{
  email: "[email protected]", //optional
  
  //Select a payment method
  //credit_card
  payment_method: "credit_card",
    //pay with existing/tokenized card
  card_tokenized: {
    id: "0323fd31-ea9c-49ed-b0a4-8f4e6b7fd546",
    cvv: "123", //optional depends on processor 
  },
    //pay without tokenized card 
    card: {
    card_holder: "name lastName",
    card_number: "4111 1111 1111 1111",
    cvv: "123",
    expiry_month: "12",
    expiry_year: "2023",
    card_holder_dni: "OPCIONAL",
  },
       /* 
    * if when tokenizing the order was sent
  * the billing address does not need to be sent in the next payload,
  * it will also depend on the payment processor if it requires a billing address
    */ 
  billing_address: {
      first_name: 'name',
      last_name: 'lastName',
      phone: '+52617014458',
      identity_document: '1111111111',
      lat: 25.539260206692635,
      lng: -103.46132558827024,
      address1: 'Av Morelos 1157, Primitivo Centro, Torreón, Coah., Mexico',
      address2: 'Av Morelos 1157, Primitivo Centro, Torreón, Coah., Mexico',
      city: 'Torreón',
      zipcode: '--',
      state_name: 'Coahuila de Zaragoza',
      state_code: 'COAH',
      country: 'MX',
      additional_description: '',
      address_type: 'home',
      email: '[email protected]'
    },
);

Verificar la orden en el panel de administración

Verificar la orden en el panel de administración consiste en revisar y verificar que la transacción haya 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:

  • Inicia sesión en el panel de administración de tu cuenta.
  • Busca la sección de pedidos o transacciones recientes.
  • 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 } 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 address: Address = {
    first_name: "name",
    last_name: "lastName",
    phone: "+52617014458",
    identity_document: "1111111111",
    lat: 25.539260206692635,
    lng: -103.46132558827024,
    address1: "Av Morelos 1157, Primitivo Centro, Torreón, Coah., Mexico",
    address2: "Av Morelos 1157, Primitivo Centro, Torreón, Coah., Mexico",
    city: "Torreón",
    zipcode: "--",
    state_name: "Coahuila de Zaragoza",
    state_code: "COAH",
    country: "MX",
    country_code: "MX",
    additional_description: "",
    address_type: "home",
    email: "[email protected]",
  };

  // set shipping method
  const shippingMethods = await SDK.getShippingMethods(address);  
  const methodCode = shippingMethods.data.shipping_methods[0].code;
  await SDK.setShippingMethod(methodCode,address);

  // get Payment methods
  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;
  }

  //Process pay
  await SDK.pay({
    email: "[email protected]",
    store_code: "all",
    payment_method": "pos",
    billing_address: {
      first_name: "name",
      last_name: "lastName",
      phone: "+52617014458",
      identity_document: "1111111111",
      lat: 25.539260206692635,
      lng: -103.46132558827024,
      address1: "Av Morelos 1157, Primitivo Centro, Torreón, Coah., Mexico",
      address2: "Av Morelos 1157, Primitivo Centro, Torreón, Coah., Mexico",
      city: "Torreón",
      zipcode: "--",
      state_name: "Coahuila de Zaragoza",
      state_code: "COAH",
      country: "MX",
      additional_description: "",
      address_type: "home",
      email: "[email protected]"
    }
  );
}

Init();

Updated about 1 year ago