Crypto.com continues to provide one of the best customer satisfaction with several benefits of the services it provides. For merchants, Crypto.com Pay allows its users to experience fast and seamless payment. Shopify recently joined the list of online stores that added payment through Crypto.com Pay.
For merchants, you need to register for a Crypto.com Pay account to enjoy all of the crypto payment benefits. For developers, integrating Crypto.com Pay into any supported online store is very easy and will take only a few lines of coding. To integrate Crypto.com into an online store, you need to register for Crypto.com Pay developer access.
This article is majorly tailored for developers that need to integrate Crypto.com Pay into any of the supported online stores. The article contains how to integrate Crypto.com on the frontend and backend.
Steps to Crypto.com frontend and backend integration
There are different approaches to integrating Crypto.com 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 Crypto.com Pay access, add Crypto.com Pay SDK, create a payment, render the Crypto.com Pay button, and verify the payment status.
Step 1: How to register for a Crypto.com Pay Developer access?
To have access to a Cryto.com pay developer access account,
- Sign up for a Crypto.com Pay account.
- On your Crypto.com Pay merchant dashboard, generate your “secret key” and “publishable key”
You will need your secret key when interacting directly with the Crypto.com Pay API and the publishable key for your Crypto.com Pay SDK.
Step 2: How to add Crypto.com Pay SDK?
To add the Crypto.com 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 Crypto.com Pay button?
- Create a container element on your website and embed the Crypto.com 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 Crypto.com 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 Crypto.com 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 Crypto.com App by clicking on the QR code in test mode.
Things you should know about Crypto.com Pay API
With these simple steps, you can integrate Crypto.com 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 Crypto.com Pay API
- The Crypto.com 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.
- The Crypto.com 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.
- Requests to the Crypto.com 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.
- 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.