Skip to content

Latest commit

 

History

History
 
 

cards-and-mobile-wallets

README.md

Stripe Elements modal demo

This demo shows how to implement Stripe Elements within a modal dialog using Payment request API.

Payment success

Elements modal

Payment declined

Elements modal payment declined

Run the demo

This project includes an example Express server that serves the /client folder and hosts an endpoint to create a payment intent with the Payment Intents API. To get started read the payment request documention. You need to register with Apple all of your webdomains that will show the Apple Pay button. To test your integration you must use HTTPS and a supported browser. If you are using the paymentRequestButton Element within an iframe, the iframe must have the allowpaymentrequest attribute set.

Copy the env file, install the dependencies, and start the server:

# Add your Stripe API keys to your .env
cp .env.example .env
npm install
npm start

Go to your Ngrok HTTPs URL to see the payment page and create a test charge.

Add this to your site

Prerequisites to get started.

This demo shows how to implement Stripe Elements within a modal dialog showing the payment request button. To get started:

  • Edit the client/elementsModal.js and add your public Stripe key on line 4.
  • Edit the HOST_URL to be your Ngrok URL on line 7.
  • Edit the endpoint for /payment_intents, defined on line 447 for the modal dialog.
  • Edit the endpoint for the server API /payment_intents, defined on line 33 for the server.

You can customize the payment form further to meet your needs. For example, you can change the footer text on line 418.

1. Download the project ZIP file

This Elements modal demo uses one CSS and one JS file (feel free to customize them to your needs.) Include them in the <head> of your page source:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="elementsModal.css">
<script src="https://js.stripe.com/v3/"></script>
<script src="elementsModal.js"></script>

2. Create the Elements modal

You can create the modal by providing a few options

window.elementsModal.create({
  amount: 1999,
  currency: "USD",
  businessName: "KAVHOLM",
  productName: "Chair",
  customerEmail: "[email protected]",
  customerName: "Customer Kavholm"
});

Here are the options the demo allows you to configure:

Name Description Type
items (required) An array with a product^ object array
product^ (object) A product SKU (string) and quanity (int) of that SKU object
businessName (required) Business name string
productName (optional) Name of the product string
customer email (optional) Customer email to display
customer email (required) Customer name to create Payment intents string

3. Show the Elements modal

You can call elementsModal.show() or use a button:

<button onClick="window.elementsModal.toggleElementsModalVisibility();">
  Click here to trigger the Elements popup modal
</button>

4. Update the stripePaymentHandler function

The stripePaymentHandler is set to redirect users to "/payment_intent_charge." This does a GET request to the server and fetches a static HTML page. Change this function to take action once a payment is completed.

A short example using this demo:


<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="elementsModal.css" />
    <script src="https://js.stripe.com/v3/"></script>
    <script src="elementsModal.js"></script>
  </head>
  <body>
    <div class="pay-button-wrapper">
      <button class="pay-button" onClick="elementsModal.toggleElementsModalVisibility();">
        Open Elements popup
      </button>
    </div>
  </body>

  <script>
    window.elementsModal.create({
      items: [{ sku: "sku_1234", quantity: 1 }],
      currency: "USD",
      businessName: "KAVHOLM",
      productName: "Chair",
      customerEmail: "[email protected]",
      customerName: "Customer Kavholm"
    });
  </script>
</html>