Checkout

Accept payments with flexible, secure checkout options designed for your application needs.

Payload provides two primary pre-built checkout solutions for collecting payments from your customers. See below to learn more about the two options.

Checkout Options

Checkout Link

Generate secure payment links that redirect customers to a Payload-hosted checkout page. Ideal for one-time payments where you want customers redirected back to your application after completing payment.

Checkout Plugin

Integrate a PCI-compliant payment form directly into your application. The Checkout Plugin handles payment collection, card verification, and Autopay enrollment while keeping sensitive data out of your application.

Choosing the Right Solution

Both checkout solutions offer secure payment processing with PCI compliance handled by Payload. The main difference is where your customers complete the payment - on a Payload-hosted page or embedded directly in your application.

Feature	Checkout Link	Checkout Plugin
Experience	Hosted on Payload	Embedded in your app
Integration	Simple URL redirect	JavaScript SDK
Customization	Limited	Full control over UI
PCI Compliance	Handled by Payload	Handled by Payload
Autopay Setup	✓	✓
Mobile Wallets	✓	✓
Return to App	Required	Optional

Quick Start

Generate a checkout link and redirect your customer

link.py

import payload
pl = payload.Session('secret_key_3bW9...', api_version='v2')
 
from flask import Flask, redirect, jsonify
 
app = Flask(__name__)
 
@app.route('/create-checkout', methods=['POST'])
def create_checkout():
    # Create a checkout link intent
    intent = pl.Intent.create(
        type='checkout_link',
        checkout_link={
            'payment_template': {
                'amount': 100.00,
                'description': 'Order #12345',
                'receiver': {
                    'account_id': 'acct_receiver123'
                }
            },
            'redirects': {
                'completed_url': 'https://yourapp.com/payment-complete',
                'return_url': 'https://yourapp.com/cart'
            }
        }
    )
 
    # Redirect customer to checkout
    return redirect(intent.url)

What happens:

Create a checkout intent with payment details
Redirect the customer to the intent.url
Customer completes payment on Payload's hosted page
Customer is redirected back to your success_url or cancel_url

Embed the checkout form in your application

intent.py

modal.html

modal.js

import payload
pl = payload.Session('secret_key_3bW9...', api_version='v2')
 
from flask import Flask, jsonify
 
app = Flask(__name__)
 
@app.route('/create-checkout-intent', methods=['POST'])
def create_checkout_intent():
    # Create a checkout intent token on your backend server
    intent = pl.Intent.create(
        type='checkout_plugin',
        checkout_plugin={
            'payment_template': {
                'amount': 100.00,
                'description': 'Order #12345',
                'receiver': {
                    'account_id': 'acct_receiver123'
                }
            }
        }
    )
 
    # Send the token to your frontend
    return jsonify({'token': intent.token})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Checkout Button - Vanilla JS</title>
  <script src="https://payload.com/Payload.js"></script>
</head>
<body>
  <button id="checkout-btn" disabled>Pay Now</button>
 
  <script src="modal.js"></script>
</body>
</html>

const btn = document.getElementById('checkout-btn');
 
// Fetch token and enable button
fetch('/checkout_intent')
  .then(r => r.json())
  .then(data => {
    btn.disabled = false;
    btn.onclick = () => {
      Payload(data.token);
      new Payload.Checkout()
        .on('success', evt => {
          console.log('Payment successful!', evt.transaction_id);
          window.location.href = `/payment/success?txn=${evt.transaction_id}`;
        })
        .on('declined', evt => {
          console.error('Payment declined:', evt.transaction_id);
          alert(`Payment declined: ${evt.transaction_id}`);
        })
        .on('closed', () => {
          console.log('Customer closed checkout');
        });
    };
  })
  .catch(err => console.error('Failed to load checkout token:', err));