Try to Integrate PayPay to Magento2 StripeIntegration

Table of Contents

1. Introduction
2. Environment
3. Incorporate PayPay as EPM to Magento2 StripeIntegration
4. Set externalPaymentMethodTypes
5. Version Difference?
6. After that...?
7. What I faced?
8. Is this integration actually worthy? (in terms of development)
9. Conclusion

Introduction

Recently, I had the opportunity to implement an integration of PayPay with Magento2 StripeIntegration module, so I would like to write down the process with notes.

First, let's talk about stripe's EPM, an abbreviation for External Payment Methods.
According to official documentation site, stripe has a feature that allows user to incorporate the payment methods as an integrated payment methods into Stripe's PaymentElement.
Adding external payment methods simplifies the user interface by displaying along with all the payment methods into the Stripe Payment Element.

Also, on choosing them, they are redirected to a URL which is configured for the external payment method.

Environment

Environment	Version
Magento	2.4.6-p1
Php	8.1
StripeIntegration module	3.5.8

Incorporate PayPay as EPM to Magento2 StripeIntegration

Just to be sure, first register with PayPay and obtain the credential details. You can register from this url below:

Once registration is completed, you will be able to access the API key, secret key, test user information, etc. Later that can be used for integration.

Next is you need to install PayPay sdk, so please refer to the PayPay documentation for details.

In qiita article and the official stripe site, there is the code for PaymentElement how to integrate PayPay to stripe. But actually they are for stripe php but not for Magento2 StripeIntegration module. Here we need to edit some of js actually to display PayPay to the Magento2 checkout page.

Set externalPaymentMethodTypes

I will show you the code to add external_paypay method to the stripe js file. Here comes the twist, as StripeIntegration module for Magento2 is updated continuously, the StripeIntegration module version = ~ 3.3 and version = ~ 3.5 have different procedure for getting client secret which is the most important part of this integration. I am going to show the code difference and explain about client secret and PayPay integration.

Version Difference?

version - ~ 3.3
File path:
Document root/app/code/StripeIntegration/Payments/view/frontend/web/js/view/payment/method-renderer/stripe_payments.js

First, we need to add externalPaymentMethodTypes as external_paypay into the stripe element.

stripe_payments.js

var elements = this.elements = stripe.stripeJs.elements({
    locale: params.locale,
    clientSecret: params.clientSecret,
    externalPaymentMethodTypes: ['external_paypay'],
    appearance: this.getStripePaymentElementOptions()
});

Next is to bind the payment method to the paymentElement next to onChange event.

stripe_payments.js

// Create and mount the Payment Element
this.paymentElement = elements.create('payment', this.getPaymentElementOptions(params), {
    paymentMethodOrder: ['card', 'external_paypay']
});

this.paymentElement.mount('#stripe-payment-element');
this.paymentElement.on('change', this.onChange.bind(this));

Changing the above lines will surely display the PayPay icon in the stripe checkout page.
Here is how it looks.

version - ~ 3.5
File path:
Document root/app/code/StripeIntegration/Payments/view/frontend/web/js/view/payment/method-renderer/stripe_payments.js

Here, the story is different as stripe_payments.js has a lot of changes.

stripe_payments.js

try {
    const appearance = {
        theme: 'stripe',
    };
    try {

        this.elements = stripe.stripeJs.elements({
            appearance,
            clientSecret,
            externalPaymentMethodTypes: ['external_paypay'],
            paymentMethodCreation: "manual"
        });
    } catch (e) {

        console.warn("Could not filter Stripe payment method types: " + e.message);
        this.elements = stripe.stripeJs.elements(this.getElementsOptions(false), {
            appearance,
            clientSecret,
            externalPaymentMethodTypes: ['external_paypay'],
            paymentMethodCreation: "manual"
        });
    }

    this.paymentElement = this.elements.create("payment", {
        paymentMethodOrder: ['card', 'external_paypay']
    });
    this.paymentElement.mount('#stripe-payment-element');

    this.paymentElement.on('change', this.onChange.bind(this));
} catch (e) {
    this.crash(e.message);
}

This is the edited code, but most important is how we get client_secret here. From version ~3.3 to ~3.5 the retrieval of client secret has been a tedious job, and this will take a lot of time, so for testing I just added constant value like:

client_secret = pi_xxxxxxxxxxxxxxxxx_secret_xxxxxxxxxxxxxxxxx

After that...?

Unfortunately, I was not able to complete the payment procedure due to that the stripeIntegration module's procedures need a lot of changes.
At first, I have tried by introducing external_payments method into stripe's element and lastly introducing separate method name.
But at all, both failed because both the methods are regarded as the external payment method to the stripe integration. There is a limitation set inside stripe that except the payment methods which are already defined in stripe module, and is treated as external payment methods. There is no assurance that adding those methods will make successful payments. For that, we need deep study and analysis on the stripeIntegration modules how the paymentIntent is being made.

What I faced?

After being added as external payment method, here are some problems that I faced continuously:

• PayPay payment method is regarded as external methods and paymentIntent cannot be created
• only methods that are available in stripe can be made successful payments, except those other methods are excluded
• on selecting PayPay, the payment process always stops no matter how many times placeOrder button is pressed, as there is no paymentIntent be made for external method(I feel a lot of changes are required)

Is this integration actually worthy? (in terms of development)

Honestly, being as a Magento developer, I prefer to say no. For being a stripe developer, there may be merits on PayPay integration to stripe. But for a Magento developer, it seems very fewer merits. Because during this integration procedure, I thoroughly read the payment process of the stripeIntegration and I found that if I need this integration to complete, there are a lot of places to be refurnished. Although if I complete integration, it doesn’t mean a lot as the development cost will be slightly higher than expected, leading to very fewer benefit for Magento developers like me.

Conclusion

Well, I tried to integrate PayPay to Magento2 stripeIntegration module, but it was failed though. Rather than saying failed, I would like to say that it was not very worthy as being a Magento developer because of its development cost. But really somehow, I think it is quite a helpful study for developers like me.