Métodos de Pago y Cuotas

listados de medios de pago { "tab" "request", "url" "https //api mobbex com/p/sources?total={total}", "name" "listar medios de pago con api keys", "method" "get", "request" { "pathparameters" \[], "queryparameters" \[ { "kind" "required", "name" "total", "type" "string", "description" "importe total de la operación sobre el cual se calcularan las distintas modalidades de cuotas en cada medio de pago " }, { "kind" "optional", "name" "sources\[]", "type" "array", "description" "permite filtrar los medios de pago a listar" }, { "kind" "optional", "name" "installments\[]", "type" "array", "description" "permite filtrar cuotas" }, { "kind" "optional", "name" "intent", "type" "string", "description" "tipo de operatoria de la operación ver documentación sobre operatoria en 2 pasos " }, { "kind" "optional", "name" "context", "type" "string", "description" "contexto del pago por defecto checkout ver más en https //mobbex dev/consulta de operaciones#al tipos de contextos" } ], "headerparameters" \[ { "kind" "required", "name" "x api key", "type" "string", "description" "api key de su aplicación creada en el portal de desarrolladores de mobbex " }, { "kind" "required", "name" "x access token", "type" "string", "description" "token de acceso a su entidad " } ], "bodydataparameters" \[], "formdataparameters" \[] }, "results" { "languages" \[ { "id" "mqd9lgtf650uk5wcw3gfk", "code" "{\n \\"result\\" true,\n \\"data\\" \[\n {\n \\"installments\\" {\n \\"enabled\\" true,\n \\"list\\" \[]\n },\n \\"view\\" {\n \\"group\\" \\"card\\",\n \\"subgroup title\\" \\"tarjeta de crédito/débito\\",\n \\"subgroup logo\\" \\"https //res mobbex com/images/icons/card png\\",\n \\"type\\" \\"card\\",\n \\"subgroup priority\\" 99\n },\n \\"source\\" {\n \\"reference\\" \\"visa naranja\\",\n \\"name\\" \\"visa tarjeta naranja\\"\n }\n },\n {\n \\"installments\\" {\n \\"enabled\\" false\n },\n \\"view\\" {\n \\"group\\" \\"cash\\",\n \\"subgroup title\\" \\"efectivo\\",\n \\"subgroup logo\\" \\"https //res mobbex com/images/icons/cash png\\",\n \\"type\\" \\"selector\\",\n \\"subgroup priority\\" 99\n },\n \\"source\\" {\n \\"reference\\" \\"arg pagofacil\\",\n \\"name\\" \\"pagofacil\\"\n }\n },\n {\n \\"installments\\" {\n \\"enabled\\" true,\n \\"list\\" \[\n {\n \\"name\\" \\"1 cuota\\",\n \\"description\\" \\"\\",\n \\"count\\" 1,\n \\"reference\\" \\"1\\",\n \\"uid\\" \\"65am yyqo\\",\n \\"totals\\" {\n \\"currency\\" {\n \\"value\\" \\"ars\\",\n \\"label\\" \\"peso argentino\\",\n \\"symbol\\" \\"$\\",\n \\"hidden\\" false\n },\n \\"installment\\" {\n \\"amount\\" 100,\n \\"count\\" 1\n },\n \\"total\\" 100,\n \\"financial\\" {\n \\"percentage\\" 0,\n \\"amount\\" 0\n }\n }\n },\n {\n \\"name\\" \\"ahora 3\\",\n \\"description\\" \\"\\",\n \\"count\\" 3,\n \\"reference\\" \\"ahora 3\\",\n \\"uid\\" \\"firs7rm z\\",\n \\"totals\\" {\n \\"currency\\" {\n \\"value\\" \\"ars\\",\n \\"label\\" \\"peso argentino\\",\n \\"symbol\\" \\"$\\",\n \\"hidden\\" false\n },\n \\"installment\\" {\n \\"amount\\" 33 33,\n \\"count\\" 3\n },\n \\"total\\" 100,\n \\"financial\\" {\n \\"percentage\\" 0,\n \\"amount\\" 0\n }\n }\n }\n },\n \\"view\\" {\n \\"group\\" \\"card\\",\n \\"subgroup title\\" \\"tarjeta de crédito/débito\\",\n \\"subgroup logo\\" \\"https //res mobbex com/images/icons/card png\\",\n \\"type\\" \\"card\\",\n \\"subgroup priority\\" 99\n },\n \\"source\\" {\n \\"reference\\" \\"visa\\",\n \\"name\\" \\"visa\\"\n }\n }\n ]\n}", "language" "200" } ], "selectedlanguageid" "mqd9lgtf650uk5wcw3gfk" }, "examples" { "languages" \[ { "id" "oytj3z3lxv4c3dznu6hjk", "code" "var xhr = new xmlhttprequest();\nxhr withcredentials = true;\n\nxhr addeventlistener(\\"readystatechange\\", function() {\n if(this readystate === 4) {\n console log(this responsetext);\n }\n});\n\nxhr open(\\"get\\", \\"https //api mobbex com/p/sources?total=100\\");\nxhr setrequestheader(\\"x api key\\", \\"zj8lftbx6ba8d611e9io13fdzawj0qmko1hn1yij\\");\nxhr setrequestheader(\\"x access token\\", \\"d31f0721 2f85 44e7 bcc6 15e19d1a53cc\\");\n\nxhr send();", "language" "javascript" }, { "id" "fxb6q lt4ryb6xh3bi7pk", "code" "\<?php\r\n\r\n$curl = curl init();\r\n\r\ncurl setopt array($curl, array(\r\n curlopt url => 'https //api mobbex com/p/sources?total=100',\r\n curlopt returntransfer => true,\r\n curlopt encoding => '',\r\n curlopt maxredirs => 10,\r\n curlopt timeout => 0,\r\n curlopt followlocation => true,\r\n curlopt http version => curl http version 1 1,\r\n curlopt customrequest => 'get',\r\n curlopt httpheader => array(\r\n 'x api key zj8lftbx6ba8d611e9io13fdzawj0qmko1hn1yij',\r\n 'x access token d31f0721 2f85 44e7 bcc6 15e19d1a53cc'\r\n ),\r\n));\r\n\r\n$response = curl exec($curl);\r\n\r\ncurl close($curl);\r\necho $response;\r\n", "language" "php" } ], "selectedlanguageid" "oytj3z3lxv4c3dznu6hjk" }, "description" "", "currentnewparameter" { "label" "query parameter", "value" "queryparameters" } } formato de respuesta en cada solicitud result resultado de la operación data array de datos de la operación data source posee los datos del medio de pago nombre y referencia view posee el tipo de medio de pago installments nodo opcional y sólo disponible en métodos de pago que poseen cuotas array de cuotas si el método posee cuotas encontrará un nodo "list" installments > list count cantidad real de cuotas, es el divisor del monto total name nombre del sistema de cuotas description descripción opcional del sistema de cuotas totals nodo donde se indican los recargos, descuentos y cuotas { "totals" { "currency" { "value" "ars", "label" "peso argentino", "symbol" "$", "hidden" false }, "installment" { "amount" 12500, "count" 1 }, "total" 12500, "financial" { "percentage" 0, "amount" 0 } } } { "tab" "request", "url" "https //api mobbex com/p/sources/rules/{rule}/installments", "name" "obtener planes con reglas avanzadas", "method" "get", "request" { "pathparameters" \[], "queryparameters" \[ { "kind" "required", "name" "rule", "type" "string", "description" "tipo de regla que se desea obtener valores posibles \\"externalmatch\\"" } ], "headerparameters" \[ { "kind" "required", "name" "x api key", "type" "string", "description" "clave api de su aplicación " }, { "kind" "required", "name" "x access token", "type" "string", "description" "token de acceso a la entidad para la cual desea realizar la operación " } ], "bodydataparameters" \[], "formdataparameters" \[] }, "results" { "languages" \[ { "id" "xrkfzu5pv tmsyrr3j ji", "code" "{\n \\"result\\" true,\n \\"data\\" \[\n {\n \\"sourcereference\\" \\"visa\\",\n \\"installments\\" \[\n {\n \\"name\\" \\"12 cuotas\\",\n \\"description\\" \\"+10% de descuento \\",\n \\"uid\\" \\"kcbnpzb7b\\"\n }\n ],\n \\"uid\\" \\"6cpxgdiok\\",\n \\"source\\" {\n \\"reference\\" \\"visa\\",\n \\"name\\" \\"visa\\",\n \\"shortname\\" \\"visa\\"\n }\n }\n ]\n}", "language" "200" } ], "selectedlanguageid" "xrkfzu5pv tmsyrr3j ji" }, "examples" { "languages" \[ { "id" "y9upysq8smpbp ijbuoad", "code" "var xhr = new xmlhttprequest();\nxhr withcredentials = true;\n\nxhr addeventlistener(\\"readystatechange\\", function() {\n if(this readystate === 4) {\n console log(this responsetext);\n }\n});\n\nxhr open(\\"get\\", \\"https //api mobbex com/p/sources/rules/externalmatch/installments\\");\nxhr setrequestheader(\\"x api key\\", \\"zj8lftbx6ba8d611e9io13fdzawj0qmko1hn1yij\\");\nxhr setrequestheader(\\"x access token\\", \\"d31f0721 2f85 44e7 bcc6 15e19d1a53cc\\");\n\nxhr send();", "language" "javascript" }, { "id" "ms9qyzdop 3lx4vdqekzb", "code" "", "language" "php" } ], "selectedlanguageid" "y9upysq8smpbp ijbuoad" }, "description" "", "currentnewparameter" { "label" "header parameter", "value" "headerparameters" } } imágenes de métodos de pago los métodos de pago posee un nodo llamado "reference" que identifica los métodos de pago en mobbex para obtener las imágenes se debe utilizar este nodo { "tab" "request", "url" "https //res mobbex com/images/sources/{reference} {format}", "name" "obtener imágen del medio de pago", "method" "get", "request" { "pathparameters" \[], "queryparameters" \[ { "kind" "required", "name" "reference", "type" "string", "description" "referencia del método de pago obtenida desde la api del listado " }, { "kind" "required", "name" "format", "type" "string", "description" "el formato de la imagen sólo admite png o jpg" } ], "headerparameters" \[], "bodydataparameters" \[], "formdataparameters" \[] }, "results" { "languages" \[ { "id" " ejo3zlxw0qxecsu0n9lb", "code" "", "language" "200" } ], "selectedlanguageid" " ejo3zlxw0qxecsu0n9lb" }, "examples" { "languages" \[ { "id" "zyudwinh3ldv9lhzs9s9j", "code" "curl location request get 'https //res mobbex com/images/sources/visa frances png'", "language" "curl" } ], "selectedlanguageid" "zyudwinh3ldv9lhzs9s9j" }, "description" "", "currentnewparameter" { "label" "query parameter", "value" "queryparameters" } } implementación en un sitio via javascript ejemplo https //github com/mobbexco/ejemplos/tree/main/sources https //github com/mobbexco/ejemplos/tree/main/sources uso para poder utilizar hay que simplemente insertar en el html al final del body insertar el archivo sources js o su contenido ejemplo obtener y mostrar las tarjetas utilizando la función mobbexsources en el caso de utilizar el código de acceso generado por la consola de mobbex, se pasan como argumentos el código y el total en caso de utilizar el cuit, se pasan como argumentos el código del país (country), el código tributario (tax id) y el total personalización para que los logos sean circulares, simplemente se le agrega al div la clase mbbx rounded para personalizar los logos y sus tamaños, se modifica el estilo de la clase mbbx source con css ejemplo en index html se encuentra un ejemplo con logos redondeados y un tamaño definido de 500px