Compra como usuario invitado

Suggest Edits

📘

NOTA:

Antes de continuar recuerda realizar los 3 pasos de Inicio

4. Establecer correo para usuario invitado

Establece un correo de invitado y asígnalo a la orden, esto servirá para poder establecer direcciones en la orden.

order.setGuestEmail("[email protected]");

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 envio.

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

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

// Si deseamos usar Efectivo como método de pago debemos asignar el primer elemento de la lista.
const paymentMethod = getPaymentMethods.data?.data[0]!;
// Si deseamos usar Tarjeta de crédito como método de pago debemos asignar el segundo elemento de la lista.
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 selecciono por el usuario en tu comercio 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 usuario para la orden, esto es opcional.

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

7. Procesar Pago

Por último procesar el pago de la orden. Este método 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 } 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!;
  order.setGuestEmail("[email protected]");
  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,
  };
	// If the order is of type pickup
  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 the item in the list of payment methods is CreditCard
  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: "1234123412341234",
      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) {
  //   This method is optional
  //   order.setCashChange(50);
  // }
  order.setPaymentMethod(paymentMethod);
  await order.processPayment();
}

Init();

Updated 4 months ago

Continua leyendo