Ir a contenido
Crea una cuenta
 o
inicia sesión
Logotipo de la documentación de Stripe
/
Crear cuenta
Iniciar sesión
Resumen
Control de versiones
Actualiza tu versión de la API
Essentials
Herramientas
Stripe para Visual Studio Code
Funciones
Alertas de estado de StripeCargas de archivos
Soluciones de IA
Seguridad y privacidad
Ampliar Stripe
Socios
Certificación de socio

Guía de implementación de la aplicación de Stripe para Salesforce B2C Commerce

Configurar Business Manager

The Stripe app for Salesforce B2C Commerce (LINK Cartridge) requires several cartridges for full functionality. Additionally, controller and SFRA support is broken out into two separate cartridges, thereby facilitating the installation and use of one or the other models.

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.
  2. Haz clic en el nombre del sitio web de la tienda al que quieres añadir la funcionalidad de Stripe.
  3. Selecciona la pestaña Configuración.
  4. 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.
  2. Haz clic en el enlace Sitio web de Business Manager y, a continuación, en Administrar el sitio web de Business Manager.
  3. 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.
  2. Abre la carpeta sites y edita la carpeta siteIDHere en el ID del sitio web que quieras.
  3. Añade una carpeta para cada sitio en el que quieras usar Stripe.
  4. Ve a Administración > Desarrollo de sitios > Importar y exportar sitios.
  5. 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:

"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 queSTRIPE_APM gestiona los métodos de pago a través de Payment Element y Express Checkout Element.

Procesador de pagos de tarjetas de crédito

  1. Ve a Herramientas para comerciantes > Pedidos > Procesadores de pagos y haz clic en Nuevo.
  2. 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.
  2. 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 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 para obtener más detalles.

Instala la aplicación Stripe Salesforce Commerce

Use Stripe Apps to bolster security and simplify the use of distinct restricted keys for each integration with your Stripe account. The process of installing the Stripe app and acquiring the newly generated secret and publishable keys is essential for your integration with the Salesforce Commerce connector. This approach eliminates the need to manually create your own restricted key or use a secret key. To integrate the Salesforce Commerce app and reinforce your account’s security infrastructure:

  1. Ve a la Stripe App Marketplace y, a continuación, haz clic en Instala la aplicación Salesforce Commerce.
  2. Selecciona la cuenta de Stripe en la que quieres instalar la aplicación.
  3. 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.
  4. 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.
  5. Use the newly generated publishable key and secret key to finish the app configuration.
  6. 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 aplicación en un entorno de prueba o en modo activo.

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/basil/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.

  • 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.

  • Secreto de firma del webhook de Stripe: Introduce el secreto de firma del webhook 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 para que los webhooks respondan.

  • 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.
  2. Busca «Configuración rápida de Stripe» en Business Manager, en Administración.
  3. Selecciona los sitios web para los que quieres configurar Stripe.
  4. Introduce tu Stripe Publishable Key y Restricted Access key recuperadas de la aplicación Stripe Salesforce Commerce.
  5. Haz clic en Configuración rápida.

Configura Apple Pay

Para Apple Pay:

Actualiza RedirectURL.js:

RedirectURL.js
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:

{
  "__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, haz clic en Añadir un nuevo dominio.
  2. Introduce tu nombre de dominio.
  3. Haz clic en Guardar y continuar.
  4. Descarga el archivo de asociación de dominios.
  5. 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.
  6. 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:

CheckoutServices.js
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;
}

// Validate payment method
const creditCardPaymentMethod = PaymentMgr.getPaymentMethod(PaymentInstrument.METHOD_CREDIT_CARD);
const paymentCard = PaymentMgr.getPaymentCard(billingData.paymentInformation.cardType.value);

const applicablePaymentCards = creditCardPaymentMethod.getApplicablePaymentCards(
  req.currentCustomer.raw,
  req.geolocation.countryCode,
  null
);

if (!applicablePaymentCards.contains(paymentCard)) {
  // Invalid payment method
  const invalidPaymentMethod = Resource.msg('error.payment.not.valid', 'checkout', null);
  delete billingData.paymentInformation;
  res.json({
    form: billingForm,
    fieldErrors: [],
    serverErrors: [invalidPaymentMethod],
    error: true
  });
  return;
}

Actualiza el código de creación de pedidos:

CheckoutServices.js
// Re-calculate the payments
const calculatedPaymentTransactionTotal = COHelpers.calculatePaymentTransaction(currentBasket);
if (calculatedPaymentTransactionTotal.error) {
  res.json({
      error: true,
      errorMessage: Resource.msg('error.technical', 'checkout', null);
  });
  return next();
}
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:

CheckoutServices.js
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 order
  var placeOrderResult = COHelpers.placeOrder(order, fraudDetectionStatus);

  if(placeOrderResult.error) {
    stripeCheckoutHelper.refundCharge(order);
    res.json({
      error: true,
      errorMessage: Resource.msg('error.technical', 'checkout', null)
    });
  const 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:

PaymentInstruments.js
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:

RedirectURL.js
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. 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 las mismas credenciales. Lo único que puede ser diferente es si el registro de comunicaciones está habilitado o no y el prefijo del nombre del registro. Esta es la configuración de algunos de los servicios:

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.

Para habilitar Payment Element, dirígete a Business Manager > Herramientas de comerciante > Pedidos > Métodos de pago y habilita el método de pago con el ID especificado en STRIPE_PAYMENT_ELEMENT. En la tienda, en Proceso de compra > Pago, hay un widget con todos los métodos de pago habilitados en el Dashboard 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 en Yes.

Para mostrar una lista de métodos de pago guardados en el proceso de pago, ve a Business Manager > Métodos de pago y habilita el método de pago CREDIT_CARD. Cuando está habilitado con STRIPE_PAYMENT_ELEMENT, la pestaña de tarjeta de crédito incluye una lista de tarjetas guardadas (si las hay).

Pantalla de información de Stripe Radar

El cartucho de LINK de Stripe admite la vista de información de Radar para mostrar información sobre riesgos dentro de la sección Pedidos de Business Manager. Radar ofrece protección contra fraudes en tiempo real y no necesita tiempo de desarrollo adicional. Los profesionales del fraude pueden añadir Radar for Fraud Teams para personalizar la protección y obtener una visión más profunda.

Para habilitar la visualización de información, va a Business Manager > Herramientas de comerciante > Preferences personalizadas > Configuración de Stripe y especifica Datos de puntuación de riesgo en Yes.

Véase también

¿Te ha sido útil la página?
SíNo
¿Necesitas ayuda? Ponte en contacto con el equipo de soporte.
Únete a nuestro programa de acceso anticipado.
Echa un vistazo a nuestro registro de cambios.
¿Tienes alguna pregunta? Ponte en contacto con el equipo de ventas.
¿LLM? Lee llms.txt.
Con tecnología de Markdoc