# Guía de implementación de la aplicación Stripe para Salesforce B2C Commerce ## Configurar Business Manager La aplicación de Stripe para Salesforce B2C Commerce (cartucho LINK) necesita varios cartuchos para tener la funcionalidad completa. Además, el controlador y el soporte de SFRA se dividen en dos cartuchos separados, lo que facilita la instalación y el uso de uno u otro modelo. Importa los tres cartuchos al estudio de UX y asócialos con una conexión de servidor. ### Asignación del cartucho del sitio 1. Ve a **Administración > Sitios > Gestionar sitios**. 1. Haz clic en el nombre del sitio web de la tienda al que quieres añadir la funcionalidad de Stripe. 1. Selecciona la pestaña **Configuración**. 1. Para la Arquitectura de referencia de la tienda (SFRA), añade `app_stripe_sfra:int_stripe_sfra:int_stripe_core` a la ruta del cartucho. Repite estos pasos para cada sitio de la tienda donde quieras implementar Stripe. ### Asignación de cartuchos de Business Manager 1. Ve a **Administración > Sitios > Gestionar sitios**. 1. Haz clic en el enlace **Sitio web de Business Manager** y, a continuación, en **Administrar el sitio web de Business Manager**. 1. Añade `int_stripe_core` a la ruta del cartucho. ### Importar metadatos 1. Ve a la carpeta metadatos del proyecto y abre la carpeta `stripe_site_template`. 1. Abre la carpeta `sites` y edita la carpeta `siteIDHere` en el ID del sitio web que quieras. 1. Añade una carpeta para cada sitio en el que quieras usar Stripe. 1. Ve a **Administración > Desarrollo de sitios > Importar y exportar sitios**. 1. Comprime la carpeta `stripe_site_template` en un archivo zip e impórtalo. ### Crea el estilo de Stripe Si es necesario, actualiza la ruta a tu instalación básica de SFRA en `package.json` desde la misma carpeta raíz. Normalmente, hay una carpeta de proyecto de nivel superior en la que se clonan los repositorios del cartucho base SFRA y todos los plugins, bibliotecas y otros cartuchos de LINK necesarios. Si también has clonado el cartucho Stripe en esa carpeta, no tienes que actualizar la propiedad `paths.base`. Si no has clonado el cartucho en esa carpeta, actualiza la propiedad `paths.base` en `package.json` con la ruta relativa al directorio local que contiene el repositorio de Arquitectura de referencia de la tienda. El siguiente es el valor predeterminado `paths.base`: ```json "paths": { "base": "../storefront-reference-architecture/cartridges/app_storefront_base/" } ``` Cuando estés seguro de que `package.json` tiene la ruta correcta a los cartuchos SFRA, ejecuta el comando `npm run compile:scss` desde la carpeta raíz del repositorio de Stripe. ### Añadir nuevos procesadores de pago En el cartucho de Stripe se utilizan dos procesadores de pagos. `STRIPE_CREDIT` solo gestiona los pagos con tarjeta de crédito, mientras que`STRIPE_APM` gestiona los métodos de pago a través de [Payment Element](https://docs.stripe.com/payments/payment-element.md) y [Express Checkout Element](https://docs.stripe.com/elements/express-checkout-element.md). #### Procesador de pagos de tarjetas de crédito 1. Ve a **Herramientas para comerciantes > Pedidos > Procesadores de pagos** y haz clic en **Nuevo**. 1. En la nueva ventana, especifica el ID en `STRIPE_CREDIT` y haz clic en **Aplicar**. #### Procesador de pagos de APM 1. Ve a **Herramientas para comerciantes > Pedidos > Procesadores de pagos** y haz clic en **Nuevo**. 1. En la nueva ventana, especifica el atributo del ID en el valor `STRIPE_APM` y haz clic en **Aplicar**. ### Actualizar métodos de pago Ve a **Herramientas para comerciantes > Pedidos > Métodos de pago**, haz clic en el método de pago **CREDIT\_CARD** y selecciona el procesador de pagos **STRIPE\_CREDIT** en el menú desplegable que está bajo la sección de datos **CREDIT\_CARD**. Para los métodos de pago dinámicos o el botón de solicitud de pago, habilita **STRIPE\_APM\_METHODS** para incluir los métodos de pago admitidos por Stripe. Consulta la [guía de métodos de pago](https://stripe.com/guides/payment-methods-guide) para obtener más información. Para utilizar el botón de solicitud de pago de Stripe, habilita el método de pago **STRIPE\_PAYMENT\_REQUEST\_BTN**. Consulta la sección sobre el [botón de solicitud de pago](https://docs.stripe.com/stripe-js/elements/payment-request-button.md) para obtener más detalles. ## Instala la aplicación Stripe Salesforce Commerce Utiliza Stripe Apps para reforzar la seguridad y simplificar el uso de claves restringidas distintas para cada integración con tu cuenta de Stripe. El proceso de instalación de la aplicación de Stripe y la adquisición de las [claves](https://docs.stripe.com/keys.md) secretas y publicables recién generadas es esencial para tu integración con el conector de Salesforce Commerce. Este enfoque elimina la necesidad de crear manualmente tu propia clave restringida o usar una clave secreta. Para integrar la aplicación Salesforce Commerce y reforzar la infraestructura de seguridad de tu cuenta, haz lo siguiente: 1. Ve a la [Stripe App Marketplace](https://marketplace.stripe.com/) y, a continuación, haz clic en [Instala la aplicación Salesforce Commerce](https://marketplace.stripe.com/apps/install/link/com.stripe.SalesforceCommerce). 1. Selecciona la cuenta de Stripe en la que quieres instalar la aplicación. 1. Revisa y aprueba los permisos de la aplicación, instala la aplicación en un entorno de prueba o en modo activo y, a continuación, haz clic en **Instalar**. 1. Después de instalar la aplicación, guarda las claves en un lugar seguro donde no las pierdas. Para ayudarte a recordar dónde las has almacenado, puedes [dejar una nota sobre la clave en el Dashboard](https://docs.stripe.com/keys.md#reveal-an-api-secret-key-live-mode). 1. Usa la clave publicable y la clave secreta recién generadas para finalizar la configuración de la aplicación. 1. Para gestionar la aplicación o generar nuevas claves de seguridad después de la instalación, ve a la página de configuración de la solicitud de acceso en un [entorno de prueba](https://dashboard.stripe.com/test/settings/apps/com.stripe.SalesforceCommerce) o en [modo activo](https://dashboard.stripe.com/settings/apps/com.stripe.SalesforceCommerce). ## Configuración Utiliza los valores específicos del sitio para actualizar **Herramientas para comerciantes > Preferencias del sitio > Preferencias del sitio personalizadas > Configuraciones de Stripe**. - Completa la clave secreta de la API de Stripe con los valores de la aplicación Stripe Salesforce Commerce. - Rellena la clave de API publicable con los valores de la aplicación Stripe Salesforce Commerce. - **¿Se trata de una instalación SFRA?** Especifícalo en `yes` si el sitio actual está usando SFRA. - **Capturar fondos en el cargo de Stripe:** El valor predeterminado es `true` (Sí). Se especifica en `false` (No) para autorizar los cargos de Stripe en su lugar. - **Estilo CSS del elemento de tarjeta de Stripe:** Establece el estilo CSS que el botón de elemento de tarjeta hereda para que quepa dentro de los estilos generales de la tienda (por ejemplo, `{"base": {"fontFamily": "Arial, sans-serif", "fontSize": "14px", "color": "# C1C7CD"}, "invalid": {"color": "red" } }`). - **URL de la API de Stripe:** `https://js.stripe.com/dahlia/stripe.js` - **Estilo del botón de solicitud de pago de Stripe:** para el botón de solicitud de pago, selecciona el estilo CSS limitado. Para obtener más información, consulta la sección sobre [dar estilo al elemento](https://docs.stripe.com/stripe-js/elements/payment-request-button.md#styling-the-element). - **Cadena de verificación de Apple Pay**. Introduce la cadena de verificación de Apple que se proporciona en el Dashboard de Stripe. Se trata de una habilitación única. La consola de Stripe reenvía a Apple Pay una cadena de verificación web en el momento de la configuración. Configúralo en el entorno aislado si utilizas el botón de solicitud de pago como forma de pago en la tienda. - **Código de país (botón de solicitud de pago de Stripe):** Éste es el código de país predeterminado (por ejemplo, EE. UU.) para el botón de solicitud de pago. Es posible que necesites personalizar un sitio único para varios países para pasar dinámicamente el código de país en lugar de usar la preferencia del sitio. Para obtener más información, consulta [crear una instancia de solicitud de pago](https://docs.stripe.com/stripe-js/elements/payment-request-button.md). - **Secreto de firma del webhook de Stripe:** Introduce el secreto de firma del *webhook* (A webhook is a real-time push notification sent to your application as a JSON payload through HTTPS requests) que proporciona el Dashboard de Stripe. Stripe firma los eventos del webhook y pasa una validación en SFCC. SFCC utiliza este secreto para validar el contenido del mensaje. - **Estados de webhook permitidos de Stripe:** Configura los [estados permitidos](https://docs.stripe.com/use-stripe-apps/salesforce-commerce-cloud/implementation-guide.md#stripe-dashboard-set-up) para que los webhooks respondan. ![](https://b.stripecdn.com/docs-statics-srv/assets/configuration-webhook-statuses.01dca58aedb406537570122a457afa09.png) - **Habilitado para Stripe:** Habilita o deshabilita el cartucho. ## Configuración rápida de Stripe Como alternativa, puedes configurar Stripe en Business Manager usando la **Configuración rápida de Stripe** 1. Inicia sesión en tu Business Manager. 1. Busca «Configuración rápida de Stripe» en **Business Manager**, en **Administración**. 1. Selecciona los sitios web para los que quieres configurar Stripe. 1. Introduce tu `Stripe Publishable Key` y `Restricted Access key` recuperadas de la aplicación Stripe Salesforce Commerce. 1. Haz clic en **Configuración rápida**. ## Configura Apple Pay Para Apple Pay: Actualiza `RedirectURL.js`: ```javascript server.extend(page); server.replace('Start', function (req, res, next) { const URLRedirectMgr = require('dw/web/URLRedirectMgr'); // Intercept the incoming path request if (URLRedirectMgr.getRedirectOrigin() === '/.well-known/apple-developer-merchantid-domain-association') { res.render('stripe/util/apple'); return next(); } const redirect = URLRedirectMgr.redirect; const location = redirect ? redirect.location : null; const redirectStatus = redirect ? redirect.getStatus() : null; if (!location) { res.setStatusCode(404); res.render('error/notFound'); } else { if (redirectStatus) { res.setRedirectStatus(redirectStatus); } res.redirect(location); } return next(); }); ``` Establece temporalmente un alias para uno de los sitios del espacio aislado, para que el dominio se pueda verificar en el Dashboard de Stripe. El alias tiene que ser como este: ```json { "__version": "1", "settings": { "http-host": "your.sandbox.domain.demandware.net", "https-host": "your.sandbox.domain.demandware.net", "default": "true", "site-path": "/", }, "your.sandbox.domain.demandware.net": [ { "locale": "en_GB", "if-site-path": "/", } ] } ``` El valor de región debe ser una configuración regional que no esté deshabilitada. 1. En la [página de dominios del método de pago](https://dashboard.stripe.com/settings/payment_method_domains), haz clic en **Añadir un nuevo dominio**. 1. Introduce tu nombre de dominio. 1. Haz clic en **Guardar y continuar**. 1. Descarga el [archivo de asociación de dominios](https://stripe.com/files/apple-pay/apple-developer-merchantid-domain-association). 1. Aloja el archivo en `/.well-known/apple-developer-merchantid-domain-association`. Por ejemplo, si registras `https://example.com`, haz que ese archivo esté disponible en `https://example.com/.well-known/apple-developer-merchantid-domain-association`. 1. Haz clic en **Verificar**. ## Actualizar código de la tienda El código del cartucho LINK incluye el soporte para todas las tarjetas de crédito que Stripe acepta. La lista de tarjetas permitidas en la tienda todavía está limitada a la lista de tarjetas de crédito/débito de Business Manager (Herramientas para comerciantes > Pedidos > Métodos de pago > Tarjetas de crédito/débito). Haz las siguientes actualizaciones al código de la tienda. Los ejemplos que se proporcionan se basan en la versión 4.4 de SFRA. Las siguientes secciones detallan las personalizaciones que se efectuaron en el código de SFRA. Hay muchos puntos de conexión del controlador que son anexos en lugar de reemplazos. Esos no están cubiertos ya que deberían funcionar sin hacer nada. Las actualizaciones de los controladores solo son necesarias para los puntos de conexión reemplazados, ya que es posible que ya hayas reemplazado ese punto de conexión en tu integración. Utiliza los cambios efectuados en el cartucho básico y agrégalos al controlador que ya has reemplazado. No tienes que hacer nada si no has ampliado o reemplazado esos puntos de conexión. ### Controlador: CheckoutServices.js Ruta: `app_stripe_sfra/cartridge/controllers/CheckoutServices.js` Elimina la validación del método de pago del punto de conexión `SubmitPayment`: ```javascript if (!paymentMethodID && currentBasket.totalGrossPrice.value > 0) { const noPaymentMethod = {}; noPaymentMethod[billingData.paymentMethod.htmlName] = Resource.msg( 'error.no.selected.payment.method', 'payment', null ); delete billingData.paymentInformation; res.json({ form: billingForm, fieldErrors: [noPaymentMethod], serverErrors: [], error: true }); return; } ``` Actualiza el código de creación de pedidos: ```javascript const stripeCheckoutHelper = require('int_stripe_core').getCheckoutHelper(); const order = stripeCheckoutHelper.createOrder(currentBasket); if (!order) { res.json({ error: true, errorMessage: Resource.msg('error.technical', 'checkout', null); }); return next(); } ``` Actualiza el código de realización de pedidos: ```javascript var isAPMOrder = stripeCheckoutHelper.isAPMORder(order); if (!isAPMOrder) { var stripePaymentInstrument = stripeCheckoutHelper.getStripePaymentInstrument(order); if (stripePaymentInstrument && order.custom.stripeIsPaymentIntentInReview) { res.json({ error: false, orderID: order.orderNo, orderToken: order.orderToken, continueUrl: URLUtils.url('Order-Confirm').toString() }); return next(); } // Places the orderconst fraudDetectionStatus = hooksHelper( 'app.fraud.detection', 'fraudDetection', currentBasket, require('*/cartridge/scripts/hooks/fraudDetection').fraudDetection ); if (fraudDetectionStatus.status === 'fail') { Transaction.wrap(function () { OrderMgr.failOrder(order); }); // Fraud detection failed req.session.privacyCache.set('fraudDetectionStatus', true); res.json({ error: true, cartError: true, redirectUrl: URLUtils.url('Error-ErrorCode', 'err', fraudDetectionStatus.errorCode).toString(), errorMessage: Resource.msg('error.technical', 'checkout', null); }); return next(); } COHelpers.sendConfirmationEmail(order, req.locale.id); // Reset usingMultiShip after successful Order placement req.session.privacyCache.set('usingMultiShip', false); res.json({ error: false, orderID: order.orderNo, orderToken: order.orderToken, continueUrl: URLUtils.url('Order-Confirm').toString() }); return next(); } ``` ### Controlador: PaymentInstruments.js Ruta: `app_stripe_sfra/cartridge/controllers/PaymentInstruments.js` Utiliza el siguiente código para reemplazar el punto de conexión `DeletePayment`: ```javascript server.replace('DeletePayment', function(req, res, next) { var stripeHelper = require ('int_stripe_core').getStripeHelper(); var wallet = stripeHelper.getStripeWallet(customer); var UUID = req.querystring.UUID; wallet.removePaymentInstrument({ custom: { stripeId: UUID }}); res.json({ UUID: UUID }); next(); }); ``` ### Controlador: RedirectURL.js Ruta: `app_stripe_sfra/cartridge/controllers/RedirectURL.js` Añade el siguiente código a la función `Start`: ```javascript server.replace('Start', function (req, res, next) { const URLRedirectMgr = require('dw/web/URLRedirectMgr'); // Intercept the incoming path request if (URLRedirectMgr.getRedirectOrigin() === '/.well-known/apple-developer-merchantid-domain-association') { res.render('stripe/util/apple'); return next(); } const redirect = URLRedirectMgr.redirect; const location = redirect ? redirect.location : null; const redirectStatus = redirect ? redirect.getStatus() : null; if (!location) { res.setStatusCode(404); res.render('error/notFound'); } else { if (redirectStatus) { res.setRedirectStatus(redirectStatus); } res.redirect(location); } return next(); }); ``` ## Interfaces externas Las funciones de Stripe dependen en gran medida de llamadas externas a los servicios de Stripe. Todas las interfaces externas utilizan la plataforma de servicios para comunicarse con la API de Stripe. Las cuentas de Stripe se pueden crear y usar de manera gratuita. La mayoría de las comunicaciones con los servicios de Stripe se registran y son accesibles en el [Dashboard de Stripe](https://dashboard.stripe.com). Te recomendamos que utilices el Dashboard de Stripe para supervisar y probar tu integración. Puedes encontrar la configuración principal para la integración de los servicios de Stripe con un servicio diferente para cada llamada externa en Administración > Operaciones > Servicios: - `stripe.http.addCard` - `stripe.http.authorizePayment` - `stripe.http.createCharge` - `stripe.http.createCustomer` - `stripe.http.deleteCard` - `stripe.http.fetchCustomerCards` - `stripe.http.fetchCustomerSources` - `stripe.http.refundCharge` - `stripe.http.retrieveCustomer` - `stripe.http.service` - `stripe.http.updateCard` Todos estos servicios utilizan el mismo perfil y credenciales. Lo que puede diferir es el prefijo del nombre del registro y si el registro de comunicaciones está habilitado. ## Stripe Payment Element El cartucho Stripe admite Stripe Payment Element como método de pago. Payment Element es un componente de interfaz de usuario integrado que te permite aceptar más de 25 métodos de pago con una sola integración. ![](https://b.stripecdn.com/docs-statics-srv/assets/Payment-Element-SPM-Link.1cf2bf285665f1c139d20d08e6969ea0.png) Para habilitar Payment Element, ve a **Business Manager > Herramientas de comerciante > Pedidos > Métodos de pago** y habilita el método de pago con el ID especificado en `STRIPE_PAGO_ELEMENT`. En la tienda Proceso de compra > Pago, hay un widget con todos los métodos de pago habilitados en el [Dashboard](https://dashboard.stripe.com/settings/payment_methods) de Stripe. Cuando habilitas el Payment Element en Business Manager, puede reemplazar todos los demás métodos de pago. Puedes deshabilitar todos los métodos de pago y usar `STRIPE_PAYMENT_ELEMENT` en su lugar. Para habilitar el almacenamiento de métodos de pago para su uso futuro desde Stripe Payment Element, ve a **Business Manager > Preferencias personalizadas > Configuración de Stripe** y especifica **Stripe Payment Element: habilitar guardar método de pago para futuras compras** a `Yes`. Para mostrar una lista de métodos de pago guardados en el proceso de compra, ve a **Business Manager > Payments Methods** y habilita el método de pago `CREDIT_CARD`. Cuando está habilitado con `STRIPE_PAYMENT_ELEMENT`, la pestaña de tarjeta de crédito incluirá una lista de tarjetas guardadas (si las hay). ## Pantalla de información de Stripe Radar El cartucho de Stripe Link admite la vista de información de Radar para mostrar Informes de riesgo dentro de la sección Pedidos de Business Manager. [Radar](https://docs.stripe.com/radar.md) proporciona protección antifraude en tiempo real y no requiere tiempo de desarrollo adicional. Los profesionales del fraude pueden añadir [Radar for Fraud Teams](https://stripe.com/radar/fraud-teams) para personalizar la protección y obtener información más detallada. ![](https://b.stripecdn.com/docs-statics-srv/assets/radar-insights-sfcc.bc57c92d0232d38564a8d68fdb0fa94e.png) Para habilitar la visualización de información, ve a **Business Manager > Herramientas de comerciante* > Preferencias personalizadas > Configuración de Stripe*\* y habilita **Datos de puntuación de riesgo** a `Yes`. ## See also - [Guía del usuario](https://docs.stripe.com/use-stripe-apps/salesforce-commerce-cloud/user-guide.md)