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 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 . Alternatively you can also use the CDN links of JQuery and Syncfusion.
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.
Set your Publishable key and Secret keys
In the page head, you can include the publishable key as follows:
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.
Then, create the HTML elements with Stripe APIs, for the purpose of validation. Refer the following code example.
In the <script> section initialize the MaskEdit and Button controls, and write the definition for Stripe Response Handler as follows.
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:
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.
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.
This page will automatically be redirected to the sign-in page in 10 seconds.