Buy Now
Sign in

Stripe integration with Custom Button

indiana71 , January 27 2020, 17:41
I
indiana71 50
January 27 2020, 17:41 #390937
Hi all,
I'm integrating Stripe and to do so I created a button with the following code that I founded on Stripe Dashboard => Product => Checkout Snipped Generator.
<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
id="checkout-button-sku_FwsevWkNqQUDXH"
role="link"
>
Checkout
</button>

<div id="error-message"></div>

<script>
(function() {
var stripe = Stripe('pk_test_xxxxx');

var checkoutButton = document.getElementById('checkout-button-sku_FwsevWkNqQUDXH');
checkoutButton.addEventListener('click', function () {
// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
items: [{sku: 'sku_FwsevWkNqQUDXH', quantity: 1}],

// Do not rely on the redirect to the successUrl for fulfilling
// purchases, customers may not always reach the success_url after
// a successful payment.
// Instead use one of the strategies described in
// https://stripe.com/docs/payments/checkout/fulfillment
successUrl: 'https://mysite/success',
cancelUrl: 'https://mysite/canceled',
})
.then(function (result) {
if (result.error) {
// If `redirectToCheckout` fails due to a browser or network
// error, display the localized error message to your customer.
var displayError = document.getElementById('error-message');
displayError.textContent = result.error.message;
}
});
});
})();
</script>
I modified the code, extracting only the function:
<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<script>

var stripe = Stripe('pk_test_xxxxx');

// When the customer clicks on the button, redirect
// them to Checkout.
stripe.redirectToCheckout({
items: [{sku: 'sku_FwsevWkNqQUDXH', quantity: 1}],

// Do not rely on the redirect to the successUrl for fulfilling
// purchases, customers may not always reach the success_url after
// a successful payment.
// Instead use one of the strategies described in
// https://stripe.com/docs/payments/checkout/fulfillment
successUrl: 'https://mysite/success?session_id={CHECKOUT_SESSION_ID}',
cancelUrl: 'https://mysite/cancel',
submitType: 'pay',
customerEmail: '<?=$this->data['contactEmailAddress']?>',
clientReferenceId: '<?=$this->data['unique_id']?>',
});

</script>


Then I put this code on Chronoform V6 form, on Submit section as custom code.
The problem is the following: all works well when I use preview page on Administrative Chronoform side, but the redirect doesn't work on frontend.
The site not redirect to Stripe payment form.
Someone have some solution?
I
indiana71 50
January 27 2020, 17:54 #390939
The answer that is given to me by js.stripe.com is 304 In Cache, as if the site is not really opened because it is already present in the cache.
How do I force to say that the page cache has expired?
I'm using MijoSEF.
I
indiana71 50
January 27 2020, 18:06 #390940
Also if I delete the cache, I had the same behaviour: the page is loaded, but with no redirect to Stripe site.
If I use the on Preview form, It works correctly
healyhatman 9
January 27 2020, 22:39 #390943
That script stuff is javascript, you can't just dump it in a "custom code" block in your submit event. Are there any errors in the javascript console?
Web developer at SkySpider.com.au - I DO NOT work for ChronoEngine!
Donations: paypal.me/healyhatman
Professional Work: kamron@skyspider.com.au
Custom CF / CC Plugins and Extensions: skyspider.com.au/store
I
indiana71 50
January 28 2020, 06:31 #390949
None. I check.
How I can change it in other language?
Or... How I can use as is?
The strange thing is that in administrative side it works.... Maybe some kind of cache interfere with it, but I don't found it
healyhatman 9
January 28 2020, 06:33 #390950
Except for the last one, those all sound like questions for the Stripe team.
The last one I can't help you with much either unless you can come up with more than just "not working". Try disabling cache and seeing if it works, let us know of any errors in console, or in the Network tab of the dev tools when you click it.
Web developer at SkySpider.com.au - I DO NOT work for ChronoEngine!
Donations: paypal.me/healyhatman
Professional Work: kamron@skyspider.com.au
Custom CF / CC Plugins and Extensions: skyspider.com.au/store
I
indiana71 50
January 28 2020, 19:03 #390953
Your right!
just "not working" is unuseful.
The problem was caching of javascript.
stripe.js MUST NOT BE cached
The code that I posted works well to take single payments from stripe.
Then you must create an IPN file.
I use JCH Optimize Pro as caching system that need to configure as following to works well for stripe
Schermata_2020-01-28_alle_19.53.51.png
Attachments
Schermata_2020-01-28_alle_19.53.51.png
Schermata_2020-01-28_alle_19.53.51.png
(277.96 KiB)
94 Downloads/Views