Using Hosted payment SDK to build a Payment Gateway on Shopify

Posted by Stephen on March 19th, 2021

SSL (Secure Sockets Layer) is a superb device that gives security over interchanges on the Internet. It assumes an unavoidable part in the businesses of merchants on Shopify. Thusly, they may be exceptionally disturbed and on edge when SSL vanishes on their Shopify stores.

This occurrence may prompt a few issues with security, which most likely by one way or another influences the activity of your business.

That is the motivation behind why we present to you the composing SSL unavailable on Shopify: How to fix the "SSL unavailable" issue rapidly. Peruse it cautiously to discover the solution to your concern.

What is Shopify Hosted Payment SDK?

Shopify Hosted Payment SDK is a payment passage planned and upheld by the Shopify group to help interface your hosted payment page with all checkouts carried out on Shopify. All Hosted Payment SDK mixes are grounded in a full-page divert on the last checkout step of the checkout stream. This offers a normalized interface for a ton of outsider payment gateways. By utilizing predefined values, Shopify checkout will divert guests and customers to the payment page that you give. In the wake of completing the payment, they will be diverted back to the Shopify page where the request status is shown.

How does it work?

• Stage 1: In this stage, your customer places an order with Shopify Checkout. Their email, shipping address, and delivery method will be filled in. Then they have to select your gateway as a payment option.

• Stage 2: After step 1, the customer will be redirected to the URL of your gateway using a post request. Your gateway’s job is to verify the x_signature value and presents its own hosted payment page to your customer.

• Stage 3: On the hosted payment page provided, the customer needs to pay for the order.

• Stage 4: Customers who have got the payment flow done will be redirected back to x_url_complete with required Response Values as query parameters, including x_signature. Those who exit the payment flow before finishing it will be redirected back to x_url_cancel.

• Stage 5: It would be the best working method for your payment gateway to be in use to post a callback to x_url_callback with the same Response Values. This is to make certain that all orders can be successfully completed even if the Shopify - customer connection is prematurely terminated. Please kindly note that all callbacks need to be in POST HTTP x-www-form-urlencoded format.

• Stage 6: Customers will be redirected to a thank-you page for completing an order. However, please note that:

  • HTTP 200 does indicate successful receipt of a Shopify callback. Otherwise, we recommend up to 5 retries together with an interval of 1 minute (at least)

  • Shopify will ignore duplicate requests.

How to Build Shopify Hosted Payment SDK

Developing your hosted payment gateway integration using the Hosted Payment Simulator

Step 1: Add a payment gateway

Change your gateway’s Redirect URL to https://offsite-gateway-sim.shopifycloud.com/ or add a payment gateway.

Step 2: Activate your payment gateway

Now you can see your gateway available in your development store, located under the drop-down list named Credit Cards or Alternative Gateways. Find and activate it with these credentials:

• Username - any non-empty value
• Password / HMAC Key - iU44RWxeik

This gateway will redirect your customers to https://offsite-gateway-sim.shopifycloud.com/.

Step 3: Complete-a-test-purchase

Try placing an order on your website. In case there is no product in your store, then it’s a must for you to add one before completing a purchase.

Adding a gateway to your Shopify Partner’s account

Step 1: Log in

Sign in to your Shopify Dashboard.

Step 2: Open Gateways

In the Shopify Dashboard, choose Gateways which is under the Apps section.

Step 3: Create a Gateway

Next, choose Create Gateway

Step 4: Fill in required fields

Fill in these fields with your gateway’s information:

• Gateway Name: It will be displayed in the merchant payment settings and on checkout pages as a payment option.

• Gateway Website: This URL will be provided within the payment settings. Customers can also use it to review your service.

• Gateway Logo: The logo will be displayed in the size of 24 x 220 pixels.

• Gateway Category: Your gateway will be displayed under this category, within payment settings.

• Login Label: Describes the sign-in credential types for the gateway like Account Number or Username.

• Password Label: Describes passwords for the gateway like Secret Key or Password.

• Redirect URL: Customers will be redirected to this address at checkout. All request values that will be sent must be handled by this URL.

• Sandbox URL: You are allowed to send test transactions to this URL. This is optional.

• Payment Types: Appears next to your logo at checkout.

• Countries Served: Countries where merchant accounts are available and are supported.

........

Read more details guide here.