Unable to integrate stripe card payment in php

Question

// Stripe API Key
var stripe = Stripe('pk_test_xxx');

// Custom Styling
var style = {
    base: {
        color: '#32325d',
        lineHeight: '24px',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
            color: '#aab7c4'
        }
    },
    invalid: {
        color: '#fa755a',
        iconColor: '#fa755a'
    }
};

// Create Stripe Element
var elements = stripe.elements();
// Create an instance of the card Element
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
    var displayError = document.getElementById('card-errors');
if (event.error) {
        displayError.textContent = event.error.message;
    } else {
        displayError.textContent = '';
    }
});
// Handle form submission
var form = document.getElementById('payment-form');
document.getElementById("s03").addEventListener('click',function(event) {
    event.preventDefault();
stripe.createToken(card).then(function(result) {
        if (result.error) {
            // Inform the user if there was an error
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
        } else {
            stripeTokenHandler(result.token);
        }
    });
});
// Send Stripe Token to Server
function stripeTokenHandler(token) {
    // Insert the token ID into the form so it gets submitted to the server
    var form = document.getElementById('payment-form');
// Add Stripe Token to hidden input
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);
// Submit form
    form.submit();
}

.StripeElement {
    background-color: white;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    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;
}

<div class="modal-body">

                                        <form action="./chstripe.php" method="post" id="payment-form">
                                          <div class="form-row">
                                            <label for="card-element">Credit or debit card</label>
                                            <div id="card-element">
                                              <!-- a Stripe Element will be inserted here. -->
                                            </div>
                                            <!-- Used to display form errors -->
                                            <div id="card-errors"></div>
                                          </div>
                                          </form>
<!-- Modal Body Ends-->              </div>
<!--Modal Footer Starts-->             <div class="modal-footer">
                                        <button type="button" id="s03" class="btn btn-success" data-dismiss="modal" onclick="location.href='initialize.php'" >Proceed</button>
                                         <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="location.href='npay.html'" >Abort</button>
<!--Modal Footer Ends-->               </div>
                                    </div>

These are the code sample from my original stripe integration file. I have tried to integrate one time card payment in my website. The problem is the card element haven't shown at all while running. Please find Image Attachment Here:>>red marked area where the card element should show up. The form submit action forward the form data to chstripe.php which also give error as invalid variable $token . I think the token creation script is not working properly. Any one has any idea about this? Please let me know.

<?php
session_start();
require_once("F:\wamp64\www\pay.rrsmedia.tk\lib\stripe-php-7.27.2\init.php");
\Stripe\Stripe::setApiKey('sk_test_xxx');
$name = $_SESSION['namex'];
$email = $_SESSION['emailx'];
$phno = $_SESSION['mobilex'];
$purpose = $_SESSION['purposex'];
$amount = $_SESSION['amountx'];
$txn =   $_SESSION['txnn'];
$token = $_POST['stripeToken'];
// payment information
$charge = \Stripe\Charge::create(
    array(
        'amount' => $amount*100,
        'currency' => 'inr',
        'source' => $token
    )
);
print_r($charge);

?>

You have included your secret key in the snippet and should roll your keys immediately: https://stripe.com/docs/keys#rolling-keys — Nolan H, Mar 18 '20 at 15:15
It looks like the card Element might be there, but the width is restricted. Have you checked the markup to see what exists? Are any styles being applied restricting it? — Nolan H, Mar 18 '20 at 15:34
yes that is a roll key, I previously set expiration for this key. It's already expired. — Rashmi Ranjan, Mar 18 '20 at 15:34
Here's an example of showing the Card element in a modal. You need to spend some time stepping through your code to debug where the issue is occurring. If you can provide some specific problematic lines or error messages, we can offer more detailed suggestions. https://jsfiddle.net/n3b4aexh/ — Nolan H, Mar 18 '20 at 15:49
Thanks Nolan H, I sort out the error. It's just css restriction. — Rashmi Ranjan, Mar 23 '20 at 08:54
Hello Nolan, Can you help me with this ? https://stackoverflow.com/questions/60817086/how-to-implement-3d-secure-authentication-in-stripe — Rashmi Ranjan, Mar 23 '20 at 16:02

Unable to integrate stripe card payment in php

0 Answers0