gordonchan – Gordon Chan's Tech Blog

Integrate PayPal in 2025

Founded in 1998, PayPal provides a secure way to conduct transactions over the internet without sharing sensitive financial information, such as credit card numbers.

Standard vs Advanced Checkout Integration

Over the years, PayPal has evolved beyond just offering a Checkout Button for digital wallet transactions. Today, it provides various payment options, including local payment methods (often referred to as alternative payment methods) like Giropay and iDEAL:

https://developer.paypal.com/docs/checkout/apm

In addition, PayPal supports direct credit and debit card transactions (known as Advanced Credit/Debit Card or ACDC), as well as Apple Pay and Google Pay:

You can review both Standard and Advanced integration options to determine what best fits your business needs.

Save Payment Method

Beyond one-time checkouts, which typically require buyers to log in to PayPal and navigate through the PayPal checkout flow, merchants can enable Reference Transactions to integrate the Save Payment Methods feature (also known as Vaulting):

https://developer.paypal.com/docs/checkout/save-payment-methods

By utilizing the PayPal JavaScript SDK, you can implement the PayPal button with the ability to save payment methods during purchase or for future use. This ensures a smoother checkout experience for members, without the need to store sensitive payment data on the merchant’s side.

PayPal Pay Later

If you are a merchant in the United States, United Kingdom, Germany, France, Italy, Spain, or Australia, consider promoting the PayPal Buy Now, Pay Later option prominently on your product pages. This messaging informs buyers that they can make purchases now and pay later when checking out with PayPal. Such options can improve conversion rates, attract new customers, and increase order values, as buyers are aware of the financing options available to them. Additionally, buyers can track their payment history and outstanding payments within their PayPal accounts.

Fastlane

PayPal partners with various shopping cart and e-commerce platforms, some of which have integrated Fastlane:

https://developer.paypal.com/studio/checkout/fastlane

Fastlane is a blend of PayPal solutions, utilizing drop-in components that combine ACDC and vaulting. This simplifies the storage of payment methods using a combination of email, mobile, and One-Time Password (OTP). When a buyer checks out on a Fastlane-integrated website and consents to store their payment information, they can use their stored payment method on other participating websites by entering their email and receiving an OTP, without the need for memorizing password for login.

No Code Solution

For small to medium-sized businesses (SMBs) without developers, PayPal offers a no-code solution to collect payments. This option is suitable for those with fewer transactions:

https://developer.paypal.com/studio/checkout/no-code

You can generate a payment link, allowing the buyer to enter the amount, and then wait for payment notification to confirm the sale.

PayPal continues to offer Invoicing and Subscription services. While these features aren’t new, they remain essential tools for small and medium-sized businesses (SMBs) to collect payments conveniently:

To conclude,

Now you should have a broader understanding of what PayPal offers. To experience these features, you need to integrate with PayPal’s latest solutions. Many legacy integrations, such as Web Payment Solutions (WPS), Payment Pro, PayPal Pro, and NVP/SOAP, are still prevalent across the internet. If you use shopping carts like WooCommerce or OpenCart, ensure you are utilizing modern payment plugins. Various e-commerce platforms are continually upgrading their PayPal integrations to provide enhanced features for merchants.

Checkout PayPal Developer portal for more detail: https://developer.paypal.com/ for deeper understanding of PayPal solutions

Common PayPal Integration Pitfalls: How to Avoid Costly Errors

In my experience assisting various merchants with PayPal integration, I’ve learned valuable lessons about common mistakes that can lead to costly errors. In this blog, I’ll highlight these pitfalls and provide guidance on how to avoid them to ensure a smooth integration process.

Common Pitfalls or Misunderstandings

Avoid Using Legacy, Deprecated PayPal Solutions
- PayPal has been around for a long time, and while it offers various solutions, many are legacy or deprecated (e.g., Xoom, Web Payment Standard, PayPal Payment Pro, NVP-SOAP). Sticking to these can lead to issues with functionality and support.
Misconception About Member Checkout Only
- Many believe PayPal only supports member checkouts. However, PayPal allows guest checkouts without requiring users to log in, making it easier for customers to complete their purchases.
Lack of Technical Support for Legacy Solutions
- Deprecated solutions often come with limited technical support. PayPal System Upgrades could lead to regressions happens on legacy and deprecated solutions that require longer troubleshooting times. Nowadays, PayPal promotes REST API and JS SDK, which offer enhanced capabilities, including support for other payment service providers.

Deep Dive into Integration

REST API as the Promoted Integration Approach
- While REST API is the recommended integration method, PayPal no longer provides server SDKs. Merchants should use their preferred programming languages to make REST API calls effectively.
Understanding PayPal Checkout Steps
- The PayPal Checkout process involves various steps, some requiring payer action and others requiring merchant action. A PayPal Checkout is initiated as an Order Request via the Order V2 API. It’s crucial to track the order’s status through attributes like purchase_units[0].payments to ensure payments are completed properly.
Order Capture Requirement
- After creating a PayPal Order and being approved by the payer, merchants must perform the payment capture, either through a JS SDK or an API-only approach. PayPal doesn’t auto-capture. And an approved orders will expire in 6 hours if left idle.
Immediate Order Capture Response
- Merchants can receive an immediate response from the Order Capture API, rather than relying on Instant Payment Notification (IPN) or webhook, which may have delays. This approach optimizes the checkout experience by reducing wait times for payment status.
Disable Non-Instant Payment Methods
- PayPal supports non-instant payment methods like bank deposits (eChecks), which can delay fulfillment. Merchants can avoid this by adjusting account settings to only accept immediate payment methods, ensuring quicker transaction processing.
- Merchant can disable this from Account Settings > Website Payment preference. Or specify the checkout experience to only accept IMMEDAITE PAYMENT METHOD: payment_source.paypal.experience_context. payment_method_preference = ‘IMMEDIATE_PAYMENT_REQUIRED’.
Managing Unsuccessful Payments
- Payment failures can occur for various reasons, including declines by PayPal’s risk engine or issues with the buyer’s card. Merchants need to handle declined payments effectively and communicate clearly with customers about their payment status.
Addressing Fraud Attempts
- Fraudsters may attempt to exploit the checkout process by initiating incomplete transactions. Merchants should focus on capturing amounts rather than just conversion rates (CR) to assess the effectiveness of their checkout processes.

Conclusion

By addressing these common pitfalls during PayPal integration, merchants can avoid significant issues and leverage PayPal’s features to benefit their business. Proper handling of these aspects not only saves trouble but also enhances the overall payment experience for customers.

The Evolution of PayPal Integration: From Legacy to Modern Solutions

PayPal has a long and storied history in the digital payments landscape, having evolved significantly since its inception. As the needs of merchants and consumers have changed, so too have the integration patterns that PayPal offers. This blog will explore the journey of PayPal’s integration methods, the challenges of deprecated solutions, and the benefits of adopting the latest REST API and JavaScript SDK.

A Long History of Payment Integration

Throughout its history, PayPal has introduced various integration methods to accommodate the evolving digital payment ecosystem. Some notable patterns include:

Payment Pro: A powerful tool for merchants seeking advanced payment processing capabilities. Basically to provide direct credit card payment offer.
Web Payment Service (WPS): Aimed at simplifying online payments for small businesses. Allow merchants build simple web payment form for accepting Credit Card Payment.
NVP/SOAP APIs: Earlier API solutions that provided merchants with a way to integrate PayPal to offer Express Checkout.

However, many of these methods have been deprecated. The primary reasons include the inability to support modern web payment standards, such as 3D Secure (3DS), which has become a necessity for secure online transactions.

The Challenges of Deprecated Methods

The latest integration approach from PayPal is the REST API, which works in conjunction with the client-side JavaScript SDK. This modern solution has transformed PayPal’s offerings, allowing merchants to go beyond simply adding a checkout button to their websites.

With REST APIs, PayPal is no longer just about wallet payments. The platform now offers extensibility and supports a variety of alternative payment methods, including:

Apple Pay
Google Pay
Direct credit card integration

This flexibility caters to the diverse needs of merchants and their customers, enhancing the overall payment experience.

Encouraging Modern Integration

As of Fall 2023, PayPal has begun to actively encourage merchants to adopt these modern integration methodologies. Continuing to use legacy, deprecated methods not only limits functionality but may also lead to a lack of technical support. As PayPal evolves, it is essential for businesses to stay current with integration trends to ensure their payment systems remain robust and secure.

Simplifying the Transition

