Checkout widget

Introduction

Checkout is a payment gateway designed for processing debit and credit card payments online, offering access to local payment methods through global payment platforms. NymCard has integrated with Checkout, enabling users to transfer funds from their debit or credit cards to their NymCard wallet.

This document describes the Checkout widget, which allows non-PCI-compliant customers to securely collect and submit card details. It supports the following functionalities:

• Users can manually input the card number and other required details.

• The widget can read card details from an image for seamless data entry.

Checkout widget usage

In order to open the Checkout widget, take the following steps:

1. Perform “Create LUT” API. LUT is a limited usage token, which expires after 10 minutes after being created. Each LUT will work for 10 requests. For creating LUT you need to fill the following parameters:

• 'source_id' - put "default_pci_source" here

• ‘operation’ - put "CHECKOUT_TOKEN" here

Below there is an example of request:

curl -X POST "https://{env_url}/v1/orders/users/{id}:createLut" \
          -H "Content-Type: application/json" \
          --header "ApiKey: tenant1-key" \
          -d '{
            "source_id": "default_pci_source",
            "operation": "CHECKOUT_TOKEN"
          }'

Response sample:

{"token":"SMJXdC/sCRogr0K7fuMz0/6QFLBDLglA2rCeZAPgS9Rb04L/BW3mYXkY2L4nab8b"}

2. Encode token together with ‘cardId’ and 'userId', values using Base64 encryption format.

Below you can find an example of data which should be encoded:

{ "token":"4hNuBSoaezq+KygTkjjihvLtzQMcNZc/pvQbTDd/bXJDDqi0wHli32aPqUd6mcnf",
"userId":"Sunny_25APRIL_DevEnv_0000",
"cardId":"muhaycheckoutAEDCardAccount07MAY25"}

3. Take the following URL and add base64 encrypted token to it. Below you can see an example:

https://{widget_url}/cards/eyAidG9rZW4iOiJJTjlmVlpuQmlxV1dvcHgvbmlIWGo5Qi9mRnk4ckJyamYvTC9WYkR5MkJQMnArcWNkTnpUMGZlRHp5R2grZHZCIiwidXNlcklkIjoiU3VubnlfMjVBUFJJTF9EZXZFbnZfMDAwMCIsImNhcmRJZCI6Im11aGF5Y2hlY2tvdXRBRURDYXJkQWNjb3VudDA3TUFZMjUifQ==

4. The mobile app will need to create an iframe to display the widget inside a native view. Below you can find an example code (please adapt it to your own standards/code):

For iOS (Swift/Objective-C):

let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height))
let url = URL(string: "https://your-widget-url.com")!
let request = URLRequest(url: url)
webView.load(request)
self.view.addSubview(webView)

For Android (Java/Kotlin):

WebView webView = new WebView(this);
webView.loadUrl("https://your-widget-url.com");
setContentView(webView);

5. The checkout widget will be loaded. Below you can find two flows for performing checkout payments:

• Using existing saved card details

• Using the card details of a newly-created card

Loading Funds from already added card

Take the following steps:

1. Select the Receiver Card and call the checkout widget.

2. Widget will display the list of already added cards. Select the necessary card and click Confirm:

1. Enter money amount which you want to transfer, select the way how the fee will be deducted (Deduct from amount or Charge from the card) and click Pay Now:

1. If 3DS setting is set as true, then you will get screen where you can enter the OTP code:

1. After that you will receive a message about a successful operation.

Loading Funds using new card

Take the following steps:

1. Select the Receiver Card and call the checkout widget.

2. Widget will display the list of already added cards together with Add a new card button. Click on it:

1. Enter such card details, as Card number, expiry, CVV, cardholder name. Activate Save card details toggle button to save details for further payments. Click Confirm button:

1. Enter money amount which you want to transfer, select the way how the fee will be deducted (Deduct from amount or Charge from the card) and click Pay now:

1. If 3DS setting is set as true, then you will get screen where you can enter the OTP code:

1. After that you will receive a message about a successful operation.

Deleting already added card

If you want to delete already added card, take the following steps:

1. Select the Receiver Card and call the checkout widget.

2. Widget will display the list of already added cards. Click on the Bin icon next to the card which you want to delete:

1. Confirm the deletion by clicking the Remove button:

After that you will receive a message about a successful deletion.