Hosted Page for Virtual Cards

Securely display virtual cards with Rapyd Issuing. | Enterprise

Rapyd’s Hosted Page for Virtual Cards enables cardholders to display cards online.

The virtual card numbers are secured and are only exposed upon request. The virtual cards are PCI compliant and can also work for non-PCI clients.

With Rapyd’s Hosted Page for Virtual Cards, your business can issue virtual cards on-demand for employees, contractors and other users to conveniently make purchases for business travel, transportation and buying goods.

The Rapyd Issuing API is used to generate a hosted page that can display the issued card’s full details.

Hosted Page for Virtual Cards Example

Hosted Page for Virtual Cards Workflow

Be sure to Issue a Card before employee requests to use virtual card on a hosted page.

  1. A company employee requests to use a virtual card for a company expense.
  2. You request Rapyd to Display Issued Card Details.
  3. Rapyd processes your request and sends the response with the redirect_url.
  4. You send and display the redirect_url to your employee.
  5. The employee completes the captcha and uses the URL within the 5 minutes expiration window.

How it Works

Follow the steps to Create a Rapyd Wallet, issue a Card, and Activate Issued Card before creating your Hosted Page for a Virtual Card.

1. List Issued Cards

List Issued Cards cards by contact.

Query Parameters

Description

contact

ID of the wallet contact. A string starting with cont_.

2. Display Card Details to the Customer

Send API Request Display Issued Card Details to Customer

  • The ID of the card you want to display will begin with card_

Path Parameters

Description

card

ID of the issued card, a string starting with

Hosted Page for Virtual Cards Request Body

Display Issued Card Details to a Customer describes the fields in the request.

// POST https://sandboxapi.rapyd.net/v1/hosted/issuing/card_details/card

{
 "card_color": "#f9f9f9",
 "logo": "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTNgldxyUfmVPmQV1YpTcDWo_kjX-TO_EiccQ&usqp=CAU",
 "language": "en",
 "logo_orientation": "landscape"
}

Hosted Page for Virtual Cards Response Body

Display Issued Card Details to a Customer describes the fields in the response.

{
   "status": {
       "error_code": "",
       "status": "SUCCESS",
       "message": "",
       "response_code": "",
       "operation_id": "137d6ec5-51bd-4c47-a163-3b86c8457e54"
   },
   "data": {
       "id": "hp_issued_3b4f08ef2da59d20ebc8e82a6266e50c",
       "redirect_url": "https://sandboxhosted.rapyd.net/issuing/card_details?token=hp_issued_3b4f08ef2da59d20ebc8e82a6266e50c",
       "merchant_color": "0036ff",
       "merchant_language": "",
       "merchant_logo": "https://sboxiconslib.rapyd.net/merchant-logos/ohpc_b811c506b5347ce4f107d8ee72a1ce90.jpg",
       "merchant_website": "https://www.rapyd.net",
       "merchant_alias": "N/A",
       "merchant_customer_support": {},
       "status": "NEW",
       "expiration": 1614851280,
       "card_color": "#f9f9f9",
       "logo": "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTNgldxyUfmVPmQV1YpTcDWo_kjX-TO_EiccQ&usqp=CAU",
       "logo_orientation": "landscape",
       "card": {},
       "language": "en"
   }
}

3. Redirect Your Customer to the Hosted Page

Redirect your customer to the URL you received in the response. The redirect URL appears in the redirect_url field.

📘

Redirect URL Security

  • This page is protected by Google reCAPTCHA
  • This page is accessible for 5 minutes only (since the moment it was generated)

Embed a Hosted Page for Virtual Cards Using the Toolkit Method

Rapyd Toolkit has been specially designed to embed directly into your website to give your business more control over the entire experience.

1. Create Your Hosted Page

Before embedding the iframe into your page, follow steps 1, 2 and 3 under How it Works to create your Hosted Page for Virtual Cards.

2. Collect Your Page ID

Once you create the page, in the response you’ll receive the ID of the page object, a string starting with hp_issued, (e.g. id: hp_issued_bd334669c8a80bc68c124b144c350b7f).

3. Add the Toolkit Code

Add the following code to your page:

Add HTML
<script src="https://toolkit.rapyd.net"></script>
  • Note: To run this method in the sandbox, use the following code:
<script src="https://sandboxtoolkit.rapyd.net"></script>

Add a <div> tag with id="rapyd-toolkit":

<div id="rapyd-toolkit"></div>
Add JavsScript

Initialize the Page object with the following fields:

let toolkit = new RapydToolkit({   
   button_color: "blue",
          /* Color of the Show Details button. String.
             Standard CSS color name or hexadecimal code such as #323fff.
             Default is the color that is returned in the 'merchant_color'
             field of the Hosted Page for Virtual Cards response. Optional.*/
   id: "hp_issued_bd334669c8a80bc68c124b144c350b7f",
          /* ID of the Hosted Page for Virtual Cards response. String. Required.*/
   close_on_complete: true,
          /* Causes the embedded Rapyd Toolkit window to close
             when we fail to retrieve the card details. Boolean. Default is 'true'. Optional.*/      
   page_type: "card_issuing"
         /* Mandatory for the Hosted Page for Virtual Cards
            Default is "collection". */
});

Call display Toolkit() to display the Hosted Page for Virtual Cards:

checkout.displayToolkit();

Optional Step to Close Window on Completion.
If close_on_complete is set to false, call toolkit.closeToolkit() to close the Rapyd Toolkit window.

toolkit.closeToolkit();

Insert your code that runs when the following events occur. Use your code to read the event field in the 'window' object.

window.addEventListener(issuingOnSuccess, (event) => {
                    console.log(event.detail)
                    // Sent after clicking the Show Details button and the details are successfully displayed  
                    // Client code.
})
window.addEventListener(issuingOnFail, (event) => {
                    console.error(event.detail.error)
                    // Returns an error object when we fail to retrieve the card details
                    // Client code.

Customize your page

Hosted pages can be customized using the Client Portal as described in Customizing Your Hosted Page to edit the look and feel of the page.

Updated 2 months ago

Hosted Page for Virtual Cards


Securely display virtual cards with Rapyd Issuing. | Enterprise

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.