Switching to modern REST APIs on the server side and the JavaScript SDK on the client side is a straightforward process. It’s not “rocket science.” Developers can make RESTful API calls using their preferred tools, free from the constraints of SDK updates. This flexibility allows for a more tailored integration experience that meets specific business needs.

For more information on PayPal products and integration options, visit PayPal Developer. To dive deeper into REST API integration, check out the PayPal REST API documentation.

By embracing these modern solutions, merchants can enhance their payment capabilities, improve customer experiences, and ensure they are well-equipped for the future of digital payments.

Embracing Modern Integration

As we look to the future, it’s crucial for merchants’ developer to start familiarizing themselves with the JavaScript SDK and REST API. Key steps include:

Integrating checkout with the Order v2 API and JS SDK.
Performing payment refunds using the Payment v2 API.
Integrating Webhooks instead of relying on IPN for real-time notifications.
Checking account transactions with the Transaction Search API.

By adopting these modern integration methods, merchants not only ensure that PayPal can continue to provide technical support but also enhance their service offerings. Leveraging the latest integrations allows for a more seamless and efficient payment experience, ultimately benefiting both businesses and their customers.

Now is the time to embrace these advancements and take full advantage of what PayPal has to offer!

Youtube Channel: AsmrProg

Youtube just prompt an interesting video for me, a guy just record his programming.

Youtube channel: https://www.youtube.com/@AsmrProg

It looks nothing special at first sight, but the longer I look at, the more impressed by his work. He created the Youtube channel that full of his coding sharing, the content is well organized, and the work is fully followable.

The channel has a lot of videos already, one of the series is that the author aims to work out a 100 days coding. He not only shots the videos, but also provide a fully accessible Github repository so people can learn from him. The work that he codes are not just simple UI / layout building, but also with some interactive game like memory-card game game / Gameboy Tetris with JS .

One of the special point is his video has NO TALKING, which is so great because there are so many talkative Youtuber sharing coding with lots of scripts, at some point it is quite annoying. In this channel, you won’t be bothered by any lengthy speaking, all you have is to enjoy how he code the outcome, and along the time you can learn some JS libraries and coding pattern.

I hope you also enjoy this channel.

Enabling SSL with Cloudflare

Finally, gordon-chan.net is fully run in HTTPS.

It is shame that as a webmaster I know how HTTPS is essential nowadays, even my website is not a e-Commerce site, it is also essential for SEO ranking.

Cloudflare is famous and a wellknown web performance and security solution company, apart from offering 1.1.1.1 DNS Service, sometime their domain price is also competitive than NameCheap and GoDaddy.

As I wish to get the site run under HTTPS, I know I need to setup SSL. Let’s encrypt is an option on my webhosting, however it requires me manually generate the cert every 3 months, and for every sub-domain, which is tedious process and I giveup or eventually forgotten over time.

Tonight when I try explore Cloudflare, and I find Cloudflare mentions they offer free SSL. I was thinking is there any plan subscription needed in order to enjoy it and insanely it is not. It is completely FREE.

So, I follow the step to turn my site into HTTPS, which basically involves:

1. Sign up a Cloudflare account (fair enough)

2. Login Cloudflare account, go to “Website”, click “Add a website”

3. Fill your domain for Cloudflare to search your web DNS config

4. In the Select Plan, scroll down for “Free plan”

5. Wait for Cloudflare look for your DNS records and review the DNS records that they found (You need to ensure the record are correct, and add any missing records)

6. Click “Continue”, Cloudflare will then show you the nameserver that you need to update in your Domain hosting. For my case is GoDaddy. I login to GoDaddy for my domain’s DNS Records. Be caution, once you update the nameserver, the DNS records in your Domain Host will gone. Therefore once again to ensure all DNS records are exists in Cloudflare. If things alright, update the nameserver and wait for its activation.

Normally the process need for 72 hours. Turn out, my whole process only need to wait for <10mins. I check all my sub-domain, login to my web hosting, and all work normal. What a magic!!!

Just to note, having a HTTPS site is not necessary mean your site is secured. It just ensure the communication between browser and your web server is secured. I came across some store owner with their eCommerce software with security risk and they didn’t apply patch, and turn out their website file being modified by malicious code and security risk exposed.

Wish this sharing helps you turn your website into HTTPS.

Shopify is Great, but these are the things you need to notice

I have been an active Shopify expert in Hong Kong since 2014. No doubt seeing Shopify become a strong platform and I regret not buying their stock in-time…

