Create a cutom form to accept credit card with Stripe

Question

EDIT: I found a solution, see my comment.

I try to understand how to make a cutom form with informations like: credit card number, expiration, cvc, name and postal code, get all these information and trigger a payment.

I don't want to use the integration of stripe. So i found this page on stripe: https://stripe.com/docs/payments/accept-a-payment In this page we can learn how to create a form that is generated by Stripe with the DIV card-element:

<form id="payment-form">
  <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>

  <button id="submit">Pay</button>
</form>

In the doc we can see examples made by stripe: https://stripe.dev/elements-examples/ i use sample 2 Example 2 shows a "floaty-label" form that uses individual cardNumber, cardExpiry, and cardCvc Elements with a custom web font.

We can get the js file and css file and here the common code: https://github.com/stripe/elements-examples/blob/master/js/index.js

But i don't understand, in the sample2 the common code use stripe.createToken and in the doc they use confirmCardPayment

stripe.confirmCardPayment(clientSecret, {
    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);
    } 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.
      }
    }

i don't know how to get my informations (price, postal code, credit card number, expiration, cvc) and trigger the payment. I'm lost.

Please help, thanks.

I found a solution, in this thread: https://stackoverflow.com/questions/42962752/creating-stripe-token-using-separate-elements so i used: stripe.createToken(cardNumber).then(doSomething); and it works. — Alexking2005, Feb 23 '20 at 17:13
Because collecting payment details yourself will soon no longer be possible due to the new compliance I talked about. — Jesse Schokker, Feb 24 '20 at 14:30

score 0 · Answer 1 · answered Feb 23 '20 at 11:25

0

Because Stripe needs to meet the requirements of new data protection regulation, you are no longer able to retrieve form data. The data is instead sent straight to Stripe and you receive a secret client token that represents that data.

answered Feb 23 '20 at 11:25

Jesse Schokker

896
7
19

Create a cutom form to accept credit card with Stripe

1 Answers1