planetofthepenguins

[arctic pendant]

hi! if you're using Elements on the frontend that isn't really a MOTO payment

so there's no option on the frontend for that. It has to be passed on the backend and you have to confirm the PaymentIntent there

[low tree]

Is there a guide for it - I've been through a lot of pages on the Stripe site and haven't found anything yet.

[arctic pendant]

you can use Elements to collect a PaymentMethod and send it to your backend and confirm the PaymentIntent there with that and the payment_method_option moto flag

no there's no guide for this

what components do you use on the frontend? Which Elements exactly, what does your code look like?

[low tree]

OK, so I build a paymentIntent in the backend like this...

var paymentIntentConfiguration = {
amount: req.body.paymentAmount,
currency: "gbp",
}

    if(req.body.method == 'MOTO'){
        paymentIntentConfiguration.payment_method_types = ['card']
        paymentIntentConfiguration.payment_method_options = {card : { moto: true} }
    } else {
        paymentIntentConfiguration.automatic_payment_methods = {
            enabled: true,
        }
    }

    var paymentIntent = await stripe.paymentIntents.create(paymentIntentConfiguration);

req.body.method from my calling application tells me if I'm doing MOTO or ECOM and I try to configure my paymentIntent accordingly.

Once I have the clientSecret I render the page and use client side JS to fire up the payment controls:

<script>

    const stripe = Stripe('<%= process.env.STRIPE_JS_KEY %>');

    function showMessage(message) {
        alert(message)
    }

    $(document).ready(function(){    
        const clientSecret = '<%= data.clientSecret %>';
        const appearance = {
            theme: 'flat',
        };
        elements = stripe.elements({ appearance, clientSecret });

        const paymentElement = elements.create("payment");
        paymentElement.mount("#payment-element");
    })
    
    $('#paymentSubmitButton').click(async function(e){
        e.preventDefault();

        // setLoading(true);

        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
            // Make sure to change this to your payment completion page
            // request.headers.host
            return_url: "<%= data.returnURL %>",
            },
        });

        // This point will only be reached if there is an immediate error when
        // confirming the payment. Otherwise, your customer will be redirected to
        // your `return_url`. For some payment methods like iDEAL, your customer will
        // be redirected to an intermediate site first to authorize the payment, then
        // redirected to the `return_url`.
        if (error.type === "card_error" || error.type === "validation_error") {
            showMessage(error.message);
        } else {
            showMessage("An unexpected error occurred.");
        }

        // setLoading(false);
    })
</script>

[arctic pendant]

this can't work with PaymentElement as is, since it has client side confirmation

you need to either :

• also get access to the https://stripe.com/docs/payments/finalize-payments-on-the-server beta so you can confirm the PaymentIntent on the backend instead of the frontend while using PaymentElement
• instead of PaymentElement, build a more custom/low-level integration where you just mount the CardElement(https://stripe.com/docs/payments/accept-card-payments) , create a PaymentMethod from that, and send to the backend to create+confirm the PaymentIntent.

[low tree]

Like this guide here: https://stripe.com/docs/payments/accept-a-payment-synchronously

?

Oh, shoot, sorry - that's literally the guide you just sent me!

(Or similar anyway)

OK, thanks for your help, I will give that a try.

[arctic pendant]

yes that one

sorry, couldn't find the link, I thought we deleted that page

but yeah your link is how you implement my second option(not using the PaymentElement)

and then you pass the MOTO option at step 4 in the backend code.

[low tree]

Thanks again 🙂