Stripe payment with JMSPaymentBundle "The source parameter is required"

Question

I already integrated JMSPaymentBundle, with paypal every thing works fine! When I tried to change with stripe from this link for JMS and using ruudk/PaymentStripeBundle from github, it's actually the same.

But there is a thing. I'm receiving this error: The source parameter is required

In the issues of the bundle, I found that I must use stripe form

<form action="" 
method="POST">
 <script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
   data-key="MYPUBLISHEDKEY"
   data-amount="999"
   data-name="Demo Site"
   data-description="Widget"
   data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
   data-locale="auto">
 </script>
</form>

This form generates a Token. What I need to know is :

1- Where to put that published token used by JMSPaymentBundle?

2- What action in the form should I do? Is it the same for paypal?

Answer 1

it's hard to say what's going on here but it seems like https://github.com/ruudk/PaymentStripeBundle/ is lacking some necessary documentation.

From what I can tell it's adding a token hidden field to your forms: https://github.com/ruudk/PaymentStripeBundle/blob/master/src/Form/CheckoutType.php#L12

However, the Checkout embed code you're using won't save the token to that field. I don't see any additional Javascript embedded in this library, so you'll need to build your own using the custom Stripe Checkout integration:

https://stripe.com/docs/checkout#integration-custom

Something like this should work:

var handler = StripeCheckout.configure({
  key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: function(token) {
      // NOTE: assuming that the field injected by the library has an ID of "token"--you'll have to check your DOM and possibly adjust this
      var field = document.getElementById('token');
      field.value = token.id;

      // TODO: submit form and send to your backend
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  // Open Checkout with further options:
  handler.open({
    name: 'Stripe.com',
    description: '2 widgets',
    zipCode: true,
    amount: 2000
  });
  e.preventDefault();
});

// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
  handler.close();
});