DEV Community: mattling_dev

Localized Prices with Checkout

mattling_dev — Wed, 02 Nov 2022 11:22:27 +0000

Intro

When going through a checkout flow, prospective customers may abandon their cart or order when they see a currency different from their local currency. That can be for a number of reasons. It might be unclear to the customer about the exchange fee implications or whether they might incur extra bank fees when paying in different currencies.

Now with Checkout and Payment Links, you can use multi-currency Prices to present your customers’ local currency which can help to lower abandonment and increase conversion.

Checkout automatically localizes prices if you’re using multi-currency Prices depending on your customers’ location. You can create multi-currency Prices via the Dashboard and the API.

What you’ll learn

In this demo we’ll create a multi-currency Price in the Dashboard and then we’ll demonstrate how to create and test a Checkout Session that will present a different currency to your customers, based on their location.

If you’d like to learn more about Checkout, see the list of videos here on our StripeDevelopers YouTube channel.

Create a multi-currency Price

We'll add a new Product in the Dashboard. Now in the Price Information section, there is an option to "+Add more currencies".

The default price is 10 euros for customers in the EU, and we'll add a second price in USD. Stripe will make a suggestion of the USD price based on current exchange rates but you're free to choose your own amount.

We’ll copy the Price ID for use later when creating the Checkout Session.

Creating a Checkout Session

Next, we’ll create a Checkout Session with this Price ID, this example is written in Ruby:

session = Stripe::Checkout::Session.create({
  payment_method_types: ['card'],
  line_items: [{
    price: 'price_1LzMQyJyGOmgcJwrvQy3bCLq',
    quantity: 1,
  }],
  mode: 'payment',
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
  customer_email: 'test+location_FR@example.com'
})

puts session.url

Notice that we’ve provided a test email address of the form test+location_FR.example.com. This is how we can simulate that customers are arriving at your checkout from different countries. If we change the FR part to another ISO country code, we can force Checkout to test the currency for that particular country if one is configured for the Price.

We’ll run this code and grab the URL output to the console:

https://checkout.stripe.com/c/pay/cs_test_a1U3DAWuKb0QgD33ObzV5riXIzrqzRqtcNLcqbtL3znXXLGU5DA5rA7Kwb#fidkdWxOYHwnPyd1blpxYHZxWjA0SW9vQW5PfEJKaGJmT3J3Q2ZSYjFuTGpsTHVxUUtKMG9cazNhalR2VnE0QzFkbzdWRmdDQDIyQHM0V1F9PWdnPENOd1FWfHV0XUpwPGByczdkVnQ9PWhLNTVuNzJXdEZoTCcpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPyd2bGtiaWBabHFgaCcpJ2BrZGdpYFVpZGZgbWppYWB3dic%2FcXdwYHgl

If we follow this URL, we can see that the currency in EUR is displayed for a french customer:

Now, let’s change our Checkout Session to simulate a customer arriving from the US:

session = Stripe::Checkout::Session.create({
  payment_method_types: ['card'],
  line_items: [{
    price: 'price_1LzMQyJyGOmgcJwrvQy3bCLq',
    quantity: 1,
  }],
  mode: 'payment',
  success_url: 'https://example.com/success',
  cancel_url: 'https://example.com/cancel',
  customer_email: 'test+location_US@example.com'
})

puts session.url

The only change that we’ve made is to change the ISO country code in the customer email address to US.

https://checkout.stripe.com/c/pay/cs_test_a1vwLfWUcoaUrxJmWR1vimzsZw7D2cuqWhl1mcmPsb8Y2CXs8MvBDUVVaZ#fidkdWxOYHwnPyd1blpxYHZxWjA0SW9vQW5PfEJKaGJmT3J3Q2ZSYjFuTGpsTHVxUUtKMG9cazNhalR2VnE0QzFkbzdWRmdDQDIyQHM0V1F9PWdnPENOd1FWfHV0XUpwPGByczdkVnQ9PWhLNTVuNzJXdEZoTCcpJ2N3amhWYHdzYHcnP3F3cGApJ2lkfGpwcVF8dWAnPyd2bGtiaWBabHFgaCcpJ2BrZGdpYFVpZGZgbWppYWB3dic%2FcXdwYHgl

If we follow this new session URL, we'll see that the local currency is presented in USD:

Combining with Coupons, Stripe Tax and more

Localized pricing works with Coupons, Stripe Tax, and Shipping Rates. Depending on the combination of features that you’re using, you’ll need to make sure that the according currency options are set on those features as well. You can see a list of rules here.

Summary

Presenting your customers prices in their local currency will reduce cart abandonment and increase conversion rates. Now with Checkout and Payment Links you can easily support multi-currency Prices by creating them via the Dashboard or API to improve the user experience for your customers.

About the author

Matthew Ling (@mattling_dev) is a Developer Advocate at Stripe. Matt loves to tinker with new technology, adores Ruby and coffee and also moonlighted as a pro music photographer. His photo site is at matthewling.com and developer site is at mattling.dev.

