Missing Amazon Payment, Apple Pay (Stripe) and Google Pay (Stripe) buttons

[MobyDigg]

Is your feature request related to a problem? Please describe.

• I installed the WooCommerce Amazon Pay plugin, but there is no way to get the Amazon Pay Button currently.
• Apple Pay and Google Pay buttons (activated through Stripe) do not appear in the Payment Gateways either.

This WooCommerce option:

…does not generate any GraphQL output yet.

Describe the solution you'd like Those payment options are generated buttons, which should appear through the payment gateways.

[kidunot89]

@MobyDigg The best solution for getting support for these features would probably be to offload you session to the WooCommerce checkout page upon checkout page.

I current don't have an example of this, but @jacobarriola, along with myself have been working a reliable way of things this. Feel free to ask questions and I'll try to feel in the blanks.

[jonshipman]

Typically, you have to implement these yourself as the code itself is javascript that passes a token to WooCommerce.

[saeem-osman]

@kidunot89 thank you so much for continuous hard work. I am new to gatsby with woocommerce development. The most challenging thing for me to implement the strip payment system. Is it possible to use the existing checkout mutation to pass the strip token along with the post request to make a successful order? Can you give me clear workflow or steps how it can be implemented?

[saeem-osman]

@kidunot89 thank you so much for continuous hard work. I am new to gatsby with woocommerce development. The most challenging thing for me to implement the strip payment system. Is it possible to use the existing checkout mutation to pass the strip token along with the post request to make a successful order? Can you give me clear workflow or steps how it can be implemented?

Just found out an awesome article by @jacobarriola https://jacobarriola.com/post/headless-woocommerce-stripe-checkout-graphql Thanks a ton!!

[nonlinearcom]

@MobyDigg The best solution for getting support for these features would probably be to offload you session to the WooCommerce checkout page upon checkout page.

Hi, I'm trying to implement @kidunot89 suggestion but I'm a bit lost, which would be the easiest way to offload the customer's session to the default WooCommerce checkout page? 🤔

Thanks in advance!

[jacobarriola]

@nonlinearcom I wrote a post about one way to offload checkout to your WC site. https://jacobarriola.com/post/hosted-woocommerce-checkout-headless-application

FYI @kidunot89 ☝🏽

[nonlinearcom]

Thanks @jacobarriola, this is exactly what I was looking for!

[Ys-sudo]

Hey guys i managed to implement this solution from stripe that covers apple pay, google pay, paypal, native credit cards, klarna and more (probably also amazon). It is possible to handle it with netlify functions, you need the stripe payment gateway wordpress plugin to register the method on the wp side and send the checkout mutation after getting the positive response from stripe. Here is the implementation on our project of shroom drinks.

[scottyzen]

Hi @Ys-sudo, Looks great. Quick question, do you update the stripe payment element any time the cart updates? Or say the price of shipping changes do you have to unmount and mount the payment element again?

I managed it on a Netlify function but in the end, moved it back to a WPGrapgh endpoint. Are you planning on sharing your Netlify function?

[Ys-sudo]

Hey, no, the stripe payment element doesn't need to get updated every time, it is the price data passed to it that can be modified on the go or the checkout page (also currency supported but probrematical on the BE). You basically modify the amount passed to the payment element before sending it to stripe with the place order and pay button. Yes we are planning to make the shroom drinks project open source on the next update probably, once i update the engine and plugins versions to the highest possible, so i don't mind sharing some code. So i have a functions folder in the gatsby site and inside a createPaymentIntent.js file with this content: `

const stripe = require('stripe')('sk_XXX');

exports.handler = async (event, context) => {
  try {
    // Log the received data for debugging
    //console.log('Received data:', event.body);
    const { amountString, currency } = JSON.parse(event.body);
    let amount;
    if (currency === 'pln') {
      amount = Number(amountString.replace('zł', '').replace('.', ''));
    } else {
      amount = Number(amountString.replace('€', '').replace('.', ''));
    }
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount,
      currency: currency,
    });
    return {
      statusCode: 200,
      body: JSON.stringify({ clientSecret: paymentIntent.client_secret }),
      headers: {
        'Access-Control-Allow-Origin': 'https://example.com', // Replace with the origin of your client application
        'Access-Control-Allow-Credentials': true,
      },
    };
   } catch (error) {
    console.error(error);
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message }),
      headers: {
        'Access-Control-Allow-Origin': 'https://example.com', // Replace with the origin of your client application
        'Access-Control-Allow-Credentials': true,
      },
    };
  }
};

`

You need those two node packages in package.json: "@stripe/react-stripe-js": "^2.4.0", "@stripe/stripe-js": "^2.3.0",

Then you have the frontend component which will communicate with the function in the .netlify directory and pass the response, it is quite complex in our case how we are handling this, the basic logic is that you import the stripe react element according to this guide then when the transaction completes / fails you send the order with a checkout mutation to woocommerce where the stripe plugin is present and handles the gateway type. You have to create the checkout forms all by yourself in react / gatsby and handle the logic also, but the native effect shows in our case a better conversion rate than the session transfer solutions suggested above also stripe has been rated #2 biggest fintech company in the world by forbes (2024) and from a developer point of view, their dashboard and documentation is very nice, so i would recommend it. If you need more help with this process, or headless woocommerce / gatsby setup contact me through the mail in my bio and i will try to help you further :)