1651221059
Today, I would like to show you Angular 13 Stripe payment integration example. In this article, we will implement a Stripe payment gateway integration in Angular 13.
Step 1: Create New App
This step is not required; however, if you have not created the angular app, then you may go ahead and execute the below command:
ng new myNewApp
Step 2: Create Stripe App
Here you need to create stripe api key. so let's go to Go to Stripe Account.
Register to create a stripe developer account.
Click on the “Get your test API keys” section.
You will find api key as like below i showed you, This api key we need to use in our code:
pk_test_09GJJuNx4ScHIcoML69tx2aa
Step 3: app/app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
paymentHandler: any = null;
stripeAPIKey: any = 'pk_test_09GJJuNx4ScHIcoML69tx2aa';
constructor() {}
/*------------------------------------------
--------------------------------------------
ngOnInit() Function
--------------------------------------------
--------------------------------------------*/
ngOnInit() {
this.invokeStripe();
}
/*------------------------------------------
--------------------------------------------
makePayment() Function
--------------------------------------------
--------------------------------------------*/
makePayment(amount: any) {
const paymentHandler = (<any>window).StripeCheckout.configure({
key: this.stripeAPIKey,
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken);
alert('Stripe token generated!');
},
});
paymentHandler.open({
name: 'codequs.com',
description: '3 widgets',
amount: amount * 100,
});
}
/*------------------------------------------
--------------------------------------------
invokeStripe() Function
--------------------------------------------
--------------------------------------------*/
invokeStripe() {
if (!window.document.getElementById('stripe-script')) {
const script = window.document.createElement('script');
script.id = 'stripe-script';
script.type = 'text/javascript';
script.src = 'https://checkout.stripe.com/checkout.js';
script.onload = () => {
this.paymentHandler = (<any>window).StripeCheckout.configure({
key: this.stripeAPIKey,
locale: 'auto',
token: function (stripeToken: any) {
console.log(stripeToken);
alert('Payment has been successfull!');
},
});
};
window.document.body.appendChild(script);
}
}
}
Step 4: app/app.component.html
<div class="container">
<h2 class="mt-5 mb-4">Angular 13 Stripe Payment Gateway Example</h2>
<div class="col-md-5 mb-2">
<button (click)="makePayment(15)" class="btn btn-danger btn-block">Pay $15</button>
</div>
<div class="col-md-5 mb-2">
<button (click)="makePayment(25)" class="btn btn-primary btn-block">Pay $25</button>
</div>
<div class="col-md-5">
<button (click)="makePayment(35)" class="btn btn-success btn-block">Pay $35</button>
</div>
</div>
Run Angular App:
All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:
ng serve
Now, Go to your web browser, type the given URL and view the app output:
http://localhost:4200
You can use following stripe testing cards:
Number | Brand | CVC | Date |
---|---|---|---|
4242424242424242 | Visa | Any 3 digits | Any future date |
5555555555554444 | Mastercard | Any 3 digits | Any future date |
I hope it can help you...
#angular #angular13 #stripe
1650681367
Every web developer needs to know how to build an ECommerce Web Shop Application. Learn how to build the best and most modern one simply by watching this course. Our e-commerce application will include modern design and animations, the ability to add and edit products on the go using a Sanity, all advanced cart, and checkout functionalities, and most importantly, the complete integration with Stripe so that you can cover real payments.
In this course, you'll learn:
- Advanced React Best Practices such as folder and file structure, hooks, and refs
- Advanced State Management of the entire application using React Context API
- Next.js Best Practices such as file-based routing and data using server-side rendering and static generation
- You’ll learn how to integrate Stripe to manage payments, products, shipping rates, and the entire checkout process
Most importantly, you’ll learn how to manage the entire content of your app using Sanity. Sanity is the unified content platform that’ll make the making of our entire app possible
Time Stamps 👇
00:00:00 Intro & Setup
00:10:20 Sanity Setup
00:24:33 Homepage
00:40:37 Hook up Sanity
00:54:13 Products
01:06:33 Layout
01:16:24 Product Details
01:42:10 Context Logic
02:02:52 Cart Logic
02:36:52 Stripe
03:09:48 Success Page
03:26:36 Deployment
📚 Materials/References:
GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/ecommerce_sanity_stripe
Styles & Other Code: https://gist.github.com/adrianhajdin/55e019f0ec6a48c0ca6d933d3cf0181c
Assets: https://minhaskamal.github.io/DownGit/#/home
#ecommerce #stripe #fullstack #react #webdev #webdevelopment #webdeveloper
1649898947
Low-code is a software development approach that requires little coding in order to build applications. It is made possible through a low-code platform. Learn how to use low code tools and APIs to build a customer support dashboard. You will learn how create the dashboard using the Appsmith platform, Google Sheet API, and the Stripe API.
🏗️ This course was made possible through a grant from Appsmith. Learn more about Appsmith: https://www.appsmith.com/
#appsmith #google #stripe #api
1649249118
This app was formerly called django-stripe-payments
and has been renamed to avoid namespace collisions and to have more consistency with Pinax. It has once more been renamed to pinax-stripe-light
(package name, though it retains the pinax.stripe.*
Python namespace).
Pinax is an open-source platform built on the Django Web Framework. It is an ecosystem of reusable Django apps and starter project templates. This collection can be found at http://pinaxproject.com.
This app was developed as part of the Pinax ecosystem but is just a Django app and can be used independently of other Pinax apps.
pinax-stripe-light
is a Django app for integrating Stripe webhooks into your project. It also includes from lightweight utilities like template tags to make working with Stripe a bit easier.
See this blog post including a video, or our How to Contribute section for an overview on how contributing to Pinax works. For concrete contribution ideas, please see our Ways to Contribute/What We Need Help With section.
In case of any questions we recommend you join our Pinax Slack team and ping us there instead of creating an issue on GitHub. Creating issues on GitHub is of course also valid but we are usually able to help you faster if you ping us in Slack.
In order to foster a kind, inclusive, and harassment-free community, the Pinax Project has a code of conduct, which can be found here. We ask you to treat everyone as a smart human programmer that shares an interest in Python, Django, and Pinax with you.
For updates and news regarding the Pinax Project, please follow us on Twitter at @pinaxproject and check out our blog.
Download Details:
Author: pinax
Source Code: https://github.com/pinax/pinax-stripe-light
License: View license
1649150520
The official Stripe .NET library, supporting .NET Standard 2.0+, .NET Core 2.0+, and .NET Framework 4.6.1+.
Using the .NET Core command-line interface (CLI) tools:
dotnet add package Stripe.net
Using the NuGet Command Line Interface (CLI):
nuget install Stripe.net
Using the Package Manager Console:
Install-Package Stripe.net
From within Visual Studio:
For a comprehensive list of examples, check out the API documentation. See video demonstrations covering how to use the library.
All of the service methods accept an optional RequestOptions
object. This is used if you want to set an idempotency key, if you are using Stripe Connect, or if you want to pass the secret API key on each method.
var requestOptions = new RequestOptions();
requestOptions.ApiKey = "SECRET API KEY";
requestOptions.IdempotencyKey = "SOME STRING";
requestOptions.StripeAccount = "CONNECTED ACCOUNT ID";
HttpClient
You can configure the library with your own custom HttpClient
:
StripeConfiguration.StripeClient = new StripeClient(
apiKey,
httpClient: new SystemNetHttpClient(httpClient));
Please refer to the Advanced client usage wiki page to see more examples of using custom clients, e.g. for using a proxy server, a custom message handler, etc.
The library automatically retries requests on intermittent failures like on a connection error, timeout, or on certain API responses like a status 409 Conflict
. Idempotency keys are always added to requests to make any such subsequent retries safe.
By default, it will perform up to two retries. That number can be configured with StripeConfiguration.MaxNetworkRetries
:
StripeConfiguration.MaxNetworkRetries = 0; // Zero retries
If you're writing a plugin that uses the library, we'd appreciate it if you identified using StripeConfiguration.AppInfo
:
StripeConfiguration.AppInfo = new AppInfo
{
Name = "MyAwesomePlugin",
Url = "https://myawesomeplugin.info",
Version = "1.2.34",
};
This information is passed along when the library makes calls to the Stripe API. Note that while Name
is always required, Url
and Version
are optional.
The test suite depends on stripe-mock, so make sure to fetch and run it from a background terminal (stripe-mock's README also contains instructions for installing via Homebrew and other methods):
go get -u github.com/stripe/stripe-mock
stripe-mock
Run all tests from the src/StripeTests
directory:
dotnet test
Run some tests, filtering by name:
dotnet test --filter FullyQualifiedName~InvoiceServiceTest
Run tests for a single target framework:
dotnet test --framework netcoreapp2.1
The library uses dotnet-format
for code formatting. Code must be formatted before PRs are submitted, otherwise CI will fail. Run the formatter with:
dotnet format src/Stripe.net.sln
For any requests, bug or comments, please open an issue or submit a pull request.
Download Details:
Author: stripe
Source Code: https://github.com/stripe/stripe-dotnet
License: Apache-2.0 License
1648238160
In this video, we will create a full membership blog with Laravel and add a Stripe payment gateway. Full crud as well different roles for users.
Links:
Blog Template - https://github.com/AngelJayMedia/blog-stripe
Laravel Cashier Docs - https://laravel.com/docs/8.x/billing#retrieving-invoices
Timestamps:
00:00 Introduction
00:03:35 Libraries Explained
00:12:12 Set up and Clone Repository
00:19:30 Create applications Models
00:30:28 Set up User Model and users migration schema
00:37:02 Set up Profile Model and profiles migration schema
00:46:22 Create User policy and register policy
01:00:39 Set up Post model and posts migration schema
01:20:10 Create HasAuthor trait and relations
01:32:40 Create Post policy and register policy
01:48:15 Set up Tag model and tags migration schema
01:58:30 Create HasTags trait and relations
02:10:04 Set up Comment model and comments migration schema
02:27:16 Create HasComments trait and relations
02:34:14 Create Comment policy and register policy
02:41:35 Install Laravel Cashier (Stripe)
02:50:27 Create Stripe products and Plan model
03:01:35 Create Plan seeder
03:07:13 Create User seeder and Profile factory
03:17:20 Create Post seeder and Post factory
03:30:44 Create Tag seeder and Tag factory
03:42:06 Create Comment seeder and Comment factory
03:55:22 Create Membership Controller Route and View
04:09:48 Create Stripe customer on registration
04:20:29 Create "Setup Intent" to charge the customer
04:31:58 Use Billing address and checkout view
04:45:26 Stripe Elements and process form
05:04:11 Create new subscription with Stripe
05:21:21 Sync Customer data with Stripe
05:50:45 Updates and Fixes
05:54:06 Check subscription status and updates
06:13:41 Create LoginResponse and redirect users
06:25:40 Admin routes, Controller and admin layout
06:42:40 Display all users in the admin dashboard
07:00:36 Display all posts in the admin dashboard
07:11:01 Display all tags in the admin dashboard
07:19:20 Display posts according to writer
07:33:10 Display all writers in admin dashboard
07:42:40 Tag CRUD - Tag policy
07:52:30 Tag CRUD - Create method, Route & view
08:05:50 Tag CRUD - Create TagRequest
08:12:10 Tag CRUD - Create Tag job
08:18:20 Tag CRUD - Save Image Service
08:36:05 Tag CRUD - Dispatch Job to create a tag
08:37:40 Tag CRUD - Create Tag observer
08:43:33 Tag CRUD - Edit view and Update method
08:54:00 Tag CRUD - Dispatch Job to update tag
09:07:20 Tag CRUD - Dispatch Job to delete a tag
09:18:40 Post CRUD - Update Post policy
09:25:00 Post CRUD - Install choices.js
09:30:00 Post CRUD - Create view & method
09:49:53 Post CRUD - Create Post Request
09:56:53 Post CRUD - Update & fixes
10:05:12 Post CRUD - Create & dispatch CreatePost job
10:18:40 Post CRUD - Create Post observer
10:21:32 Post CRUD - Edit view and Update method
10:36:08 Post CRUD - Dispatch UpdatePost job
10:45:45 Post CRUD - Dispatch DeletePost job
11:00:39 Livewire Home latest posts
11:08:35 Blade component - Home latest post
11:17:02 Load more button & Post factory slug
11:29:10 Show single post view & method
11:46:05 Create a social share for posts
11:57:20 Add meta tags to show view
12:02:30 Restrict access to posts
12:06:25 Check if Author allowed comments
12:10:28 Nested comments
13:41:50 Display all tags with images
13:48:15 Display all posts of a tag
13:58:25 Read time indicator for posts
14:03:15 Limit to the number of replies
14:09:20 Enable profile images & create custom URL
14:14:22 Update authors profile social links
14:26:16 Authors index view and links to profile
14:44:26 Author profile page with all posts
14:53:40 Sidenav update in Post-side view
14:58:10 Stripe - Cancel Subscription
15:08:55 Stripe - Resume Subscription
15:18:10 Stripe - Trail with payment Upfront
15:27:05 Stripe - Trail without payment Upfront
15:36:55 Stripe - Invoices and end of series
1647437943
We set up the Stripe Webhook to update subscriptions in Firestore. Also, we styled our Vue project with Bootstrap CSS, and we created the Stripe Checkout and Customer Portal Sessions.
Part 1: ☞ https://morioh.com/p/4884f5bbaebb?
#enterflash #stripe #subscriptions #vue #firebase
1647423480
For this first part, we set up the Vue.js and Firebase project with the Stripe extension and Firebase Authentication.
Code GitHub repo: https://github.com/EnterFlash/firebase-vue-subscriptions
1643180400
Learn how to make requests to the Stripe API using the Stripe.net client library. You'll see how to format parameters and pass request body, query string params, and request headers.
Table of contents
00:00 Overview
01:16 API reference
04:10 Create an object passing no params
05:12 Retrieve single object
06:50 Create an object with scalar values
09:06 Create an object with enum values
10:42 Create an object with nested object
13:45 Create an object with a list of strings
15:00 Update an object with scalar values
17:13 Update an object with a list of nested objects
20:41 Retrieve a list of objects
22:50 Retrieve a list filtered by scalar
24:53 Delete an object
26:00 Custom methods overview
26:58 Custom method demo
30:40 Nested service method overview
31:08 Nested service method demo
33:34 Request headers overview
34:40 Request headers demo
39:19 Conclusion
Resources
Official client library: https://github.com/stripe/stripe-dotnet/
Code: https://github.com/stripe-samples/developer-office-hours/blob/master/2020-10-30-client-libraries/dotnet/requests/Program.cs
1643130000
Learn about API keys and how to authenticate requests to the Stripe API using the stripe-node client library. You can set API keys globally or per-request. In this episode, we cover secret keys, public or publishable keys, restricted keys, and webhook signing secrets.
00:00 Overview
00:08 Authorization header
00:18 Types of API keys
00:38 Publishable keys
01:00 Secret keys
01:44 Restricted keys
02:07 Webhook signing secrets
03:33 Roll API keys
04:03 Set API key globally
05:10 Set API key per-request
06:30 Authenticate requests for Stripe Connect globally
09:30 Conclusion
1641294302
Zebra is a library that makes using Stripe with Django even easier.
It's made of:
zebra
, the core library, with forms, webhook handlers, abstract models, mixins, signals, and templatetags that cover most stripe implementations.marty
, an example app for how to integrate zebra, that also serves as its test suite.Pull requests are quite welcome!
pip install django-zebra
settings.py:
INSTALLED_APPS += ("zebra",)
STRIPE_SECRET = "YOUR-SECRET-API-KEY"
STRIPE_PUBLISHABLE = "YOUR-PUBLISHABLE-API-KEY"
# Set any optional settings (below)
3. (optional) ./manage.py syncdb
if you have ZEBRA_ENABLE_APP = True
4. (optional) Add in the webhook urls:
urlpatterns += patterns('',
url(r'zebra/', include('zebra.urls', namespace="zebra", app_name='zebra') ),
)
5. Enjoy easy billing.
ZEBRA_ENABLE_APP
Defaults to False
. Enables Customer, Plan, and Subscription django models, as a part of zebra.ZEBRA_CUSTOMER_MODEL
The app+model string for the model that implements the StripeCustomerMixin. ie "myapp.MyCustomer"
. If ZEBRA_ENABLE_APP
is true, defaults to "zebra.Customer"
.ZEBRA_AUTO_CREATE_STRIPE_CUSTOMERS
Defaults to True
. Automatically creates a stripe customer object on stripe_customer access, if one doesn't exist.Zebra handles all the webhooks that stripe sends back and calls a set of signals that you can plug your app into. To use the webhooks:
Note: The initial Stripe webhook system is being deprecated. See below for a description of Zebra's support for the new system.
Zebra provides:
zebra_webhook_recurring_payment_failed
zebra_webhook_invoice_ready
zebra_webhook_recurring_payment_succeeded
zebra_webhook_subscription_trial_ending
zebra_webhook_subscription_final_payment_attempt_failed
All of the webhooks provide the same arguments:
customer
- if ZEBRA_CUSTOMER_MODEL
is set, returns an instance that matches the stripe_customer_id
, or None
. If ZEBRA_CUSTOMER_MODEL
is not set, returns None
.full_json
- the full json response, parsed with simplejson.So, for example, to update the customer's new billing date after a successful payment, you could:
(assuming you've set ZEBRA_CUSTOMER_MODEL
or are using ZEBRA_ENABLE_APP
):
from zebra.signals import zebra_webhook_recurring_payment_succeeded
def update_last_invoice_date(sender, **kwargs):
customer = kwargs.pop("customer", None)
full_json = kwargs.pop("full_json", None)
customer.billing_date = full_json.date
customer.save()
zebra_webhook_recurring_payment_succeeded.connect(update_last_invoice_date)
Stripe recently updated their webhook implementation (see https://stripe.com/blog/webhooks). Zebra includes an implementation of the new system.
Zebra provides:
zebra_webhook_charge_succeeded
zebra_webhook_charge_failed
zebra_webhook_charge_refunded
zebra_webhook_charge_disputed
zebra_webhook_customer_created
zebra_webhook_customer_updated
zebra_webhook_customer_deleted
zebra_webhook_customer_subscription_created
zebra_webhook_customer_subscription_updated
zebra_webhook_customer_subscription_deleted
zebra_webhook_customer_subscription_trial_will_end
zebra_webhook_customer_discount_created
zebra_webhook_customer_discount_updated
zebra_webhook_customer_discount_deleted
zebra_webhook_invoice_created
zebra_webhook_invoice_updated
zebra_webhook_invoice_payment_succeeded
zebra_webhook_invoice_payment_failed
zebra_webhook_invoiceitem_created
zebra_webhook_invoiceitem_updated
zebra_webhook_invoiceitem_deleted
zebra_webhook_plan_created
zebra_webhook_plan_updated
zebra_webhook_plan_deleted
zebra_webhook_coupon_created
zebra_webhook_coupon_updated
zebra_webhook_coupon_deleted
zebra_webhook_transfer_created
zebra_webhook_transfer_failed
zebra_webhook_ping
Zebra also provides an easy map of all the signals as zebra.signals.WEBHOOK_MAP
, which maps events (charge_succeeded
) to the Zebra signal (zebra_webhook_charge_succeeded
). To assign a handler to all the signals that zebra sends, for example, loop over the items in the map:
for event_key, webhook_signal in WEBHOOK_MAP.iteritems():
webhook_signal.connect(webhook_logger)
The StripePaymentForm sets up a form with fields like the official stripe example.
In particular, the form is stripped of the name attribute for any of the credit card fields, to prevent accidental submission. Media is also provided to set up stripe.js (it assumes you have jQuery).
Use it in a view like so:
if request.method == 'POST':
zebra_form = StripePaymentForm(request.POST)
if zebra_form.is_valid():
my_profile = request.user.get_profile()
stripe_customer = stripe.Customer.retrieve(my_profile.stripe_customer_id)
stripe_customer.card = zebra_form.cleaned_data['stripe_token']
stripe_customer.save()
my_profile.last_4_digits = zebra_form.cleaned_data['last_4_digits']
my_profile.stripe_customer_id = stripe_customer.id
my_profile.save()
# Do something kind for the user
else:
zebra_form = StripePaymentForm()
There are a couple of template tags that take care of setting up the stripe env, and rendering a basic cc update form. Note that it's expected your StripePaymentForm
is called either zebra_form
or form
.
To use in a template:
{% extends "base.html" %}{% load zebra_tags %}
{% block head %}{{block.super}}
{% zebra_head_and_stripe_key %}
{% endblock %}
{% block content %}
{% zebra_card_form %}
{% endblock %}
That's it - all the stripe tokeny goodness happens, and errors are displayed to your users.
Model and Mixin docs coming. For now, the code is pretty self-explanatory, and decently documented inline.
Zebra comes with a manage.py command to clear out all the test customers from your account. To use it, run:
./manage.py clear_stripe_test_customers
It responds to --verbosity=[0-3]
.
Credits
I did not write any of stripe. It just makes me happy to use, and inspired to make better APIs for my users. For Stripe info, ask them: stripe.com
Code credits are in the AUTHORS file. Pull requests welcome!
Download Details:
Author: GoodCloud
Source Code: https://github.com/GoodCloud/django-zebra
License: MIT License
1640675460
Stripe Models for Django.
dj-stripe implements all of the Stripe models, for Django. Set up your webhook endpoint and start receiving model updates. You will then have a copy of all the Stripe models available in Django models, as soon as they are updated!
The full documentation is available on Read the Docs.
2020-08-27
(see API versions)--8<-- "docs/installation.md"
See release notes on Read the Docs.
You can now become a sponsor to dj-stripe with GitHub Sponsors.
We've been bringing dj-stripe to the world for over 7 years and are excited to be able to start dedicating some real resources to the project.
Your sponsorship helps us keep a team of maintainers actively working to improve dj-stripe and ensure it stays up-to-date with the latest Stripe changes. If you use dj-stripe commercially, we would encourage you to invest in its continued development by signing up for a paid plan. Corporate sponsors receive priority support and development time.
All contributions through GitHub sponsors flow into our Open Collective, which holds our funds and keeps an open ledger on how donations are spent.
<style> img[alt="Stripe Logo"] { max-width: 250px; } </style>
Download Details:
Author: dj-stripe
Source Code: https://github.com/dj-stripe/dj-stripe
License: MIT License
1640579231
Stripe hosted a payment page to make payments quickly from customers. Stripe is a PCI Service Provider Level 1 is the high-grade payment processer and the customer information is secure and safe. In this tutorial, we'll learn how to integrate stripe checkout form in Django With 5 Steps
1640571747
Welcome to my Blog, In this article, we will learn how to integrate a stripe payment gateway in the Django project. The Stripe payment gateway has many ways to create payments in our Django project like Charge, Checkout, Transfers, Payouts, and Subscriptions options. In the future, I will definitely target the left of the stripe payment features. I have already set up a new Django project.
1640099599
Build a CRM (Customer Relationship Management tool) using the Retool low-code platform. We will be learning how to use the Google Sheet API, Stripe API, SMTP API as well as a PostgreSQL database.
⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:04:10) Getting started
⌨️ (0:06:24) Getting Data using the Google Sheets API
⌨️ (0:08:57) Creating Tables
⌨️ (0:38:05) Adding Data using the Google Sheets API
⌨️ (1:01:00) Deleting Data using the Google Sheets API
⌨️ (1:05:10) Processing refunds with the Stripe API
⌨️ (1:26:20) Sending emails with SMTP
⌨️ (1:45:21) Migrating to PostgreSQL
🔗 Google sheet data: https://docs.google.com/spreadsheets/d/1aKglh0-w8dwyKssc9CJwKiOqTc-COPCuyx4zXnuv3Wg/edit?usp=sharing
🔗 Postgresql data: https://github.com/harryho/db-samples/blob/master/pgsql/northwind.sql
#googlesheets #postgresql #stripe #api #database