m0uka_unexpected

[unkempt elbow]

👋 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/1433429248500170864

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

Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.

• m0uka_api, 2 days ago, 5 messages

[proper sand]

Taking a look

Can you share the code you're using to init Elements/ECE?

[dusky ore]

sure,

<ExpressCheckoutElement
        className={'w-full'}
        options={stripeCheckoutElementOptions}
        onClick={(e) => {
          const subscriptionLines = checkout?.lines.filter(
            (x) => x.subscription
          )

          let recurringIntervalUnit =
            subscriptionLines?.[0]?.subscription_interval_scale

          let recurringIntervalCount =
            subscriptionLines?.[0]?.subscription_interval_value

          if (recurringIntervalUnit === 'week') {
            recurringIntervalUnit = 'day'
            recurringIntervalCount = recurringIntervalCount! * 7
          }

          e.resolve({
            applePay: checkout?.subscription
              ? {
                  recurringPaymentRequest: {
                    paymentDescription: `${checkout.store.name} subscription`,
                    managementURL: 'https://checkout.paynow.gg/subscriptions',
                    regularBilling: {
                      amount: checkout.recurring_total_amount,
                      label:
                        subscriptionLines!.length > 1
                          ? `${subscriptionLines!.length} items`
                          : `${subscriptionLines![0].product_name}`,
                      recurringPaymentIntervalUnit:
                        recurringIntervalUnit as ApplePayRecurringPaymentRequestIntervalUnit,
                      recurringPaymentIntervalCount: recurringIntervalCount!,
                    },
                  },
                }
              : undefined,
          })
        }}
        onReady={() => {
          setExpressCheckoutReady(true)
        }}
        onConfirm={(event) => changePaymentMethodMutation.mutate(event)}
      />

const stripeCheckoutElementOptions: StripeExpressCheckoutElementOptions = {
    buttonHeight: 48,
    layout: {
      maxColumns: 3,
      maxRows: 2,
    },
    buttonTheme: {
      paypal: theme === 'dark' ? 'black' : 'white',
    },
    paymentMethods: {
      paypal: isNativePayPalButtonAvailable ? 'never' : 'auto',
      googlePay: 'always',
      applePay: 'always',
      amazonPay: 'never',
      link: 'never',
      klarna: 'never',
    },
    paymentMethodOrder: ['paypal', 'apple_pay', 'google_pay', 'link'],
    emailRequired: true,
    billingAddressRequired: true,
  }```

[proper sand]

It's because of billingAddressRequired: true. PayPal don't give us the billing details unfortunately, so we remove that wallet from ECE:

PayPal normally doesn’t provide the customer’s billing address (except for the country) or phone number. If they aren’t provided, the confirm event has empty strings for those properties. If you require the customer’s billing address or phone number, then the Express Checkout Element doesn’t display the PayPal button unless that information is available.

[dusky ore]

got it, thanks

is there a way to require an address for everything except paypal?

[proper sand]

There is not

[dusky ore]

shame

thanks for the help though

[proper sand]

No problem, glad I could help!

[dusky ore]

sorry to interrupt again, but tried setting it to false, but it is still not appearing

[proper sand]

Is that change live on the URL you shared? I was testing there

[dusky ore]

yup, should be

[proper sand]

Taking another look

[dusky ore]

emailRequired can be set to true, right?

[proper sand]

Can you share your <Elements> component and params?

[proper sand]

Should be

[dusky ore]

these are the options we're passing in the elements wrapper

mode: checkout?.subscription
            ? isSetupIntent
              ? 'setup'
              : 'subscription'
            : 'payment',
          amount: isSetupIntent ? undefined : checkout?.total_amount,
          currency: isSetupIntent ? undefined : checkout?.currency,
          captureMethod: 'automatic',
          paymentMethodCreation: 'manual',
          payment_method_types: availableGatewaysQuery.data
            ?.filter(
              (x) =>
                x.gateway === 'stripe' &&
                x.gateway_entity_identifier ===
                  cardMethodGatewayEntityIdentifier &&
                checkout?.currency &&
                x.supported_currencies?.includes(checkout.currency)
            )
            ?.filter((x) =>
              checkout?.subscription ? x.subscriptions_supported : true
            )
            .map((x) => x.gateway_method_type_id),
        }```

payment_method_types contains paypal, mode is `payment`

{
    "mode": "payment",
    "amount": 1210,
    "currency": "gbp",
    "captureMethod": "automatic",
    "paymentMethodCreation": "manual",
    "payment_method_types": [
        "card",
        "link",
        "paypal"
    ]
}```

[proper sand]

It's paymentMethodCreation: 'manual' - PayPal does not support that

[dusky ore]

ah, you're right

thanks