Stay connected

In addition, you can stay up to date with Stripe in a few ways:

📣 Follow us on Twitter
💬 Join the official Discord server
📺 Subscribe to our Youtube channel
📧 Sign up for the Dev Digest

Faster checkout with Link and the Payment Request Button

mattling_dev — Wed, 19 Oct 2022 13:49:09 +0000

Introduction

Offering one-click checkout in your app can dramatically improve the user experience for your customers and increase conversion for your business, as it removes lots of unnecessary friction like inputting card numbers and other billing details.

The Payment Request Button already gave access to popular wallets like Apple Pay and Google Pay and now it supports Link, Stripe’s one-click payment method that gives your customers the opportunity to use one-click checkout on hundreds of thousands of businesses.

And the great news is, if you are already using the Payment Request Button or intend to integrate using it, you get Link without any integration changes whatsoever! You can simply turn it on via the Dashboard. This feature is currently in a public beta, which you can sign up for here.

If you'd like to see a step-by-step integration demo for Apple Pay or Google Pay, both of those have been covered by CJ and Dawn. The Payment Request Button dynamically displays wallet options to optimize the checkout experience for your customers. In this article we'll see how and when Link will be offered and how it will improve your customer's payment experience.

When will Link be offered

Link will be offered as a payment method when certain browser and wallet configurations are met, you can see those combinations in the table in the docs linked here.

What we’ll be testing

In this example, we’ll be testing purchasing with Link using Safari with no card configured in our wallet, therefore Link will be offered as an alternative payment method.

Signing up

The first step is to provide an email address, this will be used to determine whether a customer has signed up for Link before.

One thing to note is that when testing Link in test mode, don’t use real world data, rather use dummy email addresses, test card numbers and non real world user data.

If a customer has not used Link before, they’ll be prompted to enter their phone number. This number will be used to authenticate the customer in the future using one-time passcodes.

On signing up, the customer will be prompted to provide familiar billing information like a debit or credit card, and their billing address.

Once this is completed, the payment will be made.

Authenticating

The next time the customer uses Link to pay, they provide their email address and they’ll be sent a one-time passcode to their phone which they can use to authenticate. In test mode, we can use any 6 digit number that isn’t 000001, 000002, or 000003. These 3 test codes are reserved for simulating certain errors which you can read more about in the docs.

So we’ll key in 111111 to authenticate.

Now the customer is fully authenticated and can make use of one-click checkout with Link on many businesses that have enabled it. Let’s complete this payment and see what happens when we try to make one last purchase.

Since the customer is authenticated, they can now checkout with one-click.

Summary

Making the checkout process as smooth and fast as possible is essential to your customer’s experience and will lead to increased conversion and revenue for your business.

Stripe created Link to make online checkouts faster and easier. With Link, you can save your payment information to be used at hundreds of thousands businesses. The next time you’re making an online purchase at a business that supports Link, you can simply check out in one-click.

About the author

Stay connected

In addition, you can stay up to date with Stripe in a few ways:

📣 Follow us on Twitter
💬 Join the official Discord server
📺 Subscribe to our Youtube channel
📧 Sign up for the Dev Digest

React Stripe.js and the Payment Element

mattling_dev — Mon, 03 Oct 2022 14:49:51 +0000

What you’ll learn

With React Stripe.js and the Payment Element you can create a custom payment integration on your site that can offer more than 18 global payment methods with a single integration depending on your location and their availability. In this demo you’ll learn how to integrate the Payment Element with your React app, and how to turn on new payment methods via the dashboard without having to change, test or re-deploy your code.

Prerequisites

If you’d like to follow along, you’ll need a Stripe account which you can sign up for here and you can clone the getting started branch of the repo here.

00:00 Introduction
01:07 Cloning the repo and getting started
02:12 npm installs and starting the app
03:50 Building out payment.js
05:18 Creating a payment intent on the back end
06:27 Fetching and saving the client secret
07:28 Using the elements provider
08:36 Creating the checkout form

What to watch next

You can watch more videos on automatic payment methods here

About the author

Stay connected

In addition, you can stay up to date with Stripe in a few ways:

📣 Follow us on Twitter
💬 Join the official Discord server
📺 Subscribe to our Youtube channel
📧 Sign up for the Dev Digest

DEV Community: mattling_dev

Localized Prices with Checkout

Intro

What you’ll learn

Create a multi-currency Price

Creating a Checkout Session

Combining with Coupons, Stripe Tax and more

Summary

About the author

Stay connected

Faster checkout with Link and the Payment Request Button

Introduction

When will Link be offered

What we’ll be testing

Signing up

Authenticating

Summary

About the author

Stay connected

React Stripe.js and the Payment Element

What you’ll learn

Prerequisites

Table of contents

What to watch next

About the author

Stay connected