continues to provide one of the best customer satisfaction with several benefits of the services it provides. For merchants, Pay allows its users to experience fast and seamless payment. Shopify recently joined the list of online stores that added payment through Pay.

For merchants, you need to register for a Pay account to enjoy all of the crypto payment benefits. For developers, integrating Pay into any supported online store is very easy and will take only a few lines of coding. To integrate into an online store, you need to register for Pay developer access.

This article is majorly tailored for developers that need to integrate Pay into any of the supported online stores. The article contains how to integrate on the frontend and backend. 

Steps to frontend and backend integration

There are different approaches to integrating Pay into an online store. However, this article focuses entirely on frontend and backend integration. For your frontend and backend integration, you need to register for a Pay access, add Pay SDK, create a payment, render the Pay button, and verify the payment status.

Step 1: How to register for a Pay Developer access?

To have access to a pay developer access account, 

  • Sign up for a Pay account.
  • On your Pay merchant dashboard, generate your “secret key” and “publishable key”

You will need your secret key when interacting directly with the Pay API and the publishable key for your Pay SDK.

Step 2: How to add Pay SDK?

To add the Pay SDK script, add the script in the image below to your webpage. In the code, replace the “your_publishable_key_placeholder” with your “publishable key” generated above.

Step 3: How to create a payment?

Create a payment on the server to get a payment ID. When you’ve entered your Secret Key, replace the placeholder with your own. Using curl, be aware that a colon is required after the Secret Key to preventing it from prompting you for a password.

Step 4: How to render the Pay button?

  • Create a container element on your website and embed the Pay button inside of that element. Also, include the Payment ID that was generated in Step 3 in this container (attribute is data-payment-id).
  • Afterwards, add the “create payment” method. When a consumer clicks on the Pay button, this feature is activated automatically. To avoid creating a new payment, you just need to pass the Payment ID from Step 3 to the SDK.
  • Execute the “onApprove” function to finish the process. You must provide logic to alert your server when Step 5 has been completed. When Pay takes the payment, the checkout window will show that the payment has been captured and the onApprove function will be triggered.

Visitors may manually activate frontend logic on a website. As a result, only screen updates should be handled by the onApprove method. If you want your orders to be completed, you’ll need to use server-side logic like Webhooks.

Step 5: How to verify your payment status?

Retrieve the payment and see whether it was successful on the server-side. You may simulate confirming payment in App by clicking on the QR code in test mode.

Things you should know about Pay API

With these simple steps, you can integrate Pay into your website and give your customers the option to pay with crypto. Here are a few additional things you should know about the Pay API

  1. The Pay API follows the REST architecture. Using the API is as simple as sending a form and receiving a JSON-encoded response, both of which are basic features of the HTTP protocol.
  2. The Pay API may be used in test mode without affecting your actual data or interfering with the payment networks. A test or a live request is determined by the API key used to authenticate the request.
  3. Requests to the Pay API must be authenticated using API keys. In the Merchant Dashboard, you may access and manage your API keys. You need to use your Secret Key.
  4. The “prefix sk test_” is used for secret keys in testing mode, whereas the “prefix sk live_” is used for secret keys in live testing mode. Keep your Secret Key safe, since it has a lot of power! Don’t post them on GitHub, client-side code, or any other publicly accessible site.

Comments are closed.