Stripe component

[abr4xas]

Un ejemplo sencillo de formulario de stripe es este:

<style>
    .StripeElement {
      box-sizing: border-box;
      height: 40px;
      padding: 10px 12px;
      border: 1px solid transparent;
      border-radius: 4px;
      background-color: white;
      box-shadow: 0 1px 3px 0 #e6ebf1;
      -webkit-transition: box-shadow 150ms ease;
      transition: box-shadow 150ms ease;
    }
    .StripeElement--focus {
      box-shadow: 0 1px 3px 0 #cfd7df;
    }
    .StripeElement--invalid {
      border-color: #fa755a;
    }
    .StripeElement--webkit-autofill {
      background-color: #fefde5 !important;
    }
</style>

<form action="/pagar" method="POST" id="paymentForm">
    <label class="mt-3" for="card-element">
        Card details:
    </label>
    
    <div id="cardElement"></div>
    
    <small class="form-text text-muted" id="cardErrors" role="alert"></small>
    
    <!-- lo que necesitamos es el valor de este input oculto -->
    <input type="hidden" name="payment_method" id="paymentMethod">
    <div class="text-center mt-3">
        <button type="submit" id="payButton" class="btn btn-primary btn-lg">Ir a pagar</button>
    </div>
</form>

<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('pk_test_51IMzM0...}');
    const elements = stripe.elements({ locale: 'en' });
    const cardElement = elements.create('card');
    cardElement.mount('#cardElement');
    const form = document.getElementById('paymentForm');
    const payButton = document.getElementById('payButton');
    payButton.addEventListener('click', async(e) => {
        e.preventDefault();
        const { paymentMethod, error } = await stripe.createPaymentMethod(
            'card', cardElement, {
                billing_details: {
                    "name": "John Doe",
                    "email": "[email protected]"
                }
            }
        );
        if (error) {
            const displayError = document.getElementById('cardErrors');
            displayError.textContent = error.message;
        } else {
            const tokenInput = document.getElementById('paymentMethod');
            tokenInput.value = paymentMethod.id;
            form.submit();
        }
    });
</script>

Fuente: JuanDMeGon

También hay otros ejemplos que puedes ver aquí pero usualmente con este ejemplo sencillo se puede procesar los pagos.

Nota: Recuerda que debes leer la documentación siempre estará más actualizada que este contenido.