Manage Stripe V3 JS code via Sprokets #32
Conversation
spaghetticode
force-pushed
the
v3-sprockets
branch
from
5fe06c9 to
ba4845f
Compare
There was a problem hiding this comment.
Love this.
I left a question and I also have some doubt about how to customize some part of the provided JS now that it is in the assets pipeline. I think it's pretty easy but maybe adding a couple of lines in the README will help new users. What do you think?
| @@ -1,4 +1,4 @@ | |||
| <div id="payment-request-button" data-stripe-config="<%= payment_method.stripe_config(current_order).to_json %>"></div> | |||
| <div id="payment-request-button" data-stripe-config="<%= payment_method.stripe_config(current_order).to_json %>" data-v3-api="<%= stripe_v3_api %>"></div> | |||
There was a problem hiding this comment.
Do we always show this button in v3, or it should be wrapped in an if somehow? Or is it already done via JS?
There was a problem hiding this comment.
Currently, there's one flag to disable the button:
def payment_request?
v3_intents? && preferred_stripe_country.present?
endwhen this method returns false, the button is not shown. So, the preference stripe_country controls the button visibility, as it's a requirement for the payment request to work.
When the preference is not present, the JS code eventually will not initialize the button:
setUpPaymentRequest: function(opts) {
var opts = opts || {};
var config = this.config.payment_request;
if (config) {
// ....It's probably worth documenting a bit this as well.
|
@kennyadsl I agree adding some documentation will help, will do that soon, thanks for the suggestion! |
The code has been encapsulated in proper constructor objects by separating common code as necessary. Code shared among all the Stripe V3 API checkout procedures is now contained in the `Spree.StripePayment` constructor. `SolidusStripe.Elements` inherits directly from `SolidusStripe.Payment`, same goes for `SolidusStripe.CartPageCheckout`. `SolidusStripe.PaymentIntents` inherits from `SolidusStripe.Elements`, as it basically extends the Elements functionality by adding the 3D secure feature. Both `SolidusStripe.CartPageCheckout` and `SolidusStripe.PaymentIntents` allow to pay with Apple Pay/Google Pay, so they include shared methods from `PaymentRequestButtonShared`. All functions are defined on the different classes prototype, this will allow to easily customize those functions according to needs by just overriding them on the proper prototype object.
spaghetticode
force-pushed
the
v3-sprockets
branch
2 times, most recently
from
085a8f6 to
3ea07f1
Compare
Since solidusio/solidus#3524 was merged, we need to verify if we're using the single "Name" field or the previous first/last name combination.
Stripe V3 JS code (Elements, Payment Intents and cart checkout button) has been completely removed from HTML views and is now loaded via Sprockets in Solidus `frontend/all.js` file. The right API (Elements, Intents...) is now selected by looking for an HTML element with `data-v3-api` attribute set with the name of one of Stripe V3 APIs.
spaghetticode
force-pushed
the
v3-sprockets
branch
from
3ea07f1 to
2139220
Compare
Stripe V3 JS code (Elements, Payment Intents, and cart checkout button)
has been completely removed from HTML views and is now loaded via
Sprockets in Solidus
frontend/all.jsfile.The right API (Elements, Intents...) is now selected by looking for
an HTML element with
data-v3-apiattribute set with the name ofone of Stripe V3 APIs.