Acerca de

Librería para realizar pagos con tarjeta de crédito o débito a través de Stripe. También permite realizar pagos con Oxxo. Esta librería se conecta con un servidor de pagos para múltiples proyectos (en construcción).

Instalación

Usar el comando:

    npm install payment-stripe-widgets

En tu frontend instala la librería en el index.html

    <script src="https://js.stripe.com/v3/"></script>

En tu módulo de Angular importa el módulo de la librería:

    import { PaymentModule } from 'payment-stripe-widgets';

Y en el arreglo de imports del módulo de Angular agrega el módulo de la librería:

        imports: [
            ...
            PaymentModule.forRoot({
                paymentServer: URL_DEL_SERVIDOR_DE_PAGOS,
                stripePublicKey: STRIPE_PUBLIC_KEY
            }),
        ]

Formulario de pago

El formulario es un widget que permite realizar pagos con tarjeta de crédito o débito a través de Stripe. Se utiliza de la siguiente forma:

    <payment [products]="PRODUCTS" [pathConfirmation]="RUTA_CONFIRM" [projectID]="PROJECTID"
                [userID]="USERID"></payment>

Donde PRODUCTS es una lista de productos de la siguiente forma:

    products = [
        {
            id: ID_STRIPE,
            quantity: 1
        }
    ]

userID es el usuario que realiza el pago, y projectID es un String donde vas a identificar tu proyecto en el backend (si es que tienes varios proyectos en el mismo servidor de pagos). Estos dos atributos se agregan a el objeto de metadata que se envía a Stripe. Puedes agregar atributos extra al objeto metadata, pero no es obligatorio. En cambio el pathConfirmation, userID y projectID sí lo son.

Atributos para el componente payment

    [products]="ProductsDTO[] (obligatorio)"
    [projectID]="string (obligatorio)"
    [userID]="string (obligatorio)"
    [pathConfirmation]="string (obligatorio)"
    [buttonLabel]="string"
    [showEmailInput]="boolean"
    [showAmountNextToButton]="boolean"
    [metadata]="any"

Componente de confirmación de pago

Debes de tener una ruta en tu frontend para mostrar una alerta al usuario del resultado del pago. Donde tienes que utilizar el siguiente componente:

    <confirm-payment [projectID]="projectID" [userID]="userID" (response)="response($event)"></confirm-payment>

Esta ruta con este componente tiene que estar relacionado al atributo pathConfirmation que se utiliza en el componente anterior. De igual manera, projectID y userID son obligatorios. El atributo response es un evento que se dispara cuando se obtiene la respuesta del servidor de pagos. El evento response recibe un objeto de la siguiente forma:

    {
        body: any, // Objeto que regresa el servidor de pagos
        valid: boolean,
    }

Atributos para el componente confirm-payment

    [projectID]="string (obligatorio)"
    [userID]="string (obligatorio)"
    [messageSuccess]="string"
    [messageProcessing]="string"
    [messageRequiresPaymentMethod]="string"
    [messageUnexpectedError]="string"
    (response)="function"

Botón de suscripción

Es un botón que redireccionará al usuario a una página de Stripe para que pueda realizar una suscripción. Se utiliza de la siguiente forma: Es necesario que el ID del producto tenga un precio asociado en Stripe y además que sea un producto tipo suscripción.

    <subscription-button [userID]="userID" [projectID]="projectID" [pathConfirmation]="PATH_CONFIRMATION" [productID]="PRODUCT_ID">
            Suscribirse
    </subscription-button>
   

Atributos para el componente subscription-button

    [projectID]="string (obligatorio)"
    [userID]="string (obligatorio)"
    [productID]="string (obligatorio)"
    [pathConfirmation]="string (obligatorio)"
    [pathCancelation]="string"
    [metadata]="any"

Botón de pago con Oxxo

Funciona de la misma manera que un botón de suscripción, solamente que te manda directamente a generar una boleta de pago que se puede pagar en Oxxo. Se utiliza de la siguiente forma:

    <oxxo-button [metadata]="metadata" [products]="data.products" [pathConfirmation]="PATH_CONFIRMATION" [projectID]="projectID"
        [userID]="userID">
        Pagar con Oxxo
    </oxxo-button>

Atributos para el componente oxxo-button

    [projectID]="string (obligatorio)"
    [userID]="string (obligatorio)"
    [products]="ProductsDTO[] (obligatorio)"
    [pathConfirmation]="string (obligatorio)"
    [pathCancelation]="string"
    [metadata]="any"