Need help with stripe payment


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



</head>
<body>
    <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>

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

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

                        

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


                    </form>

                  </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://js.stripe.com/v3/"></script>
    <script type="text/javascript">
  
    // Set your publishable key: remember to change this to your live publishable key in production
    // See your keys here: https://dashboard.stripe.com/apikeys
    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.mount("#card-element");

    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) {
        ev.preventDefault();
        // 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)
                console.log(result.error.message);
                $('#card-errors').text(result.error.message);
            } 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');


                }
            }
        });
    });
    

    </script>
  
    <script>
        // Set your secret key. Remember to switch to your live secret key in production.
        // See your keys here: https://dashboard.stripe.com/apikeys
        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'}});
        });
    </script>
</body>
</html>


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

Advertisements


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

Top