Asked  7 Months ago    Answers:  5   Viewed   29 times

Here I have the "custom" checkout button for stripe, I was wondering how I make this execute a piece of JavaScript after the checkout process is successful. I would like it to change the "book-appointment-button" style to "block" instead of "none" (I already know how to do this). I am just struggling with how to make it so it triggers said JavaScript after the checkout has been completed if anyone can please help it would be greatly appreciated. Thanks in advance.

<!-- Start Of Stripe Payment -->
<script src="https://checkout.stripe.com/checkout.js"></script>

<button id="customButton">Purchase</button>

<script>
    var handler = StripeCheckout.configure({
        key: 'hidden',
        image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
        locale: 'auto',
        token: function(token) {
            // You can access the token ID with `token.id`.
            // Get the token ID to your server-side code for use.
        }
    });
    document.getElementById('customButton').addEventListener('click', function(e) {
        // Open Checkout with further options:
        handler.open({
            name: 'DenchCodeLTD',
            description: '2 widgets',
            zipCode: true,
            currency: 'gbp',
            amount: 2000
        });
        e.preventDefault();
    });
    // Close Checkout on page navigation:
    window.addEventListener('popstate', function() {
        handler.close();
    });
</script>

<!-- End Of Stripe Payment -->

<button id="book-appointment-submit" type="button" class="btn btn-success" style="display:none">
    <span class="glyphicon glyphicon-ok"></span>
    <?php echo (!$manage_mode) ? $this->lang->line('confirm') : $this->lang->line('update'); ?>
</button>

 Answers

86

Stripe will run the token callback when the checkout is complete.

This is documented on Stripe's Checkout, but it is kinda hidden in the configuration options. Anyway, happy coding :)

Wednesday, March 31, 2021
 
John_BSDthos
answered 7 Months ago
31

Code that has worked for me (must include script for jQuery in header not footer)

<script src="https://checkout.stripe.com/checkout.js"></script>
<form id="myForm">
    <input type="hidden" id="message" value="Hello, world"/></p>
    <input type="hidden" id="amount" value="10.00" /></p>
   <p><button type="submit" id="customButton">Pay</button></p>
</form>
<script> 
// checkout handler
var handler = StripeCheckout.configure({
    key: '<YOUR PUBLIC KEY>',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    token: function(token) {
        /* Use the token to create the charge with a server-side script.
         You can access the token ID with `token.id`
         Pass along various parameters you get from the token response
         and your form.*/                    
        var myData = {
                token: token.id,
                email: token.email,
                amount: Math.round($("#amount").val() * 100),
                message: $("#message").val()
        };
        /* Make an AJAX post request using JQuery,
           change the first parameter to your charge script*/
        $.post("<YOUR ROUTE TO charge.php", myData,function (data) {
            // if you get some results back update results
            $("#myForm").hide();
            $(".results").html("Your charge was successful");
        }).fail(function () {
            // if things fail, tell us
            $(".results").html("I'm sorry something went wrong");
        })
    }
});
$('#myForm').on('submit', function (e) {
    // Open Checkout with further options
    handler.open({
        name: 'Stripe.com',
        email: 'test@test.com',
        description: '2 widgets',
        amount: Math.round($("#amount").val() * 100)
    });
    e.preventDefault();
});
// Close Checkout on page navigation
$(window).on('popstate', function () {
    handler.close();
});
</script> 

Hope this is of help to someone, experiencing same issue.

Friday, May 28, 2021
 
Domiik
answered 5 Months ago
12

Use the onsubmit event to execute JavaScript code when the form is submitted. You can then return false or call the passed event's preventDefault method to disable the form submission.

For example:

<script>
function doSomething() {
    alert('Form submitted!');
    return false;
}
</script>

<form onsubmit="return doSomething();" class="my-form">
    <input type="submit" value="Submit">
</form>

This works, but it's best not to litter your HTML with JavaScript, just as you shouldn't write lots of inline CSS rules. Many Javascript frameworks facilitate this separation of concerns. In jQuery you bind an event using JavaScript code like so:

<script>
$('.my-form').on('submit', function () {
    alert('Form submitted!');
    return false;
});
</script>

<form class="my-form">
    <input type="submit" value="Submit">
</form>
Thursday, June 3, 2021
 
Hilmi
answered 5 Months ago
85

There are three different ways to create a charge:

  • with the source parameter only. In this case, source needs to be a token or source ID (created by Checkout or Stripe.js), i.e. a string that starts with tok_ or src_.

  • with the customer parameter only. In this case, customer needs to be a customer ID, i.e. a string that starts with cus_. The customer's default payment source will be charged.

  • with both the customer and source parameters. In this case, customer needs to be a customer ID as in the previous case, but source should be the ID of a payment source that is already attached to the customer. Payment sources can be cards (ID starts with card_), bank accounts (ID starts with ba_) or sources (ID starts with src_).

In your case, you're passing a token ID in the source parameter along with a customer ID in the customer parameter.

If this is a new card, you should first use the token to create a card on the customer, then create the charge with the card ID. If the card was already saved for this customer, then you don't need to collect the card information again (and thus don't need to create a token at all).

Tuesday, June 29, 2021
 
Hugo
answered 4 Months ago
78

Have a look at bringing the browser to the server, Rhino, and Use Microsoft's IIS as a Java servlet engine.

The first link is from John Resig's (jQuery's creator) blog.

Update August 2 2011

Node.js is coming to Windows.

Monday, August 23, 2021
 
MasterJoe
answered 2 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :