Need help with stripe payment

Oct 2, 2021
Reaction score
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- JavaScript Bundle with Popper -->
<script src="[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<!-- CSS only -->
<link href="[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

    <div class="container">
        <div class="row">
            <div class="col-4 offset-4">
                <div class="card">
                  <div class="card-body">
                    <h4 class="card-title">stripe payment</h4>
                    <form id="payment_form">
                        <div class="form-group">
                            <label class="font-weight-bold">Full namde</label>
                            <input type="text" name="fullname" class="form-control" placeholder="full name">

                        <div class="form-group">
                            <label class="font-weight-bold">Email</label>
                            <input type="email" name="email" class="form-control" placeholder="email">

                        <div class="form-group">
                            <label class="fonts-weight-bold">Card Details</label>
                            <div id="card-element">
                                <!-- Elements will create input elements here -->
                              <!-- We'll put the error messages in this element -->
                              <div id="card-errors" role="alert"></div>
                        <!--card end-->


                        <div class="form-group">
                            <button id="submit" class="btn btn-block btn-success">pay now</button>


    <script src=""></script>
    <script type="text/javascript">
    // Set your publishable key: remember to change this to your live publishable key in production
    // See your keys here:
    var stripe = Stripe('pk_test_51JWkHLK7X12cK8Ptf5y5DQn6Ugf6miu3AqSuhH9wdLsyTB9ouf0TY31vDQxq19xIt6YH76uMTEX1kU9HMyrcEb6w00MTxHnGxc');
    var elements = stripe.elements();

    // Set up Stripe.js and Elements to use in checkout form
    var style = {
        base: {
            color: "#32325d",

    var card = elements.create("card", { style: style });

    card.on('change', ({error}) => {
        let displayError = document.getElementById('card-errors');
        if (error) {
            displayError.textContent = error.message;
        } else {
            displayError.textContent = '';

    var form = document.getElementById('payment_form');

    form.addEventListener('submit', function(ev) {
        // If the client secret was rendered server-side as a data-secret attribute
        // on the <form> element, you can retrieve it here by calling `form.dataset.secret`
        stripe.confirmCardPayment('<= $$intent->client_secret; >', {
            payment_method: {
                card: card,
                billing_details: {
                    name: 'Jenny Rosen'
        }).then(function(result) {
            if (result.error) {
                // Show error to your customer (e.g., insufficient funds)
            } else {
                // The payment has been processed!
                if (result.paymentIntent.status === 'succeeded') {
                    // Show a success message to your customer
                    // There's a risk of the customer closing the window before callback
                    // execution. Set up a webhook or plugin to listen for the
                    // payment_intent.succeeded event that handles any business critical
                    // post-payment actions.
                    $('#card-errors').text('Payment Completed');


        // Set your secret key. Remember to switch to your live secret key in production.
        // See your keys here:
        const stripe = require('stripe')('sk_test_51JWkHLK7X12cK8PthlqsgUO3VAWHrZsupyEbVuYTjsIuSO13TdY30UKEXXdF3xrGNrgpJYO39hCnnO6o8B6zekpY005JuCEk3y');
        (async () => {
            const paymentIntent = await stripe.paymentIntents.create({
                amount: 10099,
                currency: 'aed',
                // Verify your integration in this guide by including this parameter
                metadata: {integration_check: 'accept_a_payment'}});

hi need help with this cant process any payment pls guide me

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Latest member

Latest Threads