Back to All

Problemas para integrar checkout a Ionic

Buenas tardes,

Tengo un par de preguntas referentes a la integración de conekta en mi aplicación móvil creada con Ionic 5.

Trate de instalar los paquetes de conekta a travez del comando que se especifica para instalar las librerias, el cual es npm install conekta.

Esto provocaba muchos errores en el proyecto asi que optamos por usar los cURLs para crear el cliente y la orden a travez de las APIs:

createCustomer(customerData: any): Observable {
return this.http.post(this.apiUrl, customerData, this.httpOptions);
}

createOrder(orderData: any): Observable {
return this.http.post(this.apiUrl2, orderData, this.httpOptions);
}

Ahora bien, la creación de las ordenes y clientes es exitosa y me proporciona el URL del checkout, pero ahora nos dimos cuenta que no es posible integrar ese checkout generado por el API a un iframe, por cuestiones de politicas.

Entonces tenemos varias dudas sobre como continuar con la implementación, ya solo quedaría como resolver la parte de alguna manera poder integrar el checkout de alguna otra manera.

Otra pregunta, en el json para generar la orden:

  line_items: [{
        name: "Soy un Articulo",
        unit_price: 16*100,
        quantity: 1
      }]

Ese lo tengo como ejemplo, como podemos hacer funcionar si en el ecommerce pueden tener una lista mas grande de articulos? intente añadirlos con un ciclo for y pegar el arreglo pero no me lo permite el api, me dice que no es lo que espera el API y da error

getItemsCarrito2(){

let item = {};
this.items.forEach((it: Producto) =>{
item = {
name: it.title,
unit_price: (it.precio*100).toFixed(2),
quantity: it.quantity
}
this.arregloitems.push(item);

})

}

Bueno sin mas que decir esas serian mis preguntas, que consejos o guias me podrian dar para implementar el checkout dentro de la app y como generar bien ese json de articulos.

PD. Intentamos con:

Checkout

Que viene en la documentacion, pero nos da un error en el archivo init:

const config = {
checkoutRequestId: '00000000-0000-0000-0000-000000000', //Checkout ID enviado desde el servidor para inicializar el componente de pago.
publicKey: 'key_Adnb8659Bfsg5bM0cKe2wZy',
targetIFrame: 'example',
};

const callbacks = {
onFinalizePayment: (event) => console.log(event),
onErrorPayment: (event) => console.log(event),
onGetInfoSuccess: (event) => console.log(event),
};

window.ConektaCheckoutComponents.Integration({ config, callbacks });

especificamente en la parte de conektaCheckoutComponent, diciendo que no existe, no entendi muy bien esa parte de crear "componente" no esta muy claro.

Cualquier tipo de ayuda con todas esas preguntas es bienvenida, buscamos solo integrar el pago en efectivo con oxxo de momento.

Muchas gracias y buen dia a todos.