Pro plan

import { TenderlaneProvider,
         TenderlaneCheckoutForm } from 'tenderlane/react';
import { createRulesRouter }       from 'tenderlane';
import { stripeProvider }          from 'tenderlane/stripe';
import { StripePaymentElement }    from 'tenderlane/stripe/react';

import { rules, fallback } from './routing';
import { useAppContext }   from './context';

const stripe = stripeProvider({
  publishableKey: env.STRIPE_PK,
  serverEndpoint: '/api/pay',
});

export function Checkout({ plan }) {
  const ctx = useAppContext();   // country, currency, tier, flags

  return (
    <TenderlaneProvider config={{
      context: ctx,
      providers: [stripe],
      routing: createRulesRouter({ rules, fallback }),
    }}>
      <OrderSummary plan={plan} />
      <TenderlaneCheckoutForm
        input={{ amount: plan.amount[ctx.currency], currency: ctx.currency }}
        elements={{ stripe: StripePaymentElement }}
      >
        {({ canSubmit, submit, status }) => (
          <button disabled={!canSubmit} onClick={submit}>
            {status === 'submitting' ? 'Processing…' : 'Pay'}
          </button>
        )}
      </TenderlaneCheckoutForm>
    </TenderlaneProvider>
  );
}