Creación de una tienda de comercio electrónico 2/3:flujos de pago

Introducción

La creación de una tienda en línea requiere la gestión de muchas partes móviles, como la gestión de productos y precios, los flujos de pago para sus clientes y el cumplimiento de pedidos, por nombrar algunos.

En este artículo, aprenderá a usar Stripe Checkout y Payment Links para crear flujos de pago fluidos y potentes para sus clientes. También puede ver este video con Sia Karamalegos (@TheGreenGreek) y conmigo (@mattling_dev) para aprender a usar Checkout con las funciones sin servidor de Netlify y la biblioteca de cliente de Stripe-node.

Checkout de Stripe:descripción general

Checkout le permite proporcionar a sus clientes una potente página de pago alojada en Stripe que les permite realizar pagos de forma rápida y segura. Algunas características principales de Checkout son que:

  • es totalmente receptivo y, como tal, funciona tanto en computadoras de escritorio como en dispositivos móviles
  • está internacionalizado a más de 25 idiomas
  • incluye monederos digitales como Apple Pay y Google Pay desde el primer momento
  • incluye muchos métodos de pago sin necesidad de codificación

Hay mucho más en Stripe Checkout, por lo que recomiendo leer sobre aún más funciones aquí.

Productos y Precios

En la publicación de blog anterior, aprendió cómo crear un modelo de precios para su negocio y cómo crear y administrar productos y precios. Ahora que ha creado esos recursos básicos, es hora de proporcionar una forma para que sus clientes los compren. Comencemos con Stripe Checkout.

Sesiones de pago

Los pasos para crear una sesión de pago se pueden describir en términos generales como:

  1. Tome el Id. de precio asociado con el Producto que su cliente está comprando
  2. Cree una sesión de pago con ese ID de precio
    • De manera opcional, establezca otras funciones de pago como (hay muchas más):
      • Recopilar información de envío
      • Calcular y recaudar impuestos automáticamente
      • Recopilar un número de teléfono de cliente
      • Añadir un descuento
  3. Redirige a tu cliente a la página de pago alojada en Stripe usando el atributo de URL que se devuelve con la sesión de pago creada en el paso 2.
  4. Completar el pedido una vez que el usuario haya completado el pago

Aquí está el código en Javascript que utiliza una función sin servidor de Netlify para crear una sesión de pago y redirigir al usuario a Stripe. Cada archivo JavaScript que se implementará como una función debe exportar un método de controlador:

exports.handler = async function (event, context) {
  const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);

  const params = new URLSearchParams(event.body);
  const priceId = params.get("price_id");

  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price: priceId,
        quantity: 1,
      },
    ],
    mode: "payment",
    success_url: "https://example.com/success",
    cancel_url: "https://example.com/cancel",
  });

  return {
    statusCode: 303,
    headers: {
      Location: session.url,
    },
  };
};

Para obtener información sobre cómo crear y configurar las funciones sin servidor de Netlify, siga la documentación completa aquí. Puede usar esta pequeña demostración para probar un ejemplo funcional de un pago alojado en Stripe.

Una vez que el cliente haya completado el pago, puede consultar el panel de control para ver si los pagos se realizaron correctamente y completar el pedido. O puede usar un punto final de webhook para escuchar eventos importantes que ocurren en su cuenta, como pagos exitosos, y luego reaccionar automáticamente, lo cual recomendamos enfáticamente. Cubriremos el uso de puntos finales de webhook para el cumplimiento en la tercera y última publicación del blog. Pero si tiene curiosidad, puede pasar directamente al tercer episodio sobre la creación de una tienda de comercio electrónico con Sia Karamalegos aquí.

Enlaces de pago

Un aún más simple Una forma de empezar a trabajar con los pagos, literalmente en minutos, es proporcionar a sus clientes enlaces de pago. Los enlaces de pago le permiten crear una página de pago para vender un producto o una suscripción y compartir un enlace con sus clientes. Puedes compartir el enlace tantas veces como quieras en las redes sociales, correos electrónicos o cualquier otro canal. Los enlaces de pago se pueden crear a través del tablero, por lo que si desea comenzar con una solución sin código, los enlaces de pago le permiten hacerlo creándolos allí y distribuyéndolos manualmente.

Creación de enlaces de pago en el panel de control

Crear enlaces de pago en el tablero es tan simple como navegar a la página de descripción general del producto y hacer clic en el botón "Crear enlace de pago" que se encuentra junto a un precio que figura en esa página.

Con la interfaz de usuario del enlace de pago, también puede hacer cosas como:

  • permita que sus clientes ajusten la cantidad del producto que están comprando
  • permitir el uso del código de promoción para obtener descuentos
  • recopilar direcciones y números de teléfono de los clientes
  • personalice las páginas de confirmación y redirección para después de una compra exitosa

Incluso puede obtener una vista previa de cómo se verá su página de enlace de pago en un dispositivo móvil o de escritorio al alternar la vista previa.

Una vez que haya creado un enlace de pago a través del panel, puede copiarlo, insertarlo en su página web o distribuirlo como se describe.

Creación de enlaces de pago a través de la API

También es posible crear enlaces de pago utilizando la API de Stripe. Esto le permite automatizar la gestión de sus enlaces de pago sin tener que navegar hasta el panel. Aquí hay un ejemplo simple en Ruby que crea un enlace de pago para mi producto / precio de café, lo que permite muchas funciones:

Stripe::PaymentLink.create({
  line_items: [
    {
      price: 'price_1KgAJtAGCzoAn7ffL22Tx06g',
      quantity: 1,
    },
  ],
  allow_promotion_codes: true,
  billing_address_collection: 'required',
  phone_number_collection: {
    enabled: true,
  },
})

Resumen

Con las soluciones de pago de código bajo y sin código, como Checkout y Payment Links, puede comenzar a vender sus productos en muy poco tiempo. Ambas soluciones ofrecen muchos beneficios como seguridad, optimización de conversión, cumplimiento de SCA, billeteras digitales y mucho más. Si desea recibir asistencia para usar Stripe Checkout o Payment Links, no dude en comunicarse con nuestros desarrolladores en @StripeDev en twitter o únase a la conversión en nuestro servidor de Discord.

Mantente conectado

Además, puedes mantenerte actualizado con Stripe de varias maneras:

📣 Síguenos en Twitter
💬 Únete al servidor oficial de Discord
📺 Suscríbete a nuestro canal de Youtube
📧 Suscríbete a Dev Digest