We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Processing Payment using Stripe and Syncfusion JS Component

Stripe is a quick and secure way to accept credit or debit card payments, over the internet. Integrate Stripe account into your website to accept payments. You can use the EJ components along with Stripe’s APIs in the payment form, to accept the card details for processing payments.

You can start using Stripe by creating an account in the Stripe website. Create an account and get your API keys. Used here is a test Stripe account and test API keys to deal with the example. To start with you need JQuery Library and Stript.NET dll. You can download the attached project from the bottom and get the dll from the bin folder of Stript.NET dll, or it can be included using NuGet, Stripe.js and Syncfusion EJ Library. You can download EJ Library from here. Alternatively you can also use the CDN links of JQuery and Syncfusion.

Stripe.JS

Stripe.js makes a request to the stripe server in client-side and responds with a token that identifies your credit information. You need to include the following script file in the <head> section.

JavaScript

Set your Publishable key and Secret keys

In the page head, you can include the publishable key as follows:

Stripe.setPublishableKey('Your_Publishable_Key);

In the web.config file under <appsettings>, you need to set the secret key as follows:

<add key="StripeApiKey" value="Your_Secret_Key" />

Create your Payment form

While creating payment form, you can use the Syncfusion EJ components, such as MaskEdit and Button. MaskEdit can be used for specifying the credit card number and CVC number, while EJ Button can be used to submit the payment form. To include the Syncfusion components, you must add the necessary script and theme files in the <head> section. Refer the following code example.

HTML

Then, create the HTML elements with Stripe APIs, for the purpose of validation. Refer the following code example.

HTML

In the <script> section initialize the MaskEdit and Button controls, and write the definition for Stripe Response Handler as follows.

JavaScript

Handle Payment Operations in server-side code

Stripe.Net needs you to identify your account in Stripe by setting your secret key that you have already specified in web.config file. Then, you have to write the post action that handles the form postback. Open PaymentController and add a new action. Name it "Buy" with [httpPost] attribute. The full definition of the Buy() action is as follows:

C#

As you can see, you get the “StripeToken hidden field value to be used in your request. After getting the token, all you need to do is determine the amount to be charged and pass the added Token id to the StripeChargeCreateOptions initializer. Here $10 is specified as the amount to be charged.

var stripeCharge = chargeService.Create(myCharge);

Now, you can be able to see that the payment is received in the Payments page of your Stripe account. In this example, you are redirected to another page that informs you that the payment has been done successfully. You can download the complete sample from the following location.

Sample Location

Using PHP

Stripe payment process can also be handled using PHP. Embedding Syncfusion EJ components in the payment form creation process is the same as MVC. Only the payment handling process differs. You can download the PHP sample from the following location.

Stripe PHP sample

Article ID: Published Date: Last Revised Date: Platform: Control:
2621 11/12/2014 11/12/2014 ASP.NET MVC Button
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon