stripe-archive / stripe-payments-demo

Sample store accepting universal payments on the web with Stripe Elements, Payment Request, Apple Pay, Google Pay, Microsoft Pay, and the PaymentIntents API. 💳🌍✨

This project is inactive and is no longer being maintained.

Stripe Payments Demo

This demo features a sample e-commerce store that uses Stripe Elements, PaymentIntents for dynamic authentication, and the Sources API to illustrate how to accept both card payments and additional payment methods on the web.

If you’re running a compatible browser, this demo also showcases the Payment Request API, Apple Pay, Google Pay, and Microsoft Pay for a seamless payment experience.

You can see this demo app running in test mode on stripe-payments-demo.appspot.com.

️⚠️ ️PaymentIntents is the recommended integration path for 3D Secure authentication. It lets you benefit from dynamic authentication to maximize conversion and prepare for regulations like Strong Customer Authentication in Europe.

Overview

This demo provides an all-in-one example for integrating with Stripe on the web:

	Features
✨	Beautiful UI components for card payments. This demo uses pre-built Stripe components customized to fit the app design, including the Card Element which provides real-time validation, formatting, and autofill.
💳	Card payments with Payment Request, Apple Pay, Google Pay, and Microsoft Pay. The app offers frictionless card payment experiences with a single integration using the Payment Request Button Element.
🌍	Payment methods for Europe and Asia. A dozen redirect-based payment methods are supported through the Sources API, from iDEAL to WeChat Pay.
🎩	Automatic payment methods suggestion. Picking a country will automatically show relevant payment methods. For example, selecting “Germany” will suggest SOFORT, Giropay, and SEPA Debit.
🔐	Dynamic 3D Secure for Visa and Mastercard. The app automatically handles the correct flow to complete card payments with 3D Secure, whether it’s required by the card or encoded in one of your 3D Secure Radar rules.
📲	QR code generation for WeChat Pay. During the payment process for WeChat Pay, a QR code is generated for the WeChat Pay URL to authorize the payment in the WeChat app.
🚀	Built-in proxy for local HTTPS and webhooks. Card payments require HTTPS and asynchronous payment methods with redirects rely on webhooks to complete transactions—ngrok is integrated so the app is served locally over HTTPS. The Stripe CLI is used to forward webhook events to the local server.
🔧	Webhook signing. We allow for webhook signature verification, which is a recommended security practice.
📱	Responsive design. The checkout experience works on all screen sizes. Apple Pay works on Safari for iPhone and iPad if the Wallet is enabled, and Payment Request works on Chrome for Android.
📦	No datastore required. Products, and SKUs are stored using the Stripe API, which you can replace with your own database to keep track of products and inventory.

Payments Integration

The frontend code for the demo is in the public/ directory.

The core logic of the Stripe integration is mostly contained within two files:

1. public/javascripts/payments.js creates the payment experience on the frontend using Stripe Elements.
2. server/node/routes.js defines the routes on the backend that create Stripe charges and receive webhook events.

Card Payments with Stripe Elements

Stripe Elements let you quickly support cards, Apple Pay, Google Pay, and the new Payment Request API.

Stripe Elements are rich, pre-built UI components that create optimized checkout flows across desktop and mobile. Elements can accept any CSS property to perfectly match the look-and-feel of your app. They simplify the time-consuming parts when building payment forms, e.g. input validation, formatting, localization, and cross-browser support.

This demo uses both the Card Element and the Payment Request Button, which provides a single integration for Apple Pay, Google Pay, and the Payment Request API—a new browser standard that allows your customers to quickly provide payment and address information they’ve stored with their browser.

Beyond Cards: Payment Methods for Europe and Asia

This demo also shows how to reach customers in Europe and Asia by supporting their preferred way to pay online. It supports payment methods such as ACH credit transfers, Alipay, Bancontact, iDEAL, Giropay, SEPA Direct Debit, SOFORT, and WeChat Pay.

The app also supports both Multibanco and EPS which are currently in Public Beta on Stripe.

Getting Started with Node

Instructions for running the Node.js server in server/node are below. You can find alternative server implementations in the server directory:

• Go, Echo: server/go
• Java, Spark: server/java
• Node, Express: server/node
• PHP, Slim: server/php
• Python, Flask: server/python
• Ruby, Sinatra: server/ruby

All servers have the same endpoints to handle requests from the frontend and interact with the Stripe libraries.

Requirements

You’ll need the following:

• Node.js >=10.0.0
• Modern browser that supports ES6 (Chrome to see the Payment Request, and Safari to see Apple Pay).
• Stripe account to accept payments (sign up for free).

In your Stripe Dashboard, you can enable the payment methods you’d like to test.

Some payment methods require receiving a real-time webhook notification to complete a charge. We're using the Stripe CLI to forward webhook events to our local development server. Additionally this demo is bundled with ngrok, to serve the app locally via HTTPS, which is required for the Payment Request API.

Running the Node Server

Copy the environment variables file from the root of the repository:

cp .env.example .env

Update .env with your own Stripe API keys and any other configuration details. These environment variables are loaded and used in server/node/config.js, where you can review and edit other options such as the app currency and your Stripe account country.

Install dependencies using npm:

npm install

This demo uses the Stripe API as a datastore for products and SKUs, but you can always choose to use your own datastore instead. After npm install has finished the setup script will run to create the product records on your Stripe account.

Next, follow these installation steps to install the Stripe CLI which we'll use for webhook testing.

After the installation has finished, authenticate the CLI with your Stripe account:

stripe login --project-name=stripe-payments-demo

To start the webhook forwarding run:

stripe listen --project-name=stripe-payments-demo --forward-to http://localhost:8000/webhook

Alternatively, you can use the following shorthand command:

npm run webhook

The Stripe CLI will let you know that webhook forwarding is ready and output your webhook signing secret:

> Ready! Your webhook signing secret is whsec_xxx

Please copy the webhook signing secret (whsec_xxx) to your .env file.

In a separate terminal window, start the local server:

npm run start

Lastly, you will see the ngrok URL to serve our app via HTTPS. For example:

https://<example>.ngrok.io

Use this URL in your browser to start the demo.

Credits

• Code: Romain Huet and Thorsten Schaeff
• Design: Tatiana Van Campenhout

stripe-payments-demo's Issues

Issue with SetupIntents API, client_secret is not accepted

Hi,

I am working on migration to PSD2. Following migration guide as mentioned here: https://stripe.com/docs/payments/payment-intents/migration#saving-cards
Because we need to save cards for later charges I am using SetupPaymentsIntent flow.
I've created a setup intent key on server and passing it to client. Consider that client_secret key starts with "seti_", so it's SetupIntents key.

On the client I call handleCardSetup like this

var additionalInfo = {
            payment_method_data: {
                billing_details:  {
                   name: accountOwner,
                   email: user.email
                }
            },
            metadata: {
                user_id: user.id
            }
        }
        stripe.handleCardSetup(client_secret, card, additionalInfo);

where card is CardElement;
accountOwner, user.email and user.id are a part of user object and contain proper values.
Chrome console shows no js errors.

I am always receiving back current error:

IntegrationError: Invalid value for stripe.handleCardSetup intent secret: value should be a client secret of the form ${id}_secret_${secret}. You specified: "seti_1FCkP2DCVFfL6ds8iNrfLtLM_secret_FiAkqrqJ99O2aDnPwt73qtKKbs2ZuSY".

I've checked that client secret is the same on server side and client side.

Could you please help me understand what is wrong here?

It would be great to have a demo for SetupIntents somewhere.

Demo for how to Save Card with PaymentIntents

I can't seem to work out a way to save a card when making payment using the new PaymentIntents.

The old way of making a token on the client-side and passing this to the backend meant I could use the token as a source to make a customer and the card would be saved.

With PaymentIntents however, if I try to create a customer from the source returned from the Stripe.js handleCardPayment API call it throws an error: "The source you provided cannot be attached to the customer. It must be chargeable or pending.".

This has left me at an impasse. The only documentation I could find that covers saving a source with PaymentIntents assumes you already have a customer and source.

Edit: Creating a customer when you create a PaymentIntent is the only way I can see to have cards saveable with the new PaymentIntents flow. Although minor it's a little annoying because a customer is made whenever a user hits the checkout rather than when they've made at least one payment.

stripe login isn't setting up keys, port stays open

Trying to do an npm run dev

I did the stripe login, that worked,

Then ran it and got:

you have not configured API keys yet. To do so, run stripe login which will configure your API keys from Stripe

did another npm run dev

Error: listen EADDRINUSE: address already in use

you have not configured API keys yet. To do so, run stripe login which will configure your API keys from Stripe

I can't get it working at all. I tried changing the port a few times.

also the postInstall is set for macOS. I'm on linux, I don't have brew.

I read that I'm suppose to get rid of the --project-name=stripe-payments-demo?

You need to fix your example. Too confusing.

found out you have to remove the --project-name=stripe-payments-demo
from the stripe listen, but for some reason the port stays open.

Google Pay button doesn't show up

On the demo site, the Google Pay button doesn't show up in Chrome on Android. I'm able to see & use it on Googles demo site.

The Morgan logger is not referenced, can this be removed?

In [master]

Imports: https://github.com/stripe/stripe-payments-demo/search?q=morgan&unscoped_q=morgan

The only instance of morgan is logger. The logger is not referenced beyond this instance:
https://github.com/stripe/stripe-payments-demo/blob/b310ffe9d880b3c5d218fef32370312b5a300bb6/server/node/server.js#L13

Page does not work in chrome when logged in

Page never loads (beyond the header) and after a while the following error shows in the console:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://js.stripe.com') does not match the recipient window's origin ('https://stripe-payments-demo.appspot.com').

Sadly sourcemaps are not available to the browser so there is not much more about this issue that I can investigate. However I have been able to determine that the code is loaded from https://js.stripe.com/v3/ which indicates that this may be a larger stripe issue....

All extensions disabled but account has valid google pay cards on file. Page simply will not load with this browser profile active.

Page loads fine in incognito mode.

Page in question: https://stripe-payments-demo.appspot.com/

Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' <URL>".

Error found on Stripe Payments Demo
Refused to load the image 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAE2klEQVRYR73Xf0zUZRwH8Pfne3cEKaFotfw1poUMQjnvIDFADrM8Wmy01kaOJBSUa/00QV1uznIJ2caGuhljSb+2ZvNHsKSZcMgRmsM7TGkopS5daoNO9FKO+z6f9nw5FH8h4MHz3/e52+fzus/zPJ/ne5Q/zzSDoYaTTv+28F7/4LLi7trZdO4aRmlQXrKpjQiRYL4EoJKJu6CK3eWNLSdGw0Ar5sZFcJB+DTPny4QM2IkQNulgs3k9IEYaQf4EtDzJVM8KkrVnxhUVqrWiwdU4WgDkJMZGGfRBLUQI8ie9ChUZnzc2140koq8CWo7cpNjpegoaR6REMNQvwaQw86vljqPVI4W4BdA/yZsp5vQe5j1yTmU1p8Lh+nYkEPcEyGQrkozZrOgqmQUz+N3yBmdZoBEDAjTEfHOhEFys7U3GunJH88e3I/jZm...YtGTJAW07LHBO83R/BmLAIOTZCxJPaTSWPX9qSXLT+8Sc+W1OIxelWfPdjDUpLilE5nhCpnc5blqJ9WIC+EJw8OwFClCJneSJeXix/EVYWb0ZcTDSyX7Rit70etnUboOh1eM7AqHzk9ldMPv9AAK0aqdCjJ+YHlGy3IjK6d/cLgZpDh7B09YdaVUKJsSdMIOqOCojqBwb0IuLi8EyKE6v9rwrebtg2FmOvvR7BYOwKE5gtk/fPJpcMZA0IoBdhPI6Z0TFoPwl4u3FV0WGtR8HrIQyz/o61l5XaQ7XNsksGZnCqsQhEmwYVjXAKnZ0J5DrjDiDANBEQp0E0dmAE/QVWU8juOjOsTjhQcE4zrgbTJ/f8DvM5GDiN9rtODbsVDwgAdEg1VoNo0a3nXe43PgFVfYkOHjvd/7OALcGN3pA4JQTBj5cBvASAHuDLYNqC7ksb6S7/ugMOuAmJDofOMBEXPGepvb37XpX7H1O/3hQof8a0AAAAAElFTkSuQmCC' because it violates the following Content Security Policy directive: "img-src 'self' https://q.stripe.com".

Screenshot

How to add the remaining of the 135+ countries?

Hello, I want to add all the 135+ countries to the menu. How can I do it?

When using Apple Pay the paymentIntent is confirmed twice.

This is happening on the demo page and on my code. The second call is rejected with a status 400:

Failed to load resource: the server responded with a status of 400 ()
https://api.stripe.com/v1/payment_intents/pi_xxxxxxxxxxxxx/confirm

Is this due to 'stripe.handleCardPayment' being called after the paymentIntent is successfully confirmed as described here?

https://stripe.com/docs/stripe-js/elements/payment-request-button#complete-payment-intents

Shouldn't 'handleCardPayment' only be called if the paymentIntent status is 'requires_action'?

Feature: Implementing a subscription signup & payment flow

Implement subscriptions based on the stripe guide: https://stripe.com/docs/billing/subscriptions/payment

Following the stripe guide there is a different code path than the current implementation used for product checkout. It is similar but does involve copying API calls and functionality and adopting it for subscriptions. Given the security and complexity it would be advantageous to have this as part of your core package.

From what I see, the cart should prevent checkout of mixed items: subscription(s) and product(s) anywhere the checkout is non-atomic. It should never be possible to pay for a cart where some items succeed and others fail.

If work has been done on this already, I will appreciate a reference.

Zip/postal code Portugal

Hi,
I'm from Portugal and I'm testing this,but when I was testing I selected my country and this asked me for Zip/Postal code.
In Portugal Postal code only have 4 digits and the webiste asked me for 5.
What can/should I do?
https://en.wikipedia.org/wiki/List_of_postal_codes_in_Portugal

Error handelling on submit button

Hello, When you fill in the form to pay and don´t fill in the complete postal code and hit the pay button, you get correctly a message saying the postal code is incomplete, however the status of the pay button keeps saying processing all the time. I completed the postal code and waited a while and nothing happened, then I clicked the processing button again and payment was done (saw in stripe account) however ever got success message.

State and ZIP when changing default country

Hello,

normally the "State" field is removed for any country other than USA. But when choosing a different default country (i.e. Germany) in the config.js

// Default country for the checkout form.
country: 'DE',

the state field is also shown for this selected country when initial loading the page.

Proper way to setup stripe products and skus?

Noticing that the setup script is pretty inconsistent and would much rather have it as a one off script to run instead of something that runs every time you run the server. Current implementation seems really buggy. I just went to the site it setup the products, i refresh and now the page doesnt load and server says "already in progress...". It also seems like whenever i change the stripe product info everything breaks. I've had to wipe all my stripe test data 10 times now.

I don't have all the striping functions

I have just : elements: ƒ, createToken: ƒ, createSource: ƒ, retrieveSource: ƒ, paymentRequest:

error

Running the server 3000
⚠️ Products have already been registered.
Delete them from your Dashboard to run this setup.
⚠️ Setup already in progress.

he stays in a loop nmot showing on the page it self

How get STPPaymentContext attributes in Controllers

How get STPPaymentContext attributes in Controllers , i would like to get "customerContext.customer.stripeID"

Demo for Samsung Pay

Can we use Stripe like payment gateway for Samsung Pay?

problem with apple-developer-merchantid-domain-association

I'm developing an application using vuejs and i am trying to verify my domain with Apple verification file. I have the file in public/.well-known, the problem is the following: running the command npm run serve i see the file at mydomain/.well-known/apple-developer-merchantid-domain-association; running npm run build & serve -s dist or deploying my app on heroku the file is not raggiungible.

"Invalid value for paymentRequest()" when specifying "CN" (which is valid country in UI)

What I did

• copied the .env.example to a .env file and added my Stripe API details
• edited the config.js with country: 'CN', and currency: 'cny',
• ran npm install (successfully)
• ran npm run start (successfully)
• loaded the "App URL" page given from the npm run start command results in my browser (Chrome 64 with dev tools)

What happened

(1) The following console error appeared:

Uncaught (in promise) Error: Invalid value for paymentRequest(): country should be one of the following strings: AT, AU, BE, BR, CA, CH, DE, DK, EE, ES, FI, FR, GB, HK, IE, IN, IT, JP, LT, LU, LV, MX, NL, NZ, NO, PH, PL, PT, RO, SE, SG, SK, US. You specified: CN.
    at new t ((index):1)
    at $e ((index):1)
    at t ((index):1)
    at new t ((index):1)
    at e.<anonymous> ((index):1)
    at e.paymentRequest ((index):1)
    at payments.js:85
    at <anonymous>

(2) The "Country" field defaulted to the "United States" value

What I expected

(1) No console error
(2) Ability to choose "CN" as a country, considering that is the option value used in the select option for "China".
(3) The "Country" field to be defaulted to "China"

Facebook / Instagram Apple Pay doesn't button doesn't load

When using the demo in the "in app browsers" of the Facebook and Instagram mobile apps, the Apple Pay button does not load. However, it does load when using in-app browsers of different companies such as Twitter and Slack.
So I'm wondering if this is a bug, or is this intended behavior. If this is intended behavior, why?

Thanks!

How to use stripe to transfer money from account to account

How to use stripe to transfer money from account to account using paymentIntent

For example :
B(account) -> (Platform) -> U(User)?

Request Payment button does not show up

Using the official demo https://stripe-payments-demo.appspot.com the Pay request button does not show up on safari :

I've tested on safari-12 on osX-10.14 and also safari-11 on osX-10.13

Is it a stripev3.js known bug ?

Thanks for your help

How to pass custom data via html element?

I'm a bit of a newbie, when it comes to this stuff, but I have gotten your script to work. It works beautifully and thank you for putting on GitHub.

I cannot figure out how to pass custom field data through so that I can query it using Stripes API. I need to pass a userId via a hidden html element. What JSON object key should this be place under? It looks like I would need to update the payments.js so that I could grab the hidden html element, but from there I'm lost.

️PaymentIntents with Subcriptions

How can I integrate ️PaymentIntents with Subcriptions for Strong Customer Authentication

Documentation - Dead Link

In the "Payments Integration" section, the "server/node/routes.js" link is dead.

Question: Could you update this example for Strong Customer Authentication?

Hey @stripe :)

I just read about SCA and I'm scared a bit... haha. Ok but now serious, wouldn't it be great when this example is SCA proof? I didn't check the code for a long time, maybe you even changed the code so it's set for the future.

Thanks :D

reusing the source returned by PaymentIntent

I am trying to reuse the source that returns over PaymentIntent object, however it seems like it is not a chargeable source. The server also never receives the source.chargeable webhook mentioned in best practices.

How do I reuse the source created within this demo?

Danish postcodes are 4 digits - not 5

Haven´t checked the source, but the demo required me to put in a 5 digit postcode/zipcode for Denmark and that is incorrect.

The "Google pay" button is not displayed on desktop browsers

Hi! I have a payment method in my google account, but when I go to this page from the Google Chrome browser - the "Google pay" button is not displayed.

When I go to the same page from the phone (from the same Google account) the button is successfully displayed. what could be the problem?

500 error on php version

Hello, I have installed the php version several times and both the same. On previewing at localhost or Ngrok there is a 500 error on products, in Store.js on line 72

Store.getOrderTotal() returns subunits yet, paymentRequest() errors out

I am trying to replicate the client side code using google apps script and this code doesn't work for me -I am at a loss to understand why.

// Create the payment request.
const paymentRequest = stripe.paymentRequest({
country: config.stripeCountry,
currency: config.currency,
total: {
label: 'Total',
amount: store.getOrderTotal(),
},
....

I am getting the following error:

Error: Invalid value for paymentRequest(): total.amount should be an amount in the currency's subunit. You specified: 2000.

Google Pay does not work on desktop browsers

I am logged in into Google and have Google Pay payment methods set up on all my browsers, desktop and mobile.

The expected behavior for demo site is to allow for selection between Google Pay or cards stored on the device.

However, on desktop browsers button only shows up when I have card stored in the browsers. It does not allow me to select my Google Pay card.

On mobile Chrome, button shows up even if I have no card stored on the device. It allows me to proceed with Google Pay.

Pending stripe payment until bank account info is provided

Hi!
I am facing the issue:

stripe.error.InvalidRequestError: Request req_owgQt8DxA7ismN: Can only apply an application_fee when the request is made on behalf of another account (using an OAuth key, the Stripe-Account header, or the destination parameter).

This happening because receiver didnt have provided bank account details.

I want to know if there is a way that a "user A" sends payment to "user B" using stripe. At that moment, User B didn't provided bank account details, but stripe deducts the amount from User A account and preserve it until user B add bank information.
(Just like freelancer.com do, that payment is deducted and can be receive at any time when user enters bank details)

PaymentIntent - Same card is saved multiple times

Hey @thorsten-stripe, how have you been?

I'm playing around with the PaymentIntent API and I managed to attach a source to a customer. However, I noticed that if the user enters the same card he already saved, it will be attached twice as you can see here:
Example here:

{
  "id": "cus_BLPgxMRoUs4FYa",
  "object": "customer",
  "account_balance": 0,
  "created": 1504624833,
  "currency": null,
  "default_source": "src_1E1d3HC1oEzKtlmeA2H41jYh",
  "delinquent": false,
  "discount": null,
  "email": "[email protected]",
  "invoice_prefix": "99364FD",
  "invoice_settings": {
    "custom_fields": null,
    "footer": null,
    "supported_payment_methods": {
    }
  },
  "invoicing": {
  },
  "livemode": false,
  "metadata": {
  },
  "shipping": null,
  "sources": {
    "object": "list",
    "data": [
      {
        "id": "src_1E1d3HC1oEzKtlmeA2H41jYh",
        "object": "source",
        "amount": null,
        "card": {
          "address_line1_check": null,
          "address_zip_check": "unchecked",
          "brand": "Visa",
          "country": "US",
          "cvc_check": "unchecked",
          "dynamic_last4": null,
          "exp_month": 10,
          "exp_year": 2020,
          "fingerprint": "L5ePhLsSDFLcFTpi",
          "funding": "credit",
          "last4": "4242",
          "name": "Core_test2 Selenium",
          "tokenization_method": null
        },
        "client_secret": "src_client_secret_EUcHskjJmhzhaARK16hqneIc",
        "created": 1549646531,
        "currency": null,
        "customer": "cus_BLPgxMRoUs4FYa",
        "flow": "none",
        "livemode": false,
        "metadata": {
        },
        "owner": {
          "address": {
            "city": null,
            "country": null,
            "line1": null,
            "line2": null,
            "postal_code": "90210",
            "state": null
          },
          "email": null,
          "name": "Core_test2 Selenium",
          "phone": null,
          "verified_address": null,
          "verified_email": null,
          "verified_name": null,
          "verified_phone": null
        },
        "statement_descriptor": null,
        "status": "chargeable",
        "type": "card",
        "usage": "reusable"
      },
      {
        "id": "src_1E1eyEC1oEzKtlme6XcZqdkj",
        "object": "source",
        "amount": null,
        "card": {
          "address_line1_check": null,
          "address_zip_check": "unchecked",
          "brand": "Visa",
          "country": "US",
          "cvc_check": "unchecked",
          "dynamic_last4": null,
          "exp_month": 10,
          "exp_year": 2020,
          "fingerprint": "L5ePhLsSDFLcFTpi",
          "funding": "credit",
          "last4": "4242",
          "name": "Core_test2 Selenium",
          "tokenization_method": null
        },
        "client_secret": "src_client_secret_EUeGn9wV6rJdkzwEuvy8ZQkh",
        "created": 1549653906,
        "currency": null,
        "customer": "cus_BLPgxMRoUs4FYa",
        "flow": "none",
        "livemode": false,
        "metadata": {
        },
        "owner": {
          "address": {
            "city": null,
            "country": null,
            "line1": null,
            "line2": null,
            "postal_code": "90210",
            "state": null
          },
          "email": null,
          "name": "Core_test2 Selenium",
          "phone": null,
          "verified_address": null,
          "verified_email": null,
          "verified_name": null,
          "verified_phone": null
        },
        "statement_descriptor": null,
        "status": "chargeable",
        "type": "card",
        "usage": "reusable"
      },
    ],
    "has_more": false,
    "total_count": 6,
    "url": "/v1/customers/cus_BLPgxMRoUs4FYa/sources"
  },
  "subscriptions": {
    "object": "list",
    "data": [

    ],
    "has_more": false,
    "total_count": 0,
    "url": "/v1/customers/cus_BLPgxMRoUs4FYa/subscriptions"
  },
  "tax_info": null,
  "tax_info_verification": null
}

You can see that the fingerprint are exactly the same (which is normal as it’s the same card). How can we prevent that?

Regards,

Yanis.

Not all countries listed

Not all the countries Stripe support are listed D:

Status of Order is not updated, only tracked in metadata.status

In the current implementation the status of the order is tracked in metadata.status. So if you have shippable items, you cannot transition the order into status fullfilled.

I would expect the sample to correctly transition the order to "paid" when the order is paid. This allows me to send emails on order change and also keep track of the shipping tracking information.

Maybe some documentation on how this could be achieved would suffice.

Right now the order stays in status "created" and cannot transition from there (not via API not via dashboard).

For CC payments you can call
stripe.orders.pay(orderId, { source_id} );

Button to generate dummy user information

Can we have a button to generate user info using faker.js lets say?

Typo in command in readme file

Just a quick heads-up about a typo in the Test section of the readme in the python file.

souce env/bin/activate

souce --> source.

cheers

Google brand guidelines

Hey, I noticed that the request button for Google currently looks like:

But according to Google's brand guidelines, it should be visually represented as:

Is there any requirement to update this demo to align with Google's Style requirements? 🤔

Webhook signature verification failed

Thanks for this demo.
How to address this verification failure?
Thanks for your help.

2018-03-13 14:22:04 default[20180312t222444]
2018-03-13 14:22:04 default[20180312t222444]  > [email protected] start /app
2018-03-13 14:22:04 default[20180312t222444]  > node server/server.js
2018-03-13 14:22:04 default[20180312t222444]
2018-03-13 14:22:05 🚀  Server listening on port 8080
2018-03-13 14:23:00 default[20180313t072032]
2018-03-13 14:23:00 default[20180313t072032]  > [email protected] start /app
2018-03-13 14:23:00 default[20180313t072032]  > node server/server.js
2018-03-13 14:23:00 default[20180313t072032]
2018-03-13 14:23:00 🚀  Server listening on port 8080
2018-03-13 14:27:55 default[20180312t222444]  "POST /webhook" 400
2018-03-13 14:27:55 ⚠️  Webhook signature verification failed.
2018-03-13 14:28:22 default[20180313t072032]  "GET /images/dropdown.svg" 304
2018-03-13 14:28:22 default[20180313t072032]  "GET /javascripts/payments.js" 304
2018-03-13 14:28:22 default[20180313t072032]  "GET /images/github.svg" 304
2018-03-13 14:28:22 default[20180313t072032]  "GET /javascripts/store.js" 304
2018-03-13 14:28:22 default[20180313t072032]  "GET /images/flags.svg" 304
2018-03-13 14:28:22 default[20180313t072032]  "GET /images/logo.svg" 304
2018-03-13 14:28:22 default[20180313t072032]  "GET /images/tip.svg" 304
2018-03-13 14:28:22 default[20180313t072032]  "GET /stylesheets/store.css" 200
2018-03-13 14:28:22 default[20180313t072032]  "GET /config" 304
2018-03-13 14:28:22 default[20180313t072032]  "GET /" 200
2018-03-13 14:28:22 default[20180313t072032]  "GET /images/order.svg" 304
2018-03-13 14:28:22 default[20180313t072032]  "GET /products" 304
2018-03-13 14:28:23 default[20180313t072032]  "GET /images/products/seminar.png" 304
2018-03-13 14:28:23 default[20180313t072032]  "GET /images/error.svg" 304
2018-03-13 14:28:57 default[20180313t072032]  "GET /" 304
2018-03-13 14:28:58 default[20180313t072032]  "GET /stylesheets/store.css" 304
2018-03-13 14:28:58 default[20180313t072032]  "GET /javascripts/payments.js" 304
2018-03-13 14:28:59 default[20180313t072032]  "GET /config" 304
2018-03-13 14:28:59 default[20180313t072032]  "GET /images/products/seminar.png" 304
2018-03-13 14:28:59 default[20180313t072032]  "GET /products" 304
2018-03-13 14:29:11 default[20180313t072032]  "GET /config" 200
2018-03-13 14:29:44 ⚠️  Webhook signature verification failed.
2018-03-13 14:30:29 default[20180313t072032]  "GET /products" 304
2018-03-13 14:30:29 default[20180313t072032]  "GET /products" 304
2018-03-13 14:30:29 default[20180313t072032]  "GET /images/products/seminar.png" 304
2018-03-13 14:32:01 ⚠️  Webhook signature verification failed.
2018-03-13 14:32:19 ⚠️  Webhook signature verification failed.

Webhook Confusion

When I start the app and go to the {###}.ngrok.io/webhook site to test the webhook I get the "Cannot GET /webhook" error. I created an endpoint in Stripe, clicked to reveal the code, and added that to my .env file after the "STRIPE_WEBHOOK_SECRET=" section. Is there a reason that the webhook is still not working? The second URL does work but the main site I added this to does not. The site I created to test this on is https://payments.bahlrdev.com/. Thanks in advance for your help!

Payment Information Section Not Working with Canadian Postal Code

The payment info form at the bottom next to the CVC field will not accept Canadian postal codes even when Canada is selected in the billing / shipping info.

Any way to link cart items? /payment/:sku

So i'm planning on using this demo as the checkout page. I have a landing page with pricing tiers/options and when they select an option i want to be able to add the plan they select to the cart. Immediately thought it would be cool if we could maybe just pass a sku id or something so it knows which item to add. Right now i just have the setup products being added to cart every time and sometimes one of them is even added twice for no reason.

Google Pay not show in Mobile APP Webview

Hi! When I am testing the Request payment button in my application... from Chrome desktop this works!!!! from Chrome Mobile also it works!!!
Also I add some view of result in the code,

My code to show Payment request button is like this:

paymentRequest.canMakePayment().then(function(result) { 

        var text = objToString(result);

        var enablingText = '';

        if (result) {

            enablingText = "ENABLED PAYMENT BUTTON !!!";

            prButton.mount('#payment-request-button');

        } else {

            enablingText = "DISABLED PAYMENT BUTTON !!!";

            document.getElementById('payment-request-button').style.display = 'none';

        }

        displayHtmlShow("window.paymentRequest.canMakePayment result: <br>"+text+"<br>"+enablingText);

In Desktop Chrome it works fine!!!! In Mobile Chrome it also works fine!!!
Example with Pay now button and my own logs with result:

But When I use a webview that my app mobile call this and open the Internal mobile navigator, in my Samsung Android this does not work... and in Iphone this also does not work... because this code prints EMPTY result...

This means... in a webview called from my app mobile this will not work and only it will be available the Stripe payment button if this is implemented in native?
Thanks!
Ani

After successful checkout have /payment?success=true flag or /payment/success page for marketing events

If you're ever selling online you typically want to install things like a Facebook/Google Pixel to track conversion events and optimize for certain objectives. Generally, you can place a little javascript on the thank you page to trigger a 'purchase' conversion with the value but with the way this is project is setup you can't really do anything like that without placing it somewhere in one of the route controller methods on the server-side which isn't ideal. Wondering if having a thank you success route is something easily doable?

iOS 11.1.1 Safari issue with Stripe Elements Credit Card Field

Hello,

I'm having a issue on iOS 11.1.1. on iPhone.
Only in Safari (in Chrome or Firefox it works), Stripe Credit Card field doesn't work, both inline or with separate fields.

I've tried with WooCommerce Stripe extensions, on Storefront (WC official theme).
WP 4.9.6, WC 3.4.2, WC Stripe Gateway 4.1.7, Storefront 2.3.2

https://imgur.com/ekTOPy4

The Credit Card field appears collapsed.
If I click on it, the page scroll to top and the cursor is focused at the beginning on an invisibile field (.CardField-number inside __privateStripeFrame4 iframe) and the iOS number keyboard is shown. You can enter numbers but they are hidden in the invisible field, so it's totally unusable!

https://imgur.com/DsTiyk1

I've tried to uncheck 'Inline Credit Card Form' setting, but the issue is almost same:

https://imgur.com/SBREkOb

I've then tried Stripe Official demo and same issue (if I click on the input field, page scrolls to top, hidden field, …):

https://imgur.com/zeS3jck

As I wrote, on Firefox or Chrome on same iOS version, it works.
It also works on iOS 11.4 Safari.
But I'm worried about previous iOS version, since you can't force your customers to update to latest iOS version on their devices and this issue makes Stripe Payment not usable on mobile (at least on iOS Safari).

Thanks

Demo won't start because NGROK returns with error "not yet ready to start tunnel"

With the current version of ngrok that is loaded in package.json, I constantly received the error "ngrok is not yet ready to start tunnels" (error code: 104).

This issue was described here bubenshchykov/ngrok#148 and fixed in ngrok 3.2.3 with bubenshchykov/ngrok#149.

So you basically have to update ngrok using npm update ngrok to resolve this issue.

checkCanMakePayment Request Returns True on Safari Private Window

I am running into an issue where a user without Apple Pay enabled is getting Apple Pay if they use Safari Private Window.

I am making the canMakePayment() call and it is returning an object with {applePay: true}

Is anyone else running into this issue? Is this something that will be fixed?

tip re: ngrok and development restarts with nodemon

It's a nice convenience to be able to run ngrok from inside the node server itself, but a downside is if you touch some files and want to restart, you get a new ngrok tunnel.

ngrok can be combined with nodemon in such a way that if the server restarts due to a file change, the tunnel persists. Best of all the things.

Not necessarily a feature request, just putting this here as a convenience for others.

https://gist.github.com/spalladino/45a6e54d7942ac0bad64dd54d7d12467