Accept payment methods from around the globe with a single secure, embeddable UI component. This guide walks you through how to get one-time payments and sell fixed-price subscriptions and provides an example of a well-working integration. Using the codes and documentation in this example, you can customize it according to your needs and integrate it into your own application. You will use Stripe Elements to create a custom payment form that you embed in your app.
Live demo for Checkout --> https://techtolia.com/Stripe/New/
Live demo for Subscriptions --> https://techtolia.com/Stripe/New/Subscriptions/
Learn how to embed a custom Stripe payment form in your website or application. The client-side and server-side code builds a checkout form with Elements to complete a payment using various payment methods.
The Payment Element is an embeddable UI component that lets you accept up to 25+ payment methods with a single integration (Payment methods: ACH Direct Debit, Affirm, Afterpay and Clearpay, Alipay, Apple Pay, Bacs Direct Debit, Bancontact, Bank transfers, BECS direct debit, Boleto, BLIK, Cards (American Express, China UnionPay (CUP), Discover & Diners, Japan Credit Bureau (JCB), Mastercard, Visa, Cartes Bancaires (CB)), EPS, FPX, Giropay, Grabpay, Google Pay, iDEAL, Klarna, Konbini, Link, OXXO, P24, PayNow, PromptPay, SEPA debit, Sofort, WeChat Pay).
Whether you’re just collecting card payments or dozens of payment methods, the Payment Element is the easiest way to build an embedded and customized payments experience.
Automatically adjusts input fields to collect information based on the payment method and country.
Dynamically sorts payment methods based on a customer’s locale and location to optimize for conversion.
Reduces friction for card payments with input validation, masking, styling and error handling.
Adds new payment methods without any front-end changes, and gives you access to new payment methods as soon as Stripe supports them.
The application supports 3D Secure 2 for card payments.
Elements are completely customizable. You can style Elements to match the look and feel of your site, providing a seamless checkout/subscription experience for your customers.
In order to use these payment methods, you must first activate them from your Stripe Dashboard. Each payment method has a different Merchant Country requirement, and the currencies you can accept with each are different.
| PAYMENT METHOD | CURRENCIES | MERCHANT COUNTRY |
| ACH Direct Debit | USD | US |
| Bacs Direct Debit | GBP | UK |
| BECS direct debit | AUD | AU |
| SEPA debit | EUR | AU, CA, EU, HK, JP, MX, NZ, SG, US |
| Bancontact | EUR | AU, CA, EU, HK, JP, MX, NZ, SG, US |
| Bank transfers | EUR, GBP, JPY, MXN | EU, JP, MX, UK |
| BLIK | PLN | AT, BE, BG, CY, CZ, DE, DK, EE, ES, FI, FR, GI, GR, HR, HU, IE, IS, IT, LI, LT, LU, LV, MT, NL, NO, PL, PT, RO, SE, SI, SK |
| EPS | EUR | AU, CA, EU, HK, JP, MX, NZ, SG, US |
| FPX | MYR | MY |
| Giropay | EUR | AU, CA, EU, HK, JP, MX, NZ, SG, US |
| iDEAL | EUR | AU, CA, EU, HK, JP, MX, NZ, SG, US |
| Prezewly24 (P24) | EUR, PLN | AU, CA, EU, HK, JP, MX, NZ, SG, US |
| Sofort | EUR | AU, CA, EU, HK, JP, MX, NZ, SG, US |
| Affirm | USD | US |
| Afterpay and Clearpay | AUD, CAD, NZD, GBP, USD, EUR |
AU, CA, ES, FR, IE, NZ, UK, US |
| Klarna | DKK, EUR, GBP, NOK, SEK, USD |
AT, BE, DE, DK, EE,ES, FI, FR, GR, IE, IT, LT, LV, NL, NO, SE, SI, SK, UK, US |
| Cards | Most currencies | Most locations |
| Link | All currencies supported on cards |
Most locations |
| PayNow | SGD | SG |
| PromptPay | THB | TH |
| Boleto | BRL | BR |
| Konbini | JPY | JP |
| OXXO | MXN | MX |
| Alipay | AUD, CAD, CNY, EUR, GBP, HKD, JPY, MYR, NZD, SGD, USD |
AU, CA, EU, HK, JP, NZ, SG, US |
| GrabPay | MYR, SGD | MY, SG |
| WeChat Pay | CNY, AUD, CAD, EUR, GBP, HKD, JPY, SGD, USD, DKK, NOK, SEK, CHF (depending on business location) |
AU, CA, EU, HK, JP, SG, UK, US |
Cards: American Express, China UnionPay (CUP), Discover & Diners, Japan Credit Bureau (JCB), Mastercard, Visa, Cartes Bancaires (CB)
Purchase on CodeCanyon
-- Purchase for ASP.NET Web Forms on CodeCanyon -- Target Framework: .NET Framework 4.7.2 - Language: c#
-- Purchase for ASP.NET Core MVC on CodeCanyon -- Target Framework: .NET Core – ASP.NET Core 3.1 – Language: c#
What are the core features of Payment Element?
With Payment Element, Stripe is launching a new generation of Elements (see: https://stripe.com/payments/elements) Previous to the Payment Element, merchants would need to build and maintain a new integration for each separate payment method. Because this is no longer necessary, you would save significant time and resources by utilizing the Payment Element.
See some core features of Payment Element below:
- Support for multiple payment methods via a single Elements integration
- It surfaces relevant payment options to each buyer through sorting logic based on customer country location (derived from IP address) and preferred language (derived from browser locale)
- It is localized for 42 locales: https://stripe.com/docs/js/appendix/supported_locales
- It can be styled to merchant brand (font, colors, spacing, etc.)
- It is mobile responsive
- It has in-built input validations
- It is PCI-DSS Compliant
How do I use the Payment Element to offer all the payment methods Stripe supports?
To use the Payment Element to offer all the payment methods Stripe supports, you can pass an array of payment methods to payment_method_types when you create a PaymentIntent. However, you can’t pass all supported payment methods at the same time because some payment methods require different currencies. You can only create a PaymentIntent with payment methods that support the same currency. Please see the Payment method and product support table here: https://stripe.com/docs/payments/payment-methods/integration-options
Configure payment methods
With automatic_payment_methods enabled, Stripe automatically detects the payment methods relevant to your customer. Card payments are enabled by default but you can enable and disable other payment methods in the Stripe Dashboard. Before the payment form is displayed, Stripe evaluates the currency, payment method restrictions, and other parameters to determine the list of supported payment methods. Payment methods that increase conversion and that are most relevant to the currency and customer’s location are prioritized. Lower priority payment methods are hidden beneath an overflow menu.
What is Strong Customer Authentication?
Strong Customer Authentication (SCA) is a new European regulatory requirement to reduce fraud and make online payments more secure. To accept payments and meet SCA requirements, you need to build additional authentication into your checkout flow.
Banks will need to start declining payments that require SCA and don’t meet these criteria. Although the regulation was introduced on 14 September 2019, we expect these requirements to be enforced by regulators over the course of 2020 and 2021.
3D Secure 2—the new version of the authentication protocol rolling out in 2019—will be the main method for authenticating online card payments and meeting the new SCA requirements. This new version introduces a better user experience that will help minimise some of the friction that authentication adds into the checkout flow.
The application supports 3D Secure 2
The Payment Intents API that uses Stripe’s SCA logic to apply the right exemption and trigger 3D Secure when necessary.
The application uses the Payment Intents API
Apple Pay and Google Pay
You can offer these payment methods on their associated platforms when you pass the card type.
For most users, the Payment Element is the best option to process cards. The integration effort is the same as the Card Element and it supports all the common payment flows. It also gives you instant access to additional payment methods, including Apple Pay and Google Pay.
Faster checkout with Link
Link autofills your customers’ saved information in a few simple steps. Your customers’ data is encrypted to keep it secure and, as a certified PCI Service Provider Level 1, Link meets the highest level of certification available in the payments industry.
A customer who visits a business that accepts Link can make a payment with the information they stored in Link by authenticating with an SMS code. After the customer authenticates, Link loads their billing, shipping, and payment details, and then they can pay with one click.
Customers can change their preferred Link payment details, add new cards, or change their address without you needing to manage the changes. For example, if a customer switches from a debit card to a credit card, Link handles the update and automatically applies the changes to your saved link PaymentMethod.
Top comments (0)