Integración Embebida
17min
el sdk para embeber le permite embeber de manera fácil y rápida nuestra solución de checkout y suscripciones en cualquier sitio web el flujo de procesamiento de la operación en esta modalidad, en el caso de checkout, es el siguiente creación la inserción del embebido comienza al crear el checkout o la suscripción vía api en este punto, es necesario añadir dentro del nodo options los atributos domain , embed y embedversion este último es opcional, si no se pasa por defecto siempre tomará la última versión "options" { "embed" true, "domain" "eldominiodelsitio com ar", "embedversion" "1 2 0" } implementación del sdk versión la versión actual del sdk es 1 2 0 insertar en el sitio de manera fija en la cabecera insertar en el sitio dinámicamente en el body cargá nuestra librería javascript en tu sitio creación y eventos el modal de pagos (tanto para checkout como suscripciones) puede ser abierto utilizando el botón de mobbex o a través del propio código en ambas situaciones, es necesario definir algunas propiedades y renderizar los objetos correspondientes documento html dentro del body del html donde se vaya a insertar el modal, es necesario definir un div con la propiedad id en función del tipo de apertura que se vaya a utilizar javascript es necesario definir una variable que contiene todos los manejadores de eventos para el modal su estructura varía en función de si es utilizada para checkout o para suscripciones ejemplo checkout var embed = window\ mobbexembed init({ onresult (data) => { // onresult es llamado cuando se toca el botón cerrar window\ mobbexembed close(); }, onpayment (data) => { }, onopen () => { }, onclose (cancelled) => { location reload(); }, onerror (error) => { console error('error ', error); }, }); embed open({ type 'checkout', id 'xxxxxxxxx'}); ejemplo suscripciones var embed = window\ mobbexembed init({ onresult (data) => { // onresult es llamado cuando se toca el botón cerrar window\ mobbexembed close(); }, onpayment (data) => { }, onopen () => { }, onclose (cancelled) => { location reload(); }, onerror (error) => { console error('error ', error); }, }); embed open({ type 'subscriber source', id 'subscription id', sid 'subscriber id', sourcepriority 'primary'}); ejemplo checkout con medios de pago var embed = window\ mobbexembed init({ onresult (data) => { // onresult es llamado cuando se toca el botón cerrar window\ mobbexembed close(); }, onpayment (data) => { }, onopen () => { }, onclose (cancelled) => { location reload(); }, onerror (error) => { console error('error ', error); }, }); embed open({ type 'checkout', id 'xxxxxxxxx', paymentmethod 'arg qr' }); resultado de la operación el resultado de la operación de ejemplo será obtenido dentro del método onpayment del botón { "id" "ks6d18und", "status" { "code" "2", "text" "en espera", "message" "el cupón vence a los 5 días de emitido " } } opciones las siguientes opciones pueden ser provistas al botón mobbex en la renderización o inicialización inicializadores type sólo acepta 2 opciones \ checkout \ subscriber source establecimiento del medio de pago para suscriptores id id de checkout generado en el servidor o id de suscripción sid id de suscriptor (aplica a suscripciones) paymentmethod permite filtrar el tipo de medio de pago (aplica a checkout) callbacks onpayment (data) => { } onerror (error) => { } onopen () => { } onclose (cancelled) => { } el método onclose será llamado al cerrar el modal de pagos la variable cancelled será true o false dependiendo de que el modal haya sido cerrado antes de realizar la operación o después, respectivamente el método onpayment será llamado al procesarse una operación, independientemente del método onclose , y contendrá dentro de la variable data toda la información relacionada al estado de dicha operación separación de métodos de pago nuestra integración permite separar los métodos de pago en el checkout al crear el mismo se debe enviar la variable ``` paymentmethods true``` lo que permitirá obtener un nuevo nodo con todos los métodos de pago separados ej { 	"paymentmethods" \[ 	 { 	 "group" "card", 	 "subgroup" "card input", 	 "subgroup title" "tarjeta de crédito/débito", 	 "subgroup logo" "https //res sugaway io/g9roenhebgamem8izubpjyuevdy=//images/sources/original/card png", 	 "type" "card" 	 }, 	 { 	 "group" "bnpl", 	 "subgroup" "wibond", 	 "subgroup title" "wibond", 	 "subgroup logo" "https //res sugaway io/zefs9o4zjcpm9w cxk9kunkveya=//images/sources/original/wibond png", 	 "type" "bnpl" 	 }, 	 { 	 "group" "qr", 	 "subgroup" "arg interoperable", 	 "subgroup title" "pagá con qr", 	 "subgroup logo" "https //res sugaway io/oovrm 3t8mc3wlv4976z va5qp4=//images/sources/original/arg qr png", 	 "type" "prismaqr" 	 }, 	 { 	 "group" "argdebin", 	 "subgroup" "arg debin", 	 "subgroup title" "pagá con débito inmediato (debin)", 	 "subgroup logo" "https //res sugaway io/55petbtvftztexkw tmfse voo8=//images/sources/original/argdebin png", 	 "type" "argdebin" 	 }, 	 { 	 "group" "crypto", 	 "subgroup" "binancepay", 	 "subgroup title" "binance pay", 	 "subgroup logo" "https //res sugaway io/ygbgyneyi gvpp6j2iknvddrrzo=//images/sources/original/binancepay png", 	 "type" "prismaqr" 	 }, 	 { 	 "group" "p2p", 	 "subgroup" "pix", 	 "subgroup title" "pix", 	 "subgroup logo" "https //res sugaway io/swxv11sorwhlgb8xjzsywfs xm0=//images/sources/original/pix png", 	 "type" "prismaqr" 	 }, 	 { 	 "group" "khipu", 	 "subgroup" "khipu", 	 "subgroup title" "pagá desde tu banco", 	 "subgroup logo" "https //res sugaway io/vp xdjq3mbwo5a psf5yzvydrrm=//images/sources/original/khipu png", 	 "type" "khipu" 	 }, 	 { 	 "group" "bnpl", 	 "subgroup" "gocuotas", 	 "subgroup title" "gocuotas (cuotas con tarjeta de débito)", 	 "subgroup logo" "https //res sugaway io/ex2ugrhaxd6emyd0klr0aeyljwk=//images/sources/original/gocuotas png", 	 "type" "bnpl" 	 } 	] } esto le permitirá mostrar las diferentes opciones en botones separados en su e commerce y también poder lanzar la integración embebida directamente en un medio de pago por ejemplo, quiero colocar un botón de "pagá con qr" separado y que el usuario al clickear abra directamente el pago con qr en vez de llegar a la pantalla de todos los medios de pago, para esto al crear el "embebido" en las opciones voy a utilizar el "grupo (group)" y el "subgrupo (subgroup)" de esta manera "qr\ arg interoperable" (conjugando ambos separándolos por dos puntos al medio) esto hará que al abrir el embebido vaya directamente a la opción de pagar con qr creación de servicio para embeber sólo se deben crear checkouts del lado servidor y compartir únicamente el id o uid generado por mobbex checkout ejemplo esto es un ejemplo de la utilización de las opciones especiales en php la creación del checkout siempre debe realizarse desde el lado servidor, ya que sino quedarían expuestas las credenciales de su cuenta para más ejemplos ver la documentación de checkout https //mobbex dev/checkout \<?php $request = new httprequest(); $request >seturl('https //api mobbex com/p/checkout'); $request >setmethod(http meth post); $request >setheaders(array( 'cache control' => 'no cache', 'content type' => 'application/json', 'x lang' => 'es', 'x access token' => 'd31f0721 2f85 44e7 bcc6 15e19d1a53cc', 'x api key' => 'zj8lftbx6ba8d611e9io13fdzawj0qmko1hn1yij' )); $request >setbody('{ "total" 100 2, "currency" "ars", "reference" "2982 2xtpxlgsawccquyobuv4semlymv0n6ox6moridmw", "description" "descripción de la venta", "items" \[{ "image" "https //www mobbex com/wp content/uploads/2019/03/web logo png", "quantity" 2, "description" "mi producto", "total" 50 }, { "image" "https //www mobbex com/wp content/uploads/2019/03/web logo png", "quantity" 1, "description" "mi otro producto", "total" 50 2 }], "options" { "domain" "midominio com", "embed" true, "embedversion" "1 2 0" }, "return url" "https //mobbex com/sale/return?session=56789", "webhook" "https //mobbex com/sale/webhook?user=1234" }'); try { $response = $request >send(); echo $response >getbody(); } catch (httpexception $ex) { echo $ex; } ?> suscripción ejemplo este ejemplo muestra cómo crear una suscripción para que la misma pueda ser utilizada con el sdk para embeber notar que se utilizan las mismas propiedades dentro del nodo "options" que en el caso de checkout para más información ver la documentación de suscripciones \<?php $request = new httprequest(); $request >seturl('https //api mobbex com/p/subscriptions'); $request >setmethod(http meth post); $request >setheaders(array( 'cache control' => 'no cache', 'content type' => 'application/json', 'x lang' => 'es', 'x access token' => 'd31f0721 2f85 44e7 bcc6 15e19d1a53cc', 'x api key' => 'zj8lftbx6ba8d611e9io13fdzawj0qmko1hn1yij' )); $request >setbody('{ "total" 100, "currency" "ars", "setupfee" 0, "type" "dynamic", "name" "suscripción demo", "reference" "2982 2xtpxlgsawccquyobuv4semlymv0n6ox6moridmw", "description" "descripción de la suscripción", "options" { "domain" "midominio com", "embed" true, "embedversion" "1 2 0" }, "return url" "https //mobbex com/subscription/return?session=56789", "webhook" "https //mobbex com/subscription/webhook?user=1234" }'); try { $response = $request >send(); echo $response >getbody(); } catch (httpexception $ex) { echo $ex; } ?>
