CODEWITHSUNDEEP
meteorstripe-payments
Alon Gutman
Alon Gutman

Reputation: 875

Using Stripe payment form in Meteor

I'm trying to use Strip Payment Form in Meteor:

When putting the Stripe form:

<form action="" method="POST">
 <script
   src="https://checkout.stripe.com/v2/checkout.js" class="stripe-button"
   data-key=x
   data-amount="2000"
   data-name="Demo Site"
   data-description="2 widgets ($20.00)"
   data-image="/128x128.png">
 </script>

It is not working,

I get it that Meteor doesn't run script in the .html files. And that I can use the Stripe.js.

But is there a way to use the Form instead of dealing with the Stripe.js?

Upvotes: 5

Views: 3162

Answers (1)

Harry Love
Harry Love

Reputation: 1910

I assume you're talking about Stripe Checkout. See the section on Custom Buttons.

Add the script tag for Stripe Checkout in the <head> of your template file.

<head>
    <script src="https://checkout.stripe.com/v2/checkout.js"></script>
</head>

Then add a button, anchor, or other clickable tag to your template.

<template name="payment">
    <button>Pay</button>
</template>

Then add an event to open the form in Stripe's modal window when your button is clicked.

Template.payment.events({
    'click button': function(e) {
        e.preventDefault();

        StripeCheckout.open({
            key: 'YOUR PUBLIC KEY',
            amount: 5000,
            name: 'The Store',
            description: 'A whole bag of awesome ($50.00)',
            panelLabel: 'Pay Now',
            token: function(res) {
                // Do something with res.id
                // Store it in Mongo and/or create a charge on the server-side
                console.info(res);
            }
        });
    }
});

Stripe will use the "token" function as its callback when the response is returned. The id attribute of that response object is the credit card token, which you use to charge the customer.

Upvotes: 14

Related Questions