Flex Credits Landing

This guide explains how to integrate the Flex Credits payment system into the landing page.

Components

PayPalFlexButton

The PayPalFlexButton component handles one-time purchases for Flex Credits packages. It's designed to work with PayPal's payment system and our backend services.

import { PayPalFlexButton } from "@/components/billing/PayPalFlexButton";

<PayPalFlexButton
  packageId="FLEX-100"  // Package ID from flexCreditsPackages
  amount={99}          // Price in USD
  onPurchaseComplete={(orderId) => {
    // Handle successful purchase
    console.log('Purchase completed:', orderId);
  }}
/>

Available Packages

const FLEX_CREDITS_PACKAGES = {
  'FLEX-100': { credits: 100, price: 99 },   // $0.99/credit
  'FLEX-165': { credits: 165, price: 149 },  // $0.90/credit
  'FLEX-205': { credits: 205, price: 199 },  // $0.97/credit
  'FLEX-410': { credits: 410, price: 399 },  // $0.97/credit
};

Integration Steps

1. Add PayPal Script Provider

   import { PayPalScriptProvider } from "@paypal/react-paypal-js";
   
   const paypalOptions = {
     clientId: "ASR83nsEfbwVJ-0UyVNa86jO4y9plLkyKPBsifIdfzPOOZG4js1m1Afzr9kPhSrsvCdoof6dFYkxXKsZ",
     currency: "USD",
     intent: "capture"
   };
   
   <PayPalScriptProvider options={paypalOptions}>
     {/* Your content here */}
   </PayPalScriptProvider>

2. Configure Success/Cancel URLs

   • Success URL: https://app.conversionzign.com/billing?package_id={PACKAGE_ID}

   • Cancel URL: https://app.conversionzign.com/cancelled

3. Add Flex Credits Section

   <section id="flex-credits" className="pricing-section">
     <h2>Flex Credits</h2>
     <p>Purchase credits in bulk and use them whenever you need.</p>
     
     <div className="pricing-grid">
       {Object.entries(FLEX_CREDITS_PACKAGES).map(([id, pkg]) => (
         <div key={id} className="pricing-card">
           <h3>{pkg.credits} Credits</h3>
           <p className="price">${pkg.price}</p>
           <p className="price-per-credit">
             ${(pkg.price / pkg.credits).toFixed(2)}/credit
           </p>
           <PayPalFlexButton
             packageId={id}
             amount={pkg.price}
             onPurchaseComplete={handlePurchaseComplete}
           />
         </div>
       ))}
     </div>
   </section>

Error Handling

The PayPalFlexButton component includes built-in error handling and will display appropriate error messages. However, you can customize the error handling by providing an onError callback:

<PayPalFlexButton
  packageId="FLEX-100"
  amount={99}
  onPurchaseComplete={handlePurchaseComplete}
  onError={(error) => {
    console.error('Payment failed:', error);
    // Show custom error message
  }}
/>

Testing

1. Use PayPal's sandbox environment for testing:

   • Email: [e-mail]

   • Password: testuser123

2. Test each package with both successful and failed payment scenarios

3. Verify that users are redirected correctly after payment

Support

If you encounter any issues during integration, please contact our development team at [e-mail].