old_Loopcrypto.xyz
  • Introduction
  • Supported networks and tokens
  • Loop + Frames
  • Learn
    • How Loop works
    • Core components
      • Collecting authorization
        • Enabling payment on multiple networks
        • Accepting ETH and MATIC
      • Sending payment requests
      • Checking a customer's balance & allowance
      • Receipts and reminders
      • Customer portal
    • Loop + your financial stack
      • Linking on-chain transactions with invoices in your ERP system
      • Connecting with accounting software
      • Crypto off-ramp
    • Case studies
  • Dashboard functionality
    • Subscriptions
      • Free trials, discounts and more
      • Auto-invoicing
      • Auto-cancelations
    • One-time payments
    • Scheduling outbound payments
      • Internal notes
    • Editing an upcoming payment
    • Payments for platforms
  • Integrations
    • Stripe + Loop
      • Getting setup
      • Stripe Connect setup
      • Subscriptions
        • Free trials
        • Upgrading a customer or editing a subscription's products
      • Invoicing
      • One-time payments
      • Coupon codes
      • Stripe Connect - Subscriptions
      • FAQs about Stripe integration
    • Chargebee + Loop
      • Getting setup
      • Subscriptions
      • One-time payments
      • Coupon codes
    • Quickbooks + Loop
      • Invoicing
    • Xero + Loop
      • Invoicing
    • Ghost.org + Loop
    • Zapier + Loop
    • Manually add integrations
  • Technical Docs
    • APIs
      • Entity
        • Adding child entities
        • Adding user to child entity
        • Get child entities
      • Items
        • Adding items
          • Item types
          • Categories
        • Retrieving an item
        • Updating an item
        • Deactivating an item
      • Agreements
      • Transfer requests
        • Signing transfer requests
        • Loop CLI
        • Canceling transfer requests
        • Transfer request status
        • Handling unfulfilled transfer requests
        • Validations
      • Webhooks
        • Checking webhook signatures
        • Demo App
        • Slack, Airtable, Discord, Telegram
    • Archeticture
      • Smart contract
        • Deploying your smart contract
          • Modifying smart contract properties
      • Collecting authorization
        • Checkout page
          • Additional functionality
          • Add "pay with crypto" button
        • Checkout widget
          • NPM package readme
        • Checkout parameter examples
      • Providing on-chain payment based access
        • Subscription gated communities
    • Loop SDK
      • Verify Webhook
      • Transfers
      • Error Handling
      • Generating API keys
    • Sample guide: Collect a subscription or one-time payment
    • Integrating the Loop Protocol into your dApp
      • Payroll applications
      • Loan platforms (credit cards, BNPL)
    • Security
      • API Authentication
      • Securing with signatures
      • API Trust assumptions
      • Audits
  • FAQs
  • Company Dashboard
  • Loop Portal
Powered by GitBook
On this page
  • 1. Configure items
  • 2. Add button and redirect to payment link
  1. Technical Docs
  2. Archeticture
  3. Collecting authorization
  4. Checkout page

Add "pay with crypto" button

Accepting a crypto payment option is extremely simple; all you need to do is set the href of a "pay with crypto" button on your website to direct customers to the appropriate payment link. An example is shown below to set up a link to Loop's hosted Checkout page.

1. Configure items

To start accepting crypto, you'll need to have the relevant item information configured.

2. Add button and redirect to payment link

Add a checkout button to your website that links to your specific payment link.

We've provided stock code, but you can use your own.

<html>
  <head>
    <title>Buy cool new product</title>
  </head>
  <body>
    <div class="buy-container">
      <a class="buy-button" href="https://checkout.loopcrypto.xyz/6b7e0e7a-c1ae-4570-87c3-c35a640e082a/1286a317-7dc5-45e3-b918-8a20ab042905">Pay with crypto</a>
    </div>
  </body>
</html>

Each subscription item has its own unique checkout page. If you have multiple items, it is simplest to add a button for each item (such as each subscription tier). However, if you want to use one button, you can pass through to the URL the desired item name to render the correct item details. This works because our checkout page uses the entity ID and item ID to know what item information to show.

https://checkout.loopcrypto.xyz/<entity ID>/<item ID>
PreviousAdditional functionalityNextCheckout widget

Last updated 1 year ago