vincent_code

[dim spire]

👋 Welcome to your new thread!

⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.

⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.

🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1337089532494876735

📝 Have more to share? Add more details, code, screenshots, videos, etc. below.

[vernal sparrow]

hello again!

so the checkout page is passing what i believe are the correct props. typescript also seems to think so. no errors that i can see in the console.

[visual rain]

Hello there

[vernal sparrow]

the payment element props look correct:

[visual rain]

Can you share your full code snippet here?

[vernal sparrow]

sure

on my ipad which has apple pay its not appearing though:

    layout: {
      type: "accordion",
      defaultCollapsed: false,
      radios: true,
      spacedAccordionItems: false,
    },
    ...(recurringBillingDetails && {
      applePay: getApplePayOption(recurringBillingDetails, activeCart),
    }),
  };```

export const getApplePayOption = (
  recurringBillingDetails: RecurringBillingDetails,
  activeCart: Cart,
): ApplePayOption | undefined => {
  const cadences = Object.keys(recurringBillingDetails);

  if (cadences.length !== 1) {
    return;
  }

  const cadence = cadences[0]!;
  const details = recurringBillingDetails[cadence]!;

  return {
    recurringPaymentRequest: {
      paymentDescription: "My Ritual Subscription",
      managementURL: "https://account.ritual.com/",
      regularBilling: {
        amount: details.amount,
        label: `Recurring subscription (${
          activeCart.taxInclusive ? "VAT Included" : "plus tax"
        })`,
        recurringPaymentIntervalUnit: "day",
        recurringPaymentIntervalCount: Number(cadence),
        recurringPaymentStartDate: new Date(
          new Date().setDate(Number(new Date().getDate() + cadence)),
        ),
      },
      billingAgreement: `Some of the items you are purchasing will automatically renew as a subscription and will be billed every ${cadence} days until you cancel. You can cancel anytime by visiting your account page on our website. By clicking Pay, you confirm that you have read, understand, and agree to the Terms of Service and Privacy Policy.`,
    },
  };
};```

[visual rain]

Thanks, looking

[vernal sparrow]

paymentElementOptions is passed to PaymentElement

thank you very much

[visual rain]

Hmm yeah it is working for me 🤔

Does it work for you if you just use something more simple like:

recurringPaymentRequest: {
        paymentDescription: 'My subscription',
        managementURL: 'https://example.com/billing',
        regularBilling: {
          amount: 2500,
          label: 'Monthly subscription fee',
          recurringPaymentIntervalUnit: 'month',
          recurringPaymentIntervalCount: 1,
        },
        billingAgreement: "THIS IS A BILLING AGREEEMENT",
      },

[vernal sparrow]

i would have to deploy that to prod to see 😂

[visual rain]

You can't test locally using ngrok or something like that?

Like my guess is something is cached in prod or something else. Your code seems fine to me.

[vernal sparrow]

yeah i would need keys to the apple config to allow a new referrer unfortuantely, i could do taht after the rest of my team wakes up

ok good to know then...

hmmm

are there perhaps character limits or some other constraint that might be breaking it?

[visual rain]

No I tried your exact code (other than putting placeholders in the variables)

[vernal sparrow]

wow

okay! i will pass this on

[visual rain]

I suppose it is possible that you do have an issue with one of your variables but then I would expect an issue when Payment Element renders...

[vernal sparrow]

yeah, typescript would hve complained if i was feeding it the wrong data types too

[visual rain]

This is what I see when I use your code (with placeholders for the variables):

[vernal sparrow]

yeah so weird. we have an express checkout elsewhere that takes in teh same blob and it works

[visual rain]

Yeah so I'd double check on the deployed code and also just run it in a test environment.

I don't think the code snippet is the issue

[vernal sparrow]

ok thanks. i will look again and see if i can get it working

cheers!