#yony
static kernel
opaque copper
Hi there, can you share with me the relevant code?
unborn steeple
Ok
// create a payment method
const paymentMethod = await stripe?.createPaymentMethod({ type: 'card', card: elements.getElement(CardElement), billing_details: { name: props.name, email: props.email, }, });
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);
const StripePaymentForm = (props) => ( <Elements stripe={stripePromise}> <UpgradePlan/> </Elements> );
opaque copper
Is <CardElement /> included in <UpgradePlan /> ?
unborn steeple
No
I just import CardElement from the stripejs
I follow this blog post to create a subscription functionality. https://javascript.plainenglish.io/how-to-create-a-stripe-subscription-with-react-and-node-js-b7c5e5e24967
opaque copper
You need to include the <CardElement /> so that elements can return you an instance of it.
What do you want to achieve with Stripe API? I can share with you the relevant Stripe official doc
unborn steeple
I want to create a monthly subscription plan.
And also able to cancel subscription later as needed.
opaque copper
The easiest way to get started with Subscription is through Stripe checkout
You can also build you own integration, and it'd requires some additional work (https://stripe.com/docs/billing/subscriptions/build-subscriptions?ui=elements)
unborn steeple
Thanks checking
I have already implemented a stripe subscription with check out, but I couldn't able to cancel the subscription because the stripe checkout does not give a subscription id.
is it possible to cancel a subscription create with stripe checkout?
opaque copper
Yes, you can cancel a subscription through API or Dashboard.
Also if you are listening to checkout.session.completed events, you can get the subscription ID (https://stripe.com/docs/api/checkout/sessions/object#checkout_session_object-subscription) from a checkout session object.
unborn steeple
Umm, I am not seeing the subscription ID from the stripe.checkout.sessions.create response?
There is a checkout session id.
cs_xxxxxxxxx
opaque copper
Can you share with me the actual checkout session ID
opaque copper
Ok, Stripe will create a subscription upon the completion of the checkout session, and that's why you should check its subscription when it's completed, not when it's created.
unborn steeple
One last question, where can i add <CardElement /> element?
opaque copper
It's recommend to use <PaymentElement /> instead of <CardElement />. It allows you to integrate many payment options (instead of just card)
unborn steeple
Ok, I think I will wrap my Payment form with <PaymentElement /> , right?
<PaymentElement>
<UpgradePlan />
<PaymentElement />
opaque copper
The <PaymentElement /> should be inside your component
unborn steeple
Can you please give me a sample code?
opaque copper
<UpgradePlan>
<PaymentElement />
</UpgradePlan>
https://github.com/stripe-samples?q=subscription&type=all&language=&sort= you can also find some sample codes in Stripe's github repo
