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>

• javascript
• php
• stripe-payments

3 Answers 3

Your 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
));