I believe not only Shopify technical talents and their proactive technology advance bring today Shopify, but also the strong developer community, for which we call Shopify Partners / Shopify Experts contributed in their success. Various apps / theme / tailor-made development services around the world help merchants work out the things they look forward, or providing advices that help giving birth to different success merchant stories.

Yet, even thought you also also like Shopify as of what I do, I have to point out the things below so you could treat that as a reference when you run your store.

Magic number: 1000 and 99 and 16

1000 is a magic number in Shopify, where:

A collection can hold at most 1000 products
- If you have a collection with more than 1000 products, you need to refine your collection to have fewer products. It is not a big deal for Small-Medium business, but for large enterprise / marketplace, it is an obstacle.
A collection can holds at most 1000 tags
- Products in Shopify can has tags. For a given collection, it has an array variable for theme developer to make use of it for function like filtering. Yet, such array can hold at most 1000 tags.

99 is a magic number in Shopify for Product variant

For a given product, you can setup some options, such as size / color / pattern etc. The number of combination of the options form the list of variants. Say, there are size S, M, L, and color with red and yellow. There will be 6 variants. And you cannot have more than 99 variants.

Again, this is fine for most of the scenario unless you have business like color lens, which ash different diopters (0.5,1,1.5,2…8.5, 9…etc) and colors, it likely results in huge variants list.

16 is the latest magic number newly in Shopify Store 2.0,

With Shopify Store 2.0, theme can has sections and block beyond homepage. Many theme developer build theme allowing merchant to add sections / blocks for configurable content like FAQ as the example, merchant can create a FAQ section and add questions. With such new magic 16, you can at most add 16 blocks for the FAQ questions.

Discount code oversell

As a merchant sometime you may run Flash Sale with limited discount for a given period of time as well as number of usage. Shopify allows you setup discount with period and no. of usage and some merchant shall use it as a way to control how many discount take place. Yet, I have merchant who run the Flash Sale for PS5 and some attractive electronic applicants using discount code with limited usage. Yet, the campaign is very success with probably near couple hundred people fight for the competition and turn out, oversell happens. The explanation from Shopify Plus support sharing it is possible to happen: for an order creation, it is allocated to some thread process. When there are many order fall to different process for the transaction/order creation, different threads have chance to get a non-updated copies of the discount code usage, leading the oversell. It sounds sensible to me, yet, it is a problem for merchants and what merchant can only do could be reducing the discount availability such as reducing the quota.

Discount code quote being occupied by abandoned checkout order (for checkout with 3rd payment service provider), no way to release

It is related to previous item. My merchant use 3rd payment service provider, meaning the customer will redirect from Shopify checkout to the payment gateway for the payment. For a hot campaign, there could be many customers attempt to checkout but didn’t complete their checkout, while those discount code would be classified as used. Imagine there are other customer also attempt to use the discount and it being feedback as discount code has no more quota.

From merchant perspective, they see the used quota is not fully redeemed from counting the transaction records, say, there is 5 quota for the discount code, the merchant sees the discount being used by 5 times already, while he only see 2 code applied to completed transaction. They try to find which orders are using the code but they fail. It is because the discount code detail only show the number of count being used but has no information of which 5 orders applied the code. Merchant can only find the code in Abandoned Checkout section manually. Yet, since it is abandoned checkout, there is no way to cancel such checkout for releasing the discount code… The lack of control of the discount code usage upset merchants.

No collection hierarchy

Merchants with large product size will find it hard for merchandising their product collection in Shopify. Shopify goes for flat collection principle. You can at most try combine with tagging / vendor attribute to form sub-collection. If your business work like marketplace, with collections have multiple sub-level. Shopify can only achieve this visually, but it does not offer the collection hierarchy. Say, if you want to have collection hierarchy like Women > Clothing > Dress, it is not having such logic in Shopify upon collection setup. Some developer leverage Navigation menu to accomplish such hierarchy-concept, and to have Women collection created with rules cover Clothing and Dress collection, as well as Clothing with rules that cover Dress Collection.

Too simple Member System

As a merchant, they wish to have member system which allow them to customer information including phone / preference. In Shopify….. no phone field, no additional profile attributes. You could accomplish similar feature by means of using customer tagging or otherwise to use App in aid of it, this leads to problem like data sharing with 3rd party, or difficulty on account spam prevention.

