INTEGRACIONES
Integra nuestro botón de pago con distintas soluciones creadas para tu comercio.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="button-container"></div>
<script src="https://api.slightpay.com/pay-button/ID_COMMERCE?production=false&key=KEY_COMMERCE"></script>
<script>
// Using library
let Lightpay = window.Lightpay.default;
let paymentButtonInstance = new Lightpay(
{
onSucces: (resp) => {console.log(resp)}, // Nota: Transcrito textualmente como "onSucces"
onError: (error) => {console.log("error",error)},
products: [
{ "amount": 1000, "name": "Producto 1", "quantity": 1 }
],
totalAmount: false,
tax: "0",
shippingFee: 100,
type: "default"
}
).render('button-container')
</script>
Este código se puede implementar en cualquier página web, ha sido testeado con PHP y Javascript, proximamente mostraremos ejemplo de integración, pero queda a decision del desarrollador el como aplicar la solución.
Explicaremos cada una de las funciones que tiene la instancia del boton, en la imagen anterior vemos que es una instancia a la cual se le pasa un objeto a su constructor el cual contiene onSucces que es una funcion callback al momento de que todo sale correcto en la compra, para esto el desarrollador debe saber que colocar ahi, ya sea pasar a la siguiente pantalla, mandar llamar algún servicio, lo que sea que se necesite para continuar con el flujo de su comercio
Posteriormente necesitan una funcion para validar igualmente, a lo que llamamos onError, ahi deberán colocar ya sea una alerta donde expresen cual fue el error, recuerden que si el error tiene que ver con algo de Slightpay por favor comuniquense con soporte@slightpay.com
Luego de tener claro las dos funciones anteriores podemos ver 5 atributos más del objeto, los cuales explicaremos: products, es un arreglo de objetos, el cual contiene un amount (costo individual del articulo), name (Nombre del producto), quantity (Cantidad de articulos), por lo tanto ustedes deberán tener su carrito a la par de este objeto.
Después de products, tenemos totalAmount actualmente no es necesaria asi que pueden dejarla en false, tax son los impuestos de la orden, si ustedes la estan calculando antes por favor coloquen un 1 como en el ejemplo.
ShippingFee es el costo de envio, y por ultimo tenemos type el cual define el tema del boton actualmente tenemos 2, blue y default el cual sería azul y el otro blanco, usenlos como prefieran igualmente pueden ser editados accediendo a sus clases de CSS.
Cabe destacar que las primeras lineas (button-container) es el lugar donde se renderiza el boton, es por esto que la ultima linea del código dice "render", asi que de esa manera ustedes sabrán que donde colocar ese div para visualizar el botón.
El código esta relacionado a la librería principal conformada por la url de la linea 2, como se observa tiene un ID_COMMERCE y un KEY_COMMERCE, esas palabras deben ser sustituidas por el id del comercio y su llave de producción/pruebas encontrado en https://comercios.slightpay.com
Las urls son:
Producción: https://api.slightpay.com/pay-button/ID_COMMERCE?production=false&key=KEY_COMMERCE
Pruebas: *En revisión*
