Rodney Vg

Rodney Vg

1566879051

Angular 8 – Stripe Payment Gateway Example

Stripe payment gateway integration with the angular 8 application is very easy. There are lots of packages available for the stripe and angular but, we are going to show you, how easily you can handle stripe payment gateway in Angular 8 application without additional Angular 8 library for Stripe payment gateway.

Before start Stripe integration in Angular 8. We need a Angular 8 Project. If you don’t know how to create a new angular 8 project. Follow this tutorial.

Stripe offer two way to interact with Stripe server using JS.

  • Default Stripe form.
  • Custom Stripe Form.

Default Stripe Form gives us the easiest and safest way to create a token.

So, let’s start with ‘Default Stripe Form’

First of all, we need to add a stripe checkout script which will highlight the global variable stripecheckout.

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

The second way to include it via component.

I will prefer the second method because in this method the stripe will load when we really need it.

Open the app.component.ts file and add the below method on it

loadStripe() {
      
    if(!window.document.getElementById('stripe-script')) {
      var s = window.document.createElement("script");
      s.id = "stripe-script";
      s.type = "text/javascript";
      s.src = "https://checkout.stripe.com/checkout.js";
      window.document.body.appendChild(s);
    }
}

Next, Call the above method from ngOnInit method like below

ngOnInit() {
    this.loadStripe();
}

The loadStripe the method will add the script dynamically when the component will load.

Next, Create a new method calledpaywhich will open the stripe payment form.

pay(amount) {   
  
    var handler = (window).StripeCheckout.configure({
      key: 'pk_test_aeUUjYYcx4XNfKVW60pmHTtI',
      locale: 'auto',
      token: function (token: any) {
        // You can access the token ID with `token.id`.
        // Get the token ID to your server-side code for use.
        console.log(token)
        alert('Token Created!!');
      }
    });
  
    handler.open({
      name: 'Demo Site',
      description: '2 widgets',
      amount: amount * 100
    });
  
}

Next, We need to add the button to our component’s template. Open the app.component.html file and put the below HTMLWe have two ways to load this JS.

In the first method we need to add the script tag to theindex.htmlfile.


  ## Stripe Checkout

  
    
      Pay $20
    
    
      Pay $30
    
    
      Pay $50
       
  
  
      Try it out using the test card number **4242 4242 4242 4242**, a random three-digit CVC number, any expiration date in the future, and a random five-digit U.S. ZIP code.
  


After the above changes our app.component.ts file will looks like this

import { Component, OnInit } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  
    
  constructor() { }
  handler:any = null;
  ngOnInit() {
  
    this.loadStripe();
  }
  
  pay(amount) {   
  
    var handler = (window).StripeCheckout.configure({
      key: 'pk_test_aeUUjYYcx4XNfKVW60pmHTtI',
      locale: 'auto',
      token: function (token: any) {
        // You can access the token ID with `token.id`.
        // Get the token ID to your server-side code for use.
        console.log(token)
        alert('Token Created!!');
      }
    });
  
    handler.open({
      name: 'Demo Site',
      description: '2 widgets',
      amount: amount * 100
    });
  
  }
  
  loadStripe() {
      
    if(!window.document.getElementById('stripe-script')) {
      var s = window.document.createElement("script");
      s.id = "stripe-script";
      s.type = "text/javascript";
      s.src = "https://checkout.stripe.com/checkout.js";
      s.onload = () => {
        this.handler = (window).StripeCheckout.configure({
          key: 'pk_test_aeUUjYYcx4XNfKVW60pmHTtI',
          locale: 'auto',
          token: function (token: any) {
            // You can access the token ID with `token.id`.
            // Get the token ID to your server-side code for use.
            console.log(token)
            alert('Payment Success!!');
          }
        });
      }
        
      window.document.body.appendChild(s);
    }
  }
}

You have successfully integrated the strip with angular. With the above integration, you will be able to generate tokens. Now you need to code some server-side code to catch this payment.

For server-side payment capture, visit https://stripe.com/docs/api/charges/create

Running application:

Run the application usingng serve --oand you should see three payment button, click on any one will appear stripe payment popup. Congrats!! See, it was easy.

Our Application will look like this

Live Demo

Recommended Reading

Implementing Feature Flags in an Angular

Angular Material Table With Paging, Sorting And Filtering

Reactive Template-Driven forms with Angular

Reactive form programming in Angular 7

NgRx Testing - The Complete Guide

Listen Changes In Reactive Form Controls Using valueChanges In Angular

7 Ways to Make Your Angular App More Accessible

Angular RxJS: Observables, Observers and Operators Introduction

The Pros and Cons of Angular Development

#angular #angular-js #javascript

What is GEEK

Buddha Community

Angular 8 – Stripe Payment Gateway Example

Stripe Payment Gateway Integration Example In Laravel 8

In this post i will share you stripe payment gateway integration example in laravel 8, stripe payment gateway is integrated in many website for payment collection from client, In this time many e-commerce website and other shopping websites are use stripe payment gateway.

So, here we will learn stripe payment gateway integration in laravel 8.

