Checkout

Stripe Checkout is a prebuilt, hosted payment page optimized for conversion. Whether you offer one-time purchases or subscriptions, you can use Checkout to easily and securely accept payments online.

Accept a payment

The easiest way to use Checkout to accept a single payment is to create a checkout session in the server and then use the Stripe Service to redirect in the client.

To see more details on a full example, please check the official Stripe Docs.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { switchMap } from 'rxjs/operators';

import { StripeService } from 'ngx-stripe';

@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html'
})
export class CheckoutComponent {
  constructor(
    private http: HttpClient,
    private stripeService: StripeService
  ) {}

  checkout() {
    // Check the server.js tab to see an example implementation
    this.http.post('/create-checkout-session', {})
      .pipe(
        switchMap(session => {
          return this.stripeService.redirectToCheckout({ sessionId: session.id })
        })
      )
      .subscribe(result => {
        // If `redirectToCheckout` fails due to a browser or network
        // error, you should display the localized error message to your
        // customer using `error.message`.
        if (result.error) {
          alert(result.error.message);
        }
      });
  }
}

<button (click)="checkout()">
    GO TO CHECKOUT
</button>

// This example sets up an endpoint using the Express framework.
// Watch this video to get started: https://youtu.be/rPR2aJ6XnAc.

const express = require('express');
const app = express();
const stripe = require('stripe')('***your secret key***');

app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: 'https://example.com/success',
    cancel_url: 'https://example.com/cancel',
  });

  res.json({ id: session.id });
});

app.listen(4242, () => console.log(`Listening on port ${4242}!`));

Create a Subscription

In a very similar way as the previous example, you can use Checkout to create a subscription with different pricing options.

As you can see in the server tab, the priceId comes in the body and we use it to create the session. This allows the user to choose the price. In the example below we use different buttons, but it would be easy to just change the priceId base on any other condition, like a select field for example.

Also, notice the mode attribute in the server.js tab. It was payment in the previous example but it is subscription in this one.

Again, please visit the Stripe Docs site for more details.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { switchMap } from 'rxjs/operators';

import { StripeService } from 'ngx-stripe';

@Component({
  selector: 'app-checkout',
  templateUrl: './checkout.component.html'
})
export class CheckoutComponent {
  constructor(
    private http: HttpClient,
    private stripeService: StripeService
  ) {}

  checkout() {
    // Check the server.js tab to see an example implementation
    this.https.post('/create-checkout-session', { priceId })
      .pipe(
        switchMap(session => {
          return this.stripeService.redirectToCheckout({ sessionId: session.id })
        })
      )
      .subscribe(result => {
        // If `redirectToCheckout` fails due to a browser or network
        // error, you should display the localized error message to your
        // customer using `error.message`.
        if (result.error) {
          alert(result.error.message);
        }
      });
  }
}

<div>Sign Up for the awesome product</div>

<button (click)="checkout('price_Z0FvDp6vZvdwRZ')">
    10$ / month
</button>

<button (click)="checkout('price_Z2FvDp6vZvdwRZ')">
    25$ / month
</button>

// This example sets up an endpoint using the Express framework.
// Watch this video to get started: https://youtu.be/rPR2aJ6XnAc.
const express = require('express');
const app = express();
const stripe = require('stripe')('***your_secret_key****')

app.post('/create-checkout-session', async (req, res) => {
  const { priceId } = req.body;

  // See https://stripe.com/docs/api/checkout/sessions/create
  // for additional parameters to pass.
  try {
    const session = await stripe.checkout.sessions.create({
      mode: 'subscription',
      payment_method_types: ['card'],
      line_items: [
        {
          price: priceId,
          // For metered billing, do not pass quantity
          quantity: 1,
        },
      ],
      // {CHECKOUT_SESSION_ID} is a string literal; do not change it!
      // the actual Session ID is returned in the query parameter when your customer
      // is redirected to the success page.
      success_url: 'https://example.com/success',
      cancel_url: 'https://example.com/cancel',
    });

    res.send({
      sessionId: session.id,
    });
  } catch (e) {
    res.status(400);
    return res.send({
      error: {
        message: e.message,
      }
    });
  }
});

Customizing Checkout

There is a lot of elements that you can customize about your Checkout integration:

Branding
Policies and contact information
Customizing the submit button

Please check the docs for more information.

Customize your success page

You can use details from a Checkout Session to display an order confirmation page for your customer after the payment. To use the details from a Checkout Session:

Modify the success_url to pass the Checkout Session ID to the client side
Look up the Checkout Session using the ID on your success page
Use the Checkout Session to customize what's displayed on your success page

Here is a minimal example build the html with express (definitely better ways to do it)

// This example sets up an endpoint using the Express framework.
// Watch this video to get started: https://youtu.be/rPR2aJ6XnAc.

const express = require('express');
const app = express();

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = require('stripe')('***your secret key****');

app.post('/order/success', async (req, res) => {
  const session = await stripe.checkout.sessions.retrieve(req.query.session_id);
  const customer = await stripe.customers.retrieve(session.customer);

  res.send(`
    <html>
      <body>
        <h1>Thanks for your order, ${customer.name}!</h1>
      </body>
    </html>
  `);
});

app.listen(4242, () => console.log(`Listening on port ${4242}!`));

PreviousSetup Application NextPayment Element

Last updated 2 years ago