Not only that, for customer, when they login to their account, they cannot change email / reset password. The only way for reset password is to proceed Forget Password…

As a merchant, lacking of Date of Birth or phone number make limitation in marketing strategy or premium customer service.

The list is not stop by here. I shall further update the post when I can articulate what I encountered in the future. Wish the shared information enrich your understanding toward Shopify. You can also consider to checkout my consultant service so I can help you resolving the questions that you encountered.

You can sign up Shopify with this link, or you can ask me for help setup Shopify store with me has a collaborator access to guide you through the onboarding or store setup.

Bespoke by Shahina

Some days ago, I helped a merchant onboard Shopify from Square-space.

She wanna have a much easier way to manage her product, and eventually help her tailor made various widget to facilitate adding different type of her products to cart.

Bespoke by Shahina is a self-own brand business providing diamond & gemstone concierge service, making precious, beautiful jewellery with diamond and gemstone. There are different type of jewelleries: band / ring / ear-ring / necklace and various accessories. Some items are new to me, like:

Signet:
https://bespokebyshahina.com/products/signature-diamond-signet-ring
You can mark your name to the ring. Good for couple.

Custom Silver Cufflinks:
https://bespokebyshahina.com/products/custom-silver-cufflinks

Have your baby footprint print on a cufflink, good for parents.

She has many products offer customization, you can select how many diamond / gemstone, or add chain extender, or even add letters (which could be for your name initial)

See if this is a good gift idea source for upcoming festival or your memorial days.

Bespoke By Shahina: https://bespokebyshahina.com/

Shopify Product.Gift_Card attribute boolean check

Tonight being bothered by a Shopify attribute weird syntax.

Having a Gift Card product page, I want to show different UI vs normal product. I user product.gift_card and try to obtain the boolean value for the different UI. But I keep receive nothing.

Normally I try look up the product.json by adding .js at the end of the product URL. And I find there isn’t.

I have use line_item.gift_card for similar purpose, which give me expected value, so I am surprised I cannot get the expected value upon calling product.gift_card.

I connect with Shopify Plus support, and they typically say it should be my theme related rather than any regression in the system. Fair-enough~

Until a moment, I spot the product.gift_card in the developer doc has a Questionmark, i.e. product.gift_card? where that questionmark sounds to me to be a typo. But honestly not! It is the killer character that cause me fail to get the expected boolean. I cannot find another attribute has such un-usual suffix character. And I hope you didn’t struggle too long like me.

Useful blogs for continue advancing as a web engineer

As a web engineer, you need to keep yourself advance, learning from giant tech company is a good choice. Here are some of the blogs I follow:

https://shopify.engineering/
As a Shopify Expert, no doubt I need to follow what’s happening in Shopify Engineer world. By knowing how they continue scale up the platform or any news in advance on storefront rendering will help me plan about my development for development opportunities.

https://netflixtechblog.com/
How can a over-the-top content platform and production company support operating their platform / video delivering to numerous video consumers smoothly and gather the statistic to come up a big data analysis, their blogs share such golden insight.

https://medium.com/paypal-engineering
As a new joiner of PayPal (since Aug 2020), I start following the blog to know more about what is happening PayPal engineers are working on to improve our customers and merchants end-user experience so as to achieve the great 2021 initiatives.

https://engineering.fb.com/
Although someone would say Facebook start outdate, or suitable to adult but not teenagers, no-doubt FB is a social platform that backed up various technical advancement. The contribution on GraphQL / MySQL and articles about their data centers are really cool to follow.

https://eng.uber.com/
Uber famous in how they handle the huge live-time data in organising every transport / car moving. Their articles about how they architect their system, money movement, how they use latest technology to empower their system and services are awesome!

https://medium.com/asos-techblog
https://medium.com/ynap-tech
As an ex-fashion company tech person, I need to be aware of how other fashion company tech advancement. ASOS and Net-a-Porter Tech blog are 2 majors source of Tech nutrients I would absorb from so as to learn what advancement we could adopt.

Although the content in the blog / Medium mentioned above could be quite backend side, as a web engineer (I am try step into an area somewhere beyond frontend development), it is challenging but also they are valuable resources to learn from them, which often got insight like something they probably have been failed for lots of time and finally got overcome the technical bottlenecks. This kind of insight are essential for excelling oneself to achieve higher technical advancement. If you not yet start having such habit, act now and build up such habit~