Read More : Stripe Payment Gateway Integration Example In Laravel 8

https://websolutionstuff.com/post/stripe-payment-gateway-integration-example-in-laravel-8


Read Also : How To Integrate Paypal Payment Gateway In Laravel

https://websolutionstuff.com/post/how-to-integrate-paypal-payment-gateway-in-laravel

#stripe payment gateway integration example in laravel 8 #laravel 8 stripe payment gateway integration example #stripe payment gateway integration in laravel 8 #stripe payment gateway #laravel8 #payment gateway

Einar  Hintz

Einar Hintz

1602564925

Razorpay Payment Gateway Integration in ASP.NET MVC

In this article, you will learn Razorpay Payment Gateway Integration in ASP.NET MVC web application or an eCommerce website using C#. With Razorpay, you have access to all payment modes, including credit and debit cards, UPI, and popular mobile wallets.

To check the Razorpay Payment Gateway demo, please click here:

How to integrate Razorpay Payment Gateway in ASP.NET

The Razorpay Payment Gateway enables you to accept payments via debit card, credit card, net banking (supports 3D Secure), UPI, or through any of our supported wallets. Refer to the Payment Methods section for a list of payment methods we support.

Find the below steps to integrate Razorpay in your website:-

#asp.net #how to #mvc #razorpay payment gateway #razorpay payment gateway demo #razorpay payment gateway documentation #razorpay payment gateway integration #razorpay payment gateway integration in asp.net c#

Linda John

Linda John

1613390985

Crypto Payment Gateway Services assist in the smooth execution of Transactions

As business firms keep expanding their operations, the need for a payment gateway increases with every passing day. It offers a mechanism for accepting transactions made in any Cryptocurrency by the users.

A Crypto payment gateway is highly secure, prevents the chances of chargeback frauds, can be used for processing peer to peer transactions, and is completely immutable.

Using cryptocurrencies is beneficial as it can be exchanged 24x7, eliminates the role of third parties, low transaction fees when compared to debit and credit cards, and eliminates the chance of fraud.

The Typical Features of a Cryptocurrency Payment Gateway are

  • Support for the major cryptos, fiat currencies, and stablecoins.
  • Safety measures like two-factor authentication, jail login, cross-site request forgery protection, and server-side request forgery protection.
  • 24x7 technical support is provided in numerous languages.
  • Has plugins integrated with e-commerce platforms.
  • Free deposits and withdrawals of cryptos by the users.
  • Access to transaction history for the users that helps in real-time monitoring of their payments.
  • An integrated referral program or an affiliate program where rewards can be earned by existing users for referring new users to the crypto payment gateway.
  • Cold storage facilities where funds of the users can be backed up securely. An offline vault is also available for safeguarding digital assets.
  • Compliance with the regulations of GAP600 that guarantees the instant execution of transactions made in Cryptocurrencies.
  • Integration with POS (Point of Sale) systems where payments can be made in cryptos for purchasing goods and services.

The Process that users have to implement while using a Cryptocurrency Payment Gateway

  • The user has to send information about the amount of cryptos that he is willing to pay.
  • The status of the transaction will display on the screen and he has to press the confirm option.
  • The payment will be confirmed after a few seconds.
  • The user can see the details of the transaction executed like the amount, time, and the party to whom the payment has been made.
  • His account balance will be updated immediately.
    In this digital era, obtaining Crypto payment gateway services is highly necessary and inevitable.

#crypto payment gateway services #crypto payment gateway #payment gateway services #cryptocurrency payment gateway

Clara  Gutmann

Clara Gutmann

1598716260

Angular 8 CRUD Example | Angular 8 Tutorial For Beginners

Angular 8 CRUD is a basic operation to learn Angular from scratch. We will learn how to build a small web application that inserts, read data, update and delete data from the database. You will learn how to create a MEAN Stack web application. In this Angular 8 Tutorial Example, you will learn a new framework by building a crud application.

New features of Angular 8

You check out the new features in brief on my  Angular 8 New Features post.

I have designed this Angular 8 CRUD Tutorial, especially for newcomers, and it will help you to up and running with the latest version of Angular, which is right now 8.

#angular #angular 8 #angular 8 crud

I am Developer

1610191977

Angular 11 Google Social Login Example

Angular 9/10/11 social login with google using angularx-social-login library example. In this tutorial, i will show you step by step on how to implement google social login in angular 11 app.

And also, this tutorial will show you How to login into Angular 10/11 application with google using angularx-social-login library in angular 11 app.

Google Login Integration In Angular 11 App

  • Step 1 - Create New Angular App
  • Step 2 - Install Social Login Library
  • Step 3 - Add Code on App.Module.ts File
  • Step 4 - Add Code on View File
  • Step 5 - Add Code On App.Component ts File
  • Step 6 - Start the Angular Google Login App

https://www.tutsmake.com/angular-11-google-social-login-example/

#angular 11 google login #angular 11 social-login example #login with google button angular 8/9/10/11 #angular 10/11 login with google #angular 10 social google login #angular social login google