Feature -> Allow the use of shipping addresses [requiredShippingContactFields]

[rgarciadelongoria]

This feature allows you to activate shipping addresses in Apple Pay.

[Apple Docs]: https://developer.apple.com/documentation/apple_pay_on_the_web/applepaypaymentrequest/2216121-requiredshippingcontactfields

In this way we can easily implement functionalities such as payment in one click or avoid handling shipping addresses in our developments.

You can enable this functionality by using the requiredShippingContactFields property in the createApplePay method call.

Two new events DidSelectShippingContact and DidCreatePaymentMethod have been created.

The DidSelectShippingContact event allows to retrieve the address when the user decides to change the one that is selected. The address received in this event is partially incomplete due to Apple's security policy of not providing the full address until the purchase has been made.

The DidCreatePaymentMethod event allows you to retrieve the address the purchase has been made successfully. This event is fired before the existing Completed event.

I trust that this improvement can be accepted and used by the rest of the developers.

Until then, I have made a package available here for anyone who is interested in this functionality.

"@rgarciadelongoria/stripe": "latest"

I am attaching some images below.

[netlify[bot]]

✅ Deploy Preview for capacitor-community-stripe ready!

Name	Link
🔨 Latest commit	e2638591065f19878ea32f47058a52c98e94e370
🔍 Latest deploy log	https://app.netlify.com/sites/capacitor-community-stripe/deploys/634d0c3152227500082b7a35
😎 Deploy Preview	https://deploy-preview-210--capacitor-community-stripe.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[agomezmart]

Nice and really useful feature! Looking forward to be merged soon hopefully

[jrodva]

I need the same! lgtm 😉

[JJBalso]

Really neat feature!🤩 I was struggling to do just the same, thanks!

[Nacorga]

Useful functionality! It could help a lot to use Stripe with Apple Pay. 🤩

[rdlabo]

Looks good. @rgarciadelongoria Thanks your great work.

But I am having surgery tomorrow so I won't be able to verify for a week or so. I will do a pre-release first.

[rdlabo]

Released on @next tag!

https://github.com/capacitor-community/stripe/releases/tag/v4.1.0-0

[rgarciadelongoria]

Looks good. @rgarciadelongoria Thanks your great work.

But I am having surgery tomorrow so I won't be able to verify for a week or so. I will do a pre-release first.

I hope the surgery goes well and you recover soon.

Released on @next tag!

https://github.com/capacitor-community/stripe/releases/tag/v4.1.0-0

Thank you very much, happy to contribute

[rgarciadelongoria]

Hi @rdlabo, I hope the surgery went well and you are recovering.

I have made some improvements to the code.

With what I had done previously, the possibility of including shipping addresses could only be enabled by means of a boolean value.

Now I have included the possibility of requiring, according to the needs of each moment, the agreement of name, email and contact telephone number.

All this information arrives in the same way in the DidCreatePaymentMethod event.

And now instead of using a boolean value in the requiredShippingContactFields property, an array of texts with at least one of the following values is needed: ['postalAddress', 'phoneNumber', 'name', 'emailAddress']

Below I include some screenshots:

['postalAddress', 'phoneNumber', 'name'] example:

['postalAddress', 'phoneNumber', 'name', 'emailAddress'] example:

I would be grateful if you could also merge these changes to improve this functionality, and that the rest of the developers can take advantage of them too.

At the moment, until they are merged, they can be tested using the temporary npm package that I have published @rgarciadelongoria/stripe

Thank you very much.

[rdlabo]

@rgarciadelongoria I'm back. Thanks for great work, again. The code looks fine except for one point. Is it possible to specify the type of Listener? Everything can be optional, but there should be a type specification.

[rgarciadelongoria]

@rgarciadelongoria I'm back. Thanks for great work, again. The code looks fine except for one point. Is it possible to specify the type of Listener? Everything can be optional, but there should be a type specification.

Hi @rdlabo

You're right, better to specify a type.

In this case I have defined the DidSelectShippingContact and ShippingContact interfaces.

The DidSelectShippingContact interface consists of a "contact" property of type ShippingContact.

In this way, developers can import these interfaces to capture the information returned by the event with DidSelectShippingContact and, through ShippingContact, work with the same contact structure in their projects.

[rdlabo]

First, I think that this can change:

addListener(eventName: ApplePayEventsEnum.DidSelectShippingContact, listenerFunc: (data: DidSelectShippingContact) => void) => PluginListenerHandle

This is only apple event. Is this right?

---

Next, I suggest union type for this:

addListener(eventName: PaymentSheetEventsEnum.DidSelectShippingContact, listenerFunc: (data: any) => void) => PluginListenerHandle

↓

addListener(eventName: PaymentSheetEventsEnum.DidSelectShippingContact, listenerFunc: (data: DidSelectShippingContact | ShippingContact) => void) => PluginListenerHandle

Usage:

Stripe.addListener(PaymentSheetEventsEnum.Completed, (data) => {
  if (Platform.is('ios')) {
    const handleData = data as DidSelectShippingContact;
  }

  if (Platform.is('android')) {
    const handleData = data as ShippingContact;
  }
});

What do you think? Thanks.

[rgarciadelongoria]

First, I think that this can change:

addListener(eventName: ApplePayEventsEnum.DidSelectShippingContact, listenerFunc: (data: DidSelectShippingContact) => void) => PluginListenerHandle

This is only apple event. Is this right?

Next, I suggest union type for this:

addListener(eventName: PaymentSheetEventsEnum.DidSelectShippingContact, listenerFunc: (data: any) => void) => PluginListenerHandle

↓

addListener(eventName: PaymentSheetEventsEnum.DidSelectShippingContact, listenerFunc: (data: DidSelectShippingContact | ShippingContact) => void) => PluginListenerHandle

Usage:

Stripe.addListener(PaymentSheetEventsEnum.Completed, (data) => {
  if (Platform.is('ios')) {
    const handleData = data as DidSelectShippingContact;
  }

  if (Platform.is('android')) {
    const handleData = data as ShippingContact;
  }
});

What do you think? Thanks.

Hi @rdlabo.

Ok, I think you are telling me to change only the README.md file, correct?

I have changed in this file the type any to DidSelectShippingContact since it is the type with which the new event works.

[rdlabo]

@rgarciadelongoria No, readme is created by docgen automatically. But I spent too much time approving your pull request. Also, this is not a critical issue.

Once merged, I will work on another pull request. Thanks again, great your work and pull request!

[rdlabo]

@rgarciadelongoria Thanks for contribute. We released v4.1.0! Please try it. https://github.com/capacitor-community/stripe/releases/tag/v4.1.0