Ejercicio: Creación y prueba de un formulario de pagos en Power Pages
Al integrar métodos de pago en Power Pages, necesita un formulario y una tabla asociada a los que conectar los datos. En este ejercicio, creará una nueva tabla y un nuevo formulario, lo que le ayudará a entender qué necesita al integrar métodos de pago. Si ya tiene tablas y formularios disponibles para este propósito, puede usarlos e ir directamente a la creación del formulario de varios pasos.
Crear una tabla de contactos de pago
Antes de crear tablas y formularios, se recomienda compilar estos recursos dentro de una solución. Una solución es un paquete que puede usar para agrupar, administrar y transportar personalizaciones, aplicaciones, componentes y configuraciones entre entornos.
Vaya a Power Pages e inicie sesión en el inquilino en el que haya añadido las integraciones de Stripe.
Seleccione Soluciones en el menú de navegación de la izquierda y, luego, + Nueva solución en el menú superior.
Póngale a la solución el nombre Probar pagos (o algo similar) y use el editor predeterminado si no tiene uno asignado.
En la solución Probar pagos, seleccione + Nuevo en el menú de la tabla y, luego, Tabla > Tabla (propiedades avanzadas).
En el panel Nueva tabla que se abrirá a la derecha, póngale a la tabla el nombre Contacto de pago, deje la columna principal como Nombre y seleccione Guardar.
Después de ir a la tabla Contacto de pago, seleccione + Nueva en el menú superior y seleccione Columna.
Póngale a la columna el nombre Importe de pago, seleccione Divisa para el tipo de datos y seleccione Guardar.
Importante
Al utilizar la integración de Stripe en un formulario de varios pasos, necesita una columna de divisa. Esta columna determina cuánto cobrar al usuario. Si no tiene una columna de divisa, la integración no funcionará.
Añada otra columna llamada Correo electrónico para hacer un seguimiento de la dirección de correo electrónico del usuario. Utilice el tipo de datos Línea de texto única con el formato Correo electrónico.
Ahora, debería tener lista una tabla de contactos de pagos. En la siguiente sección, creará el formulario asociado a esta tabla y lo añadirá a un formulario de varios pasos en su sitio web de Power Pages.
Modificar el formulario de la tabla
Al asociar la tabla de contactos de pago con el formulario de varios pasos del sitio, deberá seleccionar un formulario que esté asociado a la tabla de contactos de pago. Es posible que el formulario estándar asociado a las nuevas tablas no tenga toda la información que los usuarios deban completar. Para solucionar este problema, debe añadir columnas en el formulario Información principal existente.
Desde la tabla de contactos de pago, seleccione Formularios en Experiencias de datos.
En la página Formularios, seleccione el formulario Información con el tipo de formulario Principal y seleccione Editar en el menú superior.
En el editor de formulario Nuevo contacto de pago que se abrirá, añada las siguientes columnas del panel Columnas de tabla a la izquierda seleccionando el nombre en la lista:
- Correo electrónico
- Importe de pago
Nota
Al elegir un importe de pago, use la columna de importe de pago SIN (base). Si lo desea, puede ocultar el Propietario para que sea más fácil consultar el formulario.
Seleccione Guardar y publicar en la esquina superior derecha del editor de formularios.
Ahora debería tener una tabla y un formulario configurados para que las personas puedan hacer pagos. En la siguiente sección, integrará estos recursos en un formulario de varios pasos en su sitio de Power Pages.
Crear un componente en un formulario de varios pasos
Aunque los formularios también están asociados directamente a las tablas, puede crear formularios personalizados en el estudio de diseño de Power Pages. En las siguientes secciones, aprenderá a crear un formulario de varios pasos y a integrarlo con Stripe.
Para empezar, edite el sitio de Power Pages desde la página principal de Power Pages para ir al estudio de diseño.
Vaya a la página en la que desea que esté el formulario o seleccione + Página para añadir una página en blanco.
En el área + Agregar una sección de la página, seleccione Formulario de varios pasos en el menú Elegir un componente para crear un nuevo formulario de varios pasos.
Si se abre una ventana Agregar un formulario de varios pasos, seleccione + Nuevo formulario de varios pasos.
Póngale al formulario un nombre similar a Pago y seleccione Listo para crear el formulario.
En el área del formulario creado, seleccione + Agregar el primer paso para añadir el primer paso del formulario.
En la ventana Agregar paso que se abrirá, póngale al paso el nombre Recopilar información y seleccione la tabla Contacto de pago que ha creado antes. En Seleccionar un formulario, seleccione Información y Aceptar.
Nota
El formulario Información es el mismo formulario Principal que editó anteriormente, con los campos Nombre, Correo electrónico e Importe de pago seleccionados. Si ha ocultado el campo Propietario, no debería aparecer en el formulario de varios pasos.
Seleccione + Agregar paso en la parte superior del formulario.
En la ventana Agregar paso que se abrirá, póngale al paso el nombre Pago. Seleccione la misma tabla Contacto de pago y el mismo formulario Información que utilizó en el paso anterior y seleccione Aceptar.
En el paso 2/2 del formulario, seleccione Configuración del paso.
Vaya a Integraciones de la aplicación en la ventana de navegación izquierda y seleccione la alternancia junto a Habilitar pagos digitales para activar la integración con Stripe. Seleccione Importe de pago en el campo Elegir importe y seleccione Aceptar para completar el formulario.
Ahora debería tener un formulario de varios pasos completo, con un paso en el que el usuario debe introducir el Nombre, el Correo electrónico y el Importe del pago y otro paso con las entradas de usuario proporcionadas y un formulario de pago adjunto. El importe del precio también debería estar asociado al campo Importe de pago.
Para que los usuarios vean el formulario y usted pueda probarlo, deberá modificar los permisos del formulario. Para hacerlo, seleccione + Nuevo permiso en la parte superior del formulario.
En el panel Nuevo permiso de tabla que se abrirá a la derecha, compruebe que los siguientes campos se hayan rellenado automáticamente:
- Tabla: Contacto de pago
- Tipo de acceso: acceso global
-
Permiso para
- Leer
- Crear
Seleccione + Agregar roles en la parte inferior del panel Nuevo permiso de tabla. Seleccione los roles Administradores y Usuarios autenticados y seleccione Guardar.
Seleccione Sincronizar en la esquina superior derecha del estudio de diseño y seleccione Vista previa > Escritorio para obtener una vista previa de la página.
Cuando obtenga una vista previa del formulario, en función de cómo esté configurada su página web, es posible que vea el mensaje No tiene los permisos adecuados. Para ver el formulario, debe iniciar sesión en el sitio web.
Si el sitio web usa una de las plantillas de Power Pages, complete los siguientes pasos:
En la esquina superior derecha del sitio web, seleccione Iniciar sesión.
Seleccione Microsoft Entra ID en Iniciar sesión con una cuenta externa. Inicie sesión en su inquilino y acepte la solicitud de permiso.
Si aún no ha iniciado sesión en el sitio, introduzca sus datos, seleccione Guardar y vuelva al formulario de pago.
Ahora, tendría que poder ver el formulario, que debería tener un aspecto similar al de la siguiente captura de pantalla.
En la siguiente sección, se describen las opciones de prueba con el formulario de Stripe, lo que incluye los números de tarjeta de prueba que puede usar.
Probar el formulario
Al probar los pagos con Stripe en su sitio de Power Pages, Stripe le proporciona un conjunto de tarjetas de prueba para que las utilice. La lista también incluye los id. de PaymentMethod y Token asociados de la marca de la tarjeta. Para ver la lista completa, vaya a Tarjetas de prueba.
El método de prueba es simple: solo tiene que elegir una tarjeta de la lista y completar el formulario del sitio, algo similar a lo que haría al hacer un pago normal.
Vaya a su formulario de pago desde la función de vista previa del estudio de diseño e introduzca la información en los campos Nombre y Correo electrónico que recuerde. Compruebe que se encuentra en el paso Recopilar información del formulario.
Nota
La información que introduzca solo se utiliza para la prueba; no es necesario que sea un nombre real asociado a una dirección de correo electrónico auténtica.
En Importe de pago ponga cualquier cifra y seleccione Siguiente.
Nota
Los límites de este número dependen de la configuración de la columna individual. Cuando configura una columna de divisa, puede modificar los límites de valor. También puede designar el tipo de divisa.
Tras seleccionar Siguiente, el sistema lo llevará al paso Pago del formulario. En este paso, se introduce un número de tarjeta de prueba desde la documentación de Stripe.
Seleccione Tarjeta e introduzca una tarjeta de prueba. Seleccione Pagar ahora en la parte inferior del formulario para completar el proceso. La fecha de vencimiento puede ser cualquier fecha futura, el código de seguridad puede ser cualquier cifra de tres dígitos y el código postal puede ser cualquier cifra de cinco dígitos.
Nota
Ahora, la información que ha proporcionado en el paso Recopilar información debería aparecer en la parte superior del paso Pago, pero en modo Solo lectura.
Después de confirmar el pago, el sistema lo lleva a una vista de resumen con el Nombre, el Correo electrónico, el Importe de pago y el Id. de transacción.
Para confirmar de forma interna que el pago se ha realizado correctamente, puede consultar los registros en la tabla Contacto de pago.
Para la confirmación en Stripe, vaya a la página Transacciones: la transacción debería aparecer como Correcta, con el id. de transacción en Descripción.
Siguientes pasos
Ahora que sabe cómo desarrollar y probar un formulario de pago, debería poder integrar ese conocimiento en su propia empresa o en sus datos personales y casos de uso.
Al cambiar de claves de prueba a claves en vivo, es importante saber que debe usar Azure Key Vault al almacenar claves de API. El almacenamiento en Dataverse no está permitido para las integraciones de pagos con claves en vivo. Siga estos pasos al añadir claves a Azure Key Vault:
Obtenga el nombre de la aplicación en la página Registros de aplicaciones de Azure. El nombre de la aplicación en Azure Portal es el nombre de su sitio con el prefijo Portals-. Si el nombre del sitio es Contoso Coffee, el nombre de la aplicación en Azure Portal sería Portals-Contoso Coffee.
Vaya a Almacenes de claves en Azure Portal y cree un nuevo almacén de claves o use uno que ya exista.
Al crear un nuevo almacén de claves, debe elegir un modelo de permiso. Puede elegir el Control de acceso basado en roles de Azure o una Directiva de acceso de Key Vault.
Añada la clave restringida de Stripe como secreto en el almacén de claves. Para obtener más información sobre cómo crear un secreto en Azure Key Vault, vaya a Establecer y recuperar un secreto de Azure Key Vault en Azure Portal.