With Jquery the stripe integration works very fine.
I am trying to integrate a script without jquery but I have a problem because the payment is inplete : "status": "requires_payment_method",
I am little blocked because I do not find my error and I follow the stripe tutorial ?
Thank you
[][1]
A part of the most important code:
// have to create intent before loading the javascript because it needs the intent id
$content .= '<input type="hidden" id="intent_id" value="' . HTML::output($stripe_payment_intent_id) . '" />' .
'<input type="hidden" id="secret" value="' . HTML::output($this->intent->client_secret) . '" />';
$content .= '
<div class="form-row">
';
$content .= '
<div id="stripe_table_new_card">
<div><label for="cardholder-name" class="control-label">' . $this->app->getDef('text_stripe_credit_card_owner') . '</label>
<div><input type="text" id="cardholder-name" class="form-control" value="' . HTML::output($this->billing['firstname'] . ' ' . $this->billing['lastname']) . '" required></text></div>
</div>
<div class="separator"></div>
<div>
<label for="card-element" class="control-label">' . $this->app->getDef('text_stripe_credit_card_type') . '</label>
<div id="card-element" class="col-md-5 col-12">
<div class="group">
<label>
<span>Card number</span>
<div id="card-number-element" class="field"></div>
</label>
<label>
<span>Expiry date</span>
<div id="card-expiry-element" class="field"></div>
</label>
<label>
<span>CVC</span>
<div id="card-cvc-element" class="field"></div>
</label>
</div>
</div>
<!-- Used to display Element errors. -->
<div id="card-errors" role="alert" class="messageStackError payment-errors"></div>
</div>
';
$content .= '<input type="hidden" id="city" value="' . $this->billing['city'] . '" />';
$content .= '<input type="hidden" id="line1" value="' . HTML::output($this->customer['street_address']) . '" />';
$content .= '<input type="hidden" id="line2" value="' . HTML::output($this->billing['suburb']) . '" />';
$content .= '<input type="hidden" id="postal_code" value="' . HTML::output($this->customer['postcode']) . '" />';
$content .= '<input type="hidden" id="state" value="' . $this->getZoneName($this->billing['country']['id'], $this->billing['zone_id'], $this->billing['state']) . '" />';
$content .= '<input type="hidden" id="country" value="' . $this->billing['country']['iso_code_2'] . '" />';
$content .= '<input type="hidden" id="email_address" value="' . HTML::output($this->customer['email_address']) . '" />';
$content .= '<input type="hidden" id="customer_id" value="' . HTML::output($customer_id) . '" />';
now the script
<script src="/"></script>
<script>
const stripe = Stripe('{$stripe_publishable_key}');
const elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
const style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
color: '#32325d',
},
};
// Create an instance of the card Element.
const card = elements.create('card', {style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {token, error} = await stripe.createToken(card);
if (error) {
// Inform the customer that there was an error.
const errorElement = document.getElementById('card-errors');
errorElement.textContent = error.message;
} else {
// Send the token to your server.
stripeTokenHandler(token);
}
});
const stripeTokenHandler = (token) => {
// Insert the token ID into the form so it gets submitted to the server
const form = document.getElementById('payment-form');
const hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
</script>
With Jquery the stripe integration works very fine.
I am trying to integrate a script without jquery but I have a problem because the payment is inplete : "status": "requires_payment_method",
I am little blocked because I do not find my error and I follow the stripe tutorial ?
Thank you
[https://stripe./docs/payments/accept-a-payment-charges#web][1]
A part of the most important code:
// have to create intent before loading the javascript because it needs the intent id
$content .= '<input type="hidden" id="intent_id" value="' . HTML::output($stripe_payment_intent_id) . '" />' .
'<input type="hidden" id="secret" value="' . HTML::output($this->intent->client_secret) . '" />';
$content .= '
<div class="form-row">
';
$content .= '
<div id="stripe_table_new_card">
<div><label for="cardholder-name" class="control-label">' . $this->app->getDef('text_stripe_credit_card_owner') . '</label>
<div><input type="text" id="cardholder-name" class="form-control" value="' . HTML::output($this->billing['firstname'] . ' ' . $this->billing['lastname']) . '" required></text></div>
</div>
<div class="separator"></div>
<div>
<label for="card-element" class="control-label">' . $this->app->getDef('text_stripe_credit_card_type') . '</label>
<div id="card-element" class="col-md-5 col-12">
<div class="group">
<label>
<span>Card number</span>
<div id="card-number-element" class="field"></div>
</label>
<label>
<span>Expiry date</span>
<div id="card-expiry-element" class="field"></div>
</label>
<label>
<span>CVC</span>
<div id="card-cvc-element" class="field"></div>
</label>
</div>
</div>
<!-- Used to display Element errors. -->
<div id="card-errors" role="alert" class="messageStackError payment-errors"></div>
</div>
';
$content .= '<input type="hidden" id="city" value="' . $this->billing['city'] . '" />';
$content .= '<input type="hidden" id="line1" value="' . HTML::output($this->customer['street_address']) . '" />';
$content .= '<input type="hidden" id="line2" value="' . HTML::output($this->billing['suburb']) . '" />';
$content .= '<input type="hidden" id="postal_code" value="' . HTML::output($this->customer['postcode']) . '" />';
$content .= '<input type="hidden" id="state" value="' . $this->getZoneName($this->billing['country']['id'], $this->billing['zone_id'], $this->billing['state']) . '" />';
$content .= '<input type="hidden" id="country" value="' . $this->billing['country']['iso_code_2'] . '" />';
$content .= '<input type="hidden" id="email_address" value="' . HTML::output($this->customer['email_address']) . '" />';
$content .= '<input type="hidden" id="customer_id" value="' . HTML::output($customer_id) . '" />';
now the script
<script src="https://js.stripe./v3/"></script>
<script>
const stripe = Stripe('{$stripe_publishable_key}');
const elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
const style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
color: '#32325d',
},
};
// Create an instance of the card Element.
const card = elements.create('card', {style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
event.preventDefault();
const {token, error} = await stripe.createToken(card);
if (error) {
// Inform the customer that there was an error.
const errorElement = document.getElementById('card-errors');
errorElement.textContent = error.message;
} else {
// Send the token to your server.
stripeTokenHandler(token);
}
});
const stripeTokenHandler = (token) => {
// Insert the token ID into the form so it gets submitted to the server
const form = document.getElementById('payment-form');
const hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
</script>
Share
Improve this question
asked Feb 17, 2021 at 14:52
HarryHarry
3973 gold badges4 silver badges15 bronze badges
3 Answers
Reset to default 0Your Javascript code looks to be creating a Stripe Token, which is the legacy approach.
Since you are using PaymentIntent, you should follow this guide (https://stripe./docs/payments/accept-a-payment#set-up-stripe-elements) to mount a card
Element, then use the PaymentIntents's client-secret and call confirmCardPayment()
in your script to "confirm" the PaymentIntent which will result in a charge being created.
Stripe's PaymentIntent object allows you to collect the payment from your customer.
When the SetupIntent is created, it has a status of requires_payment_method
until a payment method is attached.
To successfully set it up, follow official documentation on this website: https://stripe./docs/api/payment_intents/create
requires_payment_method You cannot accept payments using this API as it is no longer supported in India. Please refer to https://stripe./docs/payments for accepting payments.
When using charge
$charge = \Stripe\Charge::create(array(
"amount" => floatval(100)*100,
"currency" => "gbp",`enter code here`
"customer" => $customer_id
));