{"_id":"@conectores_cielo/cielo-applepay-headless-vtex","_rev":"3-e08c930fe51c27ce57a8d4f24bb79857","name":"@conectores_cielo/cielo-applepay-headless-vtex","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@conectores_cielo/cielo-applepay-headless-vtex","version":"1.0.0","keywords":["apple-pay","cielo","vtex","react","payments","headless-commerce"],"license":"MIT","_id":"@conectores_cielo/cielo-applepay-headless-vtex@1.0.0","maintainers":[{"name":"conectoresecommerce_cielo","email":"ConectoresEcommerce@cielo.com.br"}],"dist":{"shasum":"c2dbfb8c4e0a059e0a77dc3c541e9dcd32bca115","tarball":"https://registry.npmjs.org/@conectores_cielo/cielo-applepay-headless-vtex/-/cielo-applepay-headless-vtex-1.0.0.tgz","fileCount":37,"integrity":"sha512-ip4kln1lJYtQyLsI1NmtyFTZnfPS5gZeTHCRk1yZEoNQFLEeSIQmZtw3Ztf6UKmKxS728UW+dQ38GqaGEi1bTg==","signatures":[{"sig":"MEYCIQCLg28uaGT9mKTF8RXRIZpu4G7aYwwfM1MD06896lM9FwIhAP6/Thpjiy9bBJkGW/spa9sCcHvNmONdLZcOVtMyOqWR","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":305379},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./core":{"import":{"types":"./dist/core/index.d.ts","default":"./dist/core/index.js"},"require":{"types":"./dist/core/index.d.cts","default":"./dist/core/index.cjs"}},"./react":{"import":{"types":"./dist/react/index.d.ts","default":"./dist/react/index.js"},"require":{"types":"./dist/react/index.d.cts","default":"./dist/react/index.cjs"}},"./adapter":{"import":{"types":"./dist/adapter/index.d.ts","default":"./dist/adapter/index.js"},"require":{"types":"./dist/adapter/index.d.cts","default":"./dist/adapter/index.cjs"}}},"gitHead":"ee22b922caa45ce5292371f859cabf7d3c28dfe1","private":false,"scripts":{"build":"tsup src/index.ts src/core/index.ts src/adapter/index.ts src/react/index.ts --format esm,cjs --dts --sourcemap --clean --external react","prepack":"npm run build"},"_npmUser":{"name":"conectoresecommerce_cielo","email":"ConectoresEcommerce@cielo.com.br"},"_npmVersion":"10.8.2","description":"Apple Pay headless orchestration SDK for VTEX + Cielo eWallet checkouts","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.2.0","@types/react":"^19.2.14"},"peerDependencies":{"react":">=18.2.0 <20"},"_npmOperationalInternal":{"tmp":"tmp/cielo-applepay-headless-vtex_1.0.0_1784904172126_0.8996203139103198","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@conectores_cielo/cielo-applepay-headless-vtex","version":"1.0.1","keywords":["apple-pay","cielo","vtex","react","payments","headless-commerce"],"license":"MIT","_id":"@conectores_cielo/cielo-applepay-headless-vtex@1.0.1","maintainers":[{"name":"conectoresecommerce_cielo","email":"ConectoresEcommerce@cielo.com.br"}],"dist":{"shasum":"4ae7a90db3c6e335f151e6b9ca11a214cad515de","tarball":"https://registry.npmjs.org/@conectores_cielo/cielo-applepay-headless-vtex/-/cielo-applepay-headless-vtex-1.0.1.tgz","fileCount":37,"integrity":"sha512-uMBwczZsmug1o+HOvezp1vAKJWB9O513z0qZ813rAMLJs1ypAXfYR1NpxDC3V39Ig7irvxyCB2C5HzhB+cuPxQ==","signatures":[{"sig":"MEUCIQD41LAwMDoDVgMjdADv03BR7XRompORdeREvwnolZ5OLQIgBtwUm6MQA9beQlbU2qxPlOvvLkeB6AWYZubs83j5/kA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":317821},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./core":{"import":{"types":"./dist/core/index.d.ts","default":"./dist/core/index.js"},"require":{"types":"./dist/core/index.d.cts","default":"./dist/core/index.cjs"}},"./react":{"import":{"types":"./dist/react/index.d.ts","default":"./dist/react/index.js"},"require":{"types":"./dist/react/index.d.cts","default":"./dist/react/index.cjs"}},"./adapter":{"import":{"types":"./dist/adapter/index.d.ts","default":"./dist/adapter/index.js"},"require":{"types":"./dist/adapter/index.d.cts","default":"./dist/adapter/index.cjs"}}},"gitHead":"95c8fb839052e1f56a6ec7fa1541fd0bd8ff705e","private":false,"scripts":{"build":"tsup src/index.ts src/core/index.ts src/adapter/index.ts src/react/index.ts --format esm,cjs --dts --sourcemap --clean --external react","prepack":"npm run build"},"_npmUser":{"name":"conectoresecommerce_cielo","email":"ConectoresEcommerce@cielo.com.br"},"_npmVersion":"10.9.8","description":"Apple Pay headless orchestration SDK for VTEX + Cielo eWallet checkouts","directories":{},"sideEffects":false,"_nodeVersion":"22.23.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"19.2.7","@types/react":"^19.2.14"},"peerDependencies":{"react":">=18.2.0 <20"},"_npmOperationalInternal":{"tmp":"tmp/cielo-applepay-headless-vtex_1.0.1_1785435160537_0.14454685588581762","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@conectores_cielo/cielo-applepay-headless-vtex","version":"1.0.3","description":"Apple Pay headless orchestration SDK for VTEX + Cielo eWallet checkouts","private":false,"type":"module","license":"MIT","keywords":["apple-pay","cielo","vtex","react","payments","headless-commerce"],"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./core":{"import":{"types":"./dist/core/index.d.ts","default":"./dist/core/index.js"},"require":{"types":"./dist/core/index.d.cts","default":"./dist/core/index.cjs"}},"./adapter":{"import":{"types":"./dist/adapter/index.d.ts","default":"./dist/adapter/index.js"},"require":{"types":"./dist/adapter/index.d.cts","default":"./dist/adapter/index.cjs"}},"./react":{"import":{"types":"./dist/react/index.d.ts","default":"./dist/react/index.js"},"require":{"types":"./dist/react/index.d.cts","default":"./dist/react/index.cjs"}}},"sideEffects":false,"scripts":{"build":"tsup src/index.ts src/core/index.ts src/adapter/index.ts src/react/index.ts --format esm,cjs --dts --sourcemap --clean --external react","prepack":"npm run build"},"peerDependencies":{"react":">=18.2.0 <20"},"devDependencies":{"@types/react":"^19.2.14","react":"19.2.7"},"publishConfig":{"access":"public"},"_id":"@conectores_cielo/cielo-applepay-headless-vtex@1.0.3","gitHead":"3292a3beebc267c6cde94617b2e8d29582988d12","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-+mukoutWbNvLYLmK2lJHc7e64XklNUuA7eJVxsWEiIVhltZ28pTA36GWfmLYfLU+eR+w158Ata9rceWpS3yKpQ==","shasum":"6f2075b2f9a5c390cb1c78429a1c6b3c93ddc0e9","tarball":"https://registry.npmjs.org/@conectores_cielo/cielo-applepay-headless-vtex/-/cielo-applepay-headless-vtex-1.0.3.tgz","fileCount":37,"unpackedSize":319816,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICcZYolV8pkhdYoSmPisUnCsTidz2miQNvyxhh6t7rzxAiEA8AwY1EN7BkficZQlkxBbZdFwryx8P4kWl3qXl7hWmsE="}]},"_npmUser":{"name":"conectoresecommerce_cielo","email":"ConectoresEcommerce@cielo.com.br"},"directories":{},"maintainers":[{"name":"conectoresecommerce_cielo","email":"ConectoresEcommerce@cielo.com.br"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cielo-applepay-headless-vtex_1.0.3_1785520021377_0.8695681159210218"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-24T14:42:51.917Z","modified":"2026-07-31T17:47:01.713Z","1.0.0":"2026-07-24T14:42:52.263Z","1.0.1":"2026-07-30T18:12:40.672Z","1.0.3":"2026-07-31T17:47:01.527Z"},"license":"MIT","keywords":["apple-pay","cielo","vtex","react","payments","headless-commerce"],"description":"Apple Pay headless orchestration SDK for VTEX + Cielo eWallet checkouts","maintainers":[{"name":"conectoresecommerce_cielo","email":"ConectoresEcommerce@cielo.com.br"}],"readme":"# @conectores_cielo/cielo-applepay-headless-vtex\n\nSDK de Apple Pay para checkout VTEX com integracao Cielo eWallet.\n\nO pacote publica, em um unico artefato NPM, os modulos:\n- core\n- adapter\n- react\n\n## Objetivo\n\nEste SDK acelera a implementacao de Apple Pay em storefronts VTEX headless, centralizando:\n- criacao e ciclo da ApplePaySession no navegador\n- abertura, confirmacao e cancelamento no connector Cielo\n- componentes e hooks React para UX de checkout\n\n## Pre-requisitos\n\nAntes da integracao, confirme:\n- Node.js 18+\n- npm 7+ ou Yarn 1.x\n- React 18.2+ (compativel com React 19)\n- Aplicacao servida em HTTPS\n- Dominio validado no Apple Developer (arquivo apple-developer-merchantid-domain-association publicado na raiz)\n- Connector braspag.cielo-ewallet-payment-app habilitado na conta VTEX\n\n## Passo 1 - Instalacao\n\nCom npm:\n\n```bash\nnpm install @conectores_cielo/cielo-applepay-headless-vtex\n```\n\nCom Yarn:\n\n```bash\nyarn add @conectores_cielo/cielo-applepay-headless-vtex\n```\n\n## Passo 2 - Inicializacao do SDK (executar uma unica vez)\n\nChame `Init` uma vez no bootstrap da aplicacao, fora de componentes React.\n\nLocais recomendados:\n- Next.js App Router: arquivo de entrada client do checkout\n- Next.js Pages Router: `_app.tsx`\n- React SPA: `main.tsx`\n\n### Exemplo minimo (producao)\n\n```ts\nimport { Init } from '@conectores_cielo/cielo-applepay-headless-vtex/adapter'\n\nInit({\n\tstrictDeviceValidation: true,\n})\n```\n\n### Exemplo usado em ambiente de desenvolvimento/homologacao\n\nEste formato segue o uso pratico comum em pagina de checkout client-side:\n\n```ts\nimport { Init } from '@conectores_cielo/cielo-applepay-headless-vtex/adapter'\n\nInit({\n\tstrictDeviceValidation: false,\n})\n```\n\nUse `strictDeviceValidation: false` apenas para facilitar testes em dispositivos sem Apple Pay ativo.\n\n### Exemplo com configuracao completa de request Apple Pay\n\n```ts\nimport { Init } from '@conectores_cielo/cielo-applepay-headless-vtex/adapter'\n\nInit({\n\tstrictDeviceValidation: true,\n\tClientRequestConfig: {\n\t\tcountryCode: 'BR',\n\t\tcurrencyCode: 'BRL',\n\t\tmerchantCapabilities: ['supports3DS', 'supportsCredit'],\n\t\tsupportedNetworks: ['masterCard', 'visa'],\n\t\trequiredBillingContactFields: ['postalAddress'],\n\t\trequiredShippingContactFields: ['name', 'email', 'phone'],\n\t\ttotalLabel: 'Nome da Loja',\n\t\ttotalType: 'final',\n\t},\n})\n```\n\n### Exemplo avancado com funcoes customizadas (clientOpenSession e clientCancel)\n\nUse este padrao quando precisar controlar chamadas HTTP por conta propria (ex.: observabilidade adicional, proxy interno ou camada de seguranca customizada).\n\nObservacao: `clientOpenSession` e `clientCancel` sao opcionais. Na maioria dos projetos, a implementacao padrao do adapter ja e suficiente e reduz complexidade operacional.\n\n```ts\nimport {\n\tInit,\n\ttype AppPayload,\n\ttype ApplePaySessionResponse,\n\ttype ApplePayCancelRequest,\n} from '@conectores_cielo/cielo-applepay-headless-vtex/adapter'\n\nInit({\n\tstrictDeviceValidation: true,\n\tclientOpenSession: async (payload: AppPayload): Promise<ApplePaySessionResponse> => {\n\t\t// Exemplo ilustrativo: substitua pela chamada real da sua API/proxy.\n\t\tconst response = await fetch('/api/applepay/open-session', {\n\t\t\tmethod: 'POST',\n\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t\tbody: JSON.stringify(payload),\n\t\t})\n\n\t\tif (!response.ok) {\n\t\t\tthrow new Error(`Falha ao abrir sessao Apple Pay: HTTP ${response.status}`)\n\t\t}\n\n\t\treturn (await response.json()) as ApplePaySessionResponse\n\t},\n\tclientCancel: async (\n\t\tpayload: AppPayload,\n\t\tcancelRequest: ApplePayCancelRequest\n\t): Promise<void> => {\n\t\t// Exemplo ilustrativo: substitua pela chamada real da sua API/proxy.\n\t\tconst response = await fetch('/api/applepay/cancel', {\n\t\t\tmethod: 'POST',\n\t\t\theaders: { 'Content-Type': 'application/json' },\n\t\t\tbody: JSON.stringify({ payload, cancelRequest }),\n\t\t})\n\n\t\tif (!response.ok) {\n\t\t\tthrow new Error(`Falha ao cancelar transacao Apple Pay: HTTP ${response.status}`)\n\t\t}\n\t},\n})\n```\n\n### Opcoes do Init\n\n| Campo | Tipo | Obrigatorio | Descricao |\n|---|---|---|---|\n| strictDeviceValidation | boolean | nao | Quando `true`, valida disponibilidade de Apple Pay no dispositivo antes de iniciar o fluxo. Default: `true`. |\n| ClientRequestConfig | Partial ApplePayRequestConfig | nao | Sobrescreve campos da request base enviada para criacao da ApplePaySession. |\n| clientOpenSession | funcao | nao | Permite sobrescrever a chamada padrao de abertura de sessao no connector. |\n| clientCancel | funcao | nao | Permite sobrescrever a chamada padrao de cancelamento no connector. |\n\n## Passo 3 - Iniciar o fluxo no checkout\n\nNo checkout real, o fluxo recomendado e:\n- validar carrinho, endereco e meio de pagamento antes de abrir o Apple Pay\n- salvar profile, shipping e payment no VTEX\n- recalcular total apos o shipping para obter o valor final correto\n- finalizar pedido e registrar a transacao no VTEX Payments\n- iniciar o flow do SDK com callbacks de sucesso/erro\n\nExemplo pratico:\n\n```tsx\nimport { startVtexApplePayFlow } from '@conectores_cielo/cielo-applepay-headless-vtex/adapter'\n\nasync function handleApplePayOrder() {\n\tif (items.length === 0) {\n\t\tsetCheckoutError('Seu carrinho esta vazio.')\n\t\treturn\n\t}\n\n\tif (!isApplePaySelected) {\n\t\tsetCheckoutError('Selecione Apple Pay para continuar com este fluxo.')\n\t\treturn\n\t}\n\n\tconst selectedPaymentSystemNumber = Number(selectedPaymentSystem)\n\tif (!Number.isFinite(selectedPaymentSystemNumber) || selectedPaymentSystemNumber <= 0) {\n\t\tsetCheckoutError('Meio de pagamento Apple Pay invalido.')\n\t\treturn\n\t}\n\n\tsetCheckoutError(null)\n\n\tvoid startVtexApplePayFlow({\n\t\tprepareOrder: async () => {\n\t\t\tconst normalizedShipping = getNormalizedShipping()\n\t\t\tconst normalizedDocument = profile.document.replace(/\\D/g, '')\n\t\t\tconst initialPaymentValue = orderValueCents ?? Math.round(orderTotal * 100)\n\n\t\t\tconst buildPayment = (value: number) => ({\n\t\t\t\t...payment.payments[0],\n\t\t\t\tpaymentSystem: selectedPaymentSystem,\n\t\t\t\tvalue,\n\t\t\t\treferenceValue: value,\n\t\t\t\tinstallments: 1,\n\t\t\t})\n\n\t\t\tawait saveCheckoutData(\n\t\t\t\t{\n\t\t\t\t\t...profile,\n\t\t\t\t\tfirstName: profile.firstName.trim(),\n\t\t\t\t\tlastName: profile.lastName.trim(),\n\t\t\t\t\tdocument: normalizedDocument,\n\t\t\t\t\tdocumentType: 'cpf',\n\t\t\t\t\tisCorporate: false,\n\t\t\t\t\tphone: profile.phone.replace(/\\D/g, ''),\n\t\t\t\t},\n\t\t\t\t{ selectedAddresses: [normalizedShipping] },\n\t\t\t\t{ ...payment, payments: [buildPayment(initialPaymentValue)] } as Record<string, unknown>\n\t\t\t)\n\n\t\t\tconst freshContext = await loadCheckoutContext()\n\t\t\tconst freshTotal = freshContext.orderData?.value ?? initialPaymentValue\n\t\t\tsetOrderValueCents(freshTotal)\n\n\t\t\tconst currentOrderFormId = useCartStore.getState().orderFormId ?? ''\n\t\t\tif (freshTotal !== initialPaymentValue && currentOrderFormId) {\n\t\t\t\tawait savePaymentAttachment({\n\t\t\t\t\torderFormId: currentOrderFormId,\n\t\t\t\t\tdata: { ...payment, payments: [buildPayment(freshTotal)] } as Record<string, unknown>,\n\t\t\t\t})\n\t\t\t}\n\n\t\t\tconst placed = await finishOrder()\n\t\t\tif (!placed) throw new Error('Nao foi possivel finalizar o pedido.')\n\n\t\t\tconst orderReference = placed.orderGroup ?? placed.orderId\n\t\t\tif (!orderReference) throw new Error('Nao foi possivel obter o orderGroup do pedido.')\n\n\t\t\tif (placed.paymentsUrl && placed.transactionId) {\n\t\t\t\tconst applePayPaymentPayload = [\n\t\t\t\t\t{\n\t\t\t\t\t\tpaymentSystem: selectedPaymentSystemNumber,\n\t\t\t\t\t\tinstallments: 1,\n\t\t\t\t\t\tcurrencyCode: 'BRL',\n\t\t\t\t\t\tvalue: freshTotal,\n\t\t\t\t\t\tinstallmentsInterestRate: 0,\n\t\t\t\t\t\tinstallmentsValue: freshTotal,\n\t\t\t\t\t\treferenceValue: freshTotal,\n\t\t\t\t\t\tfields: {},\n\t\t\t\t\t\ttransaction: {\n\t\t\t\t\t\t\tid: placed.transactionId,\n\t\t\t\t\t\t\tmerchantName: placed.merchantName ?? '',\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t]\n\n\t\t\t\tconst paymentsResponse = await fetch(placed.paymentsUrl, {\n\t\t\t\t\tmethod: 'POST',\n\t\t\t\t\tcredentials: 'include',\n\t\t\t\t\theaders: {\n\t\t\t\t\t\tAccept: 'application/json',\n\t\t\t\t\t\t'Content-Type': 'application/json',\n\t\t\t\t\t},\n\t\t\t\t\tbody: JSON.stringify(applePayPaymentPayload),\n\t\t\t\t})\n\n\t\t\t\tif (!paymentsResponse.ok) {\n\t\t\t\t\tconst errText = await paymentsResponse.text()\n\t\t\t\t\tthrow new Error(`Falha ao registrar pagamento Apple Pay no gateway VTEX (${paymentsResponse.status}): ${errText}`)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\torderReference,\n\t\t\t\torderId: placed.orderId,\n\t\t\t}\n\t\t},\n\t\tprocessPlacedOrder,\n\t\tcancelOrder,\n\t\tinitialAmount: ((orderValueCents ?? Math.round(orderTotal * 100)) / 100).toFixed(2),\n\t\tonSuccess: (orderReference) => {\n\t\t\tsetOrderId(orderReference)\n\t\t\tsetStep('success')\n\t\t},\n\t\tonError: (message) => {\n\t\t\tsetCheckoutError(message)\n\t\t},\n\t})\n}\n```\n\nNeste padrao, o app consumidor continua responsavel pelas chamadas VTEX (checkout e payments), enquanto o SDK orquestra a sessao Apple Pay e a comunicacao com o connector.\n\n## Boas praticas de implementacao\n\n- Execute `Init` apenas uma vez por ciclo de vida da pagina.\n- Garanta que `initialAmount` represente o total final do pedido (produtos + frete).\n- Em Next.js, mantenha o fluxo de Apple Pay em componente client (`'use client'`).\n- Trate `onError` com mensagem clara para o comprador e fallback de meio de pagamento.\n\n## Comportamento esperado\n\n- O botao Apple Pay aparece somente em Safari com dispositivo compativel e carteira configurada.\n- Em HTTP, o fluxo nao inicia (Apple Pay exige HTTPS).\n- Se `strictDeviceValidation` estiver ativo e o device nao suportar Apple Pay, o fluxo e interrompido com erro controlado.\n\n## Modulos exportados\n\n| Modulo | Uso |\n|---|---|\n| @conectores_cielo/cielo-applepay-headless-vtex/core | Tipos e utilitarios agnosticos de framework |\n| @conectores_cielo/cielo-applepay-headless-vtex/adapter | Orquestracao do fluxo Apple Pay para VTEX + Cielo |\n| @conectores_cielo/cielo-applepay-headless-vtex/react | Hooks e componentes React (ApplePayButton, ApplePayModal, useApplePay, useApplePaySdk) |\n\n## Versao recomendada para clientes\n\n```bash\nnpm install @conectores_cielo/cielo-applepay-headless-vtex@^0.x\n```\n\n## Licenca\n\nMIT\n","readmeFilename":"README.md"}