ConvesioPay

## 🚀 Theneo

Theneo is the quickest, simplest way to generate high-quality, interactive API docs. Just import your API collection and we'll take care of the rest.

**⚠️ Note:** All of the stated endpoints and sections are for demonstration purposes only. Theneo does not manage payments API. Get sales data, itemize payments, push orders to POS, and more.The Orders API provides a one-stop shop for integrating advanced payment functionality. You can itemize payments with custom line items or catalog objects, send orders to real Point of Sale devices to be fulfilled, and more.In addition, the Orders API allows you to look through all of a seller's previous sales and returns itemization data, customer references, and other information from POS or online transactions.

<img src="https://assets.website-files.com/61f7e03934c23c1dcc9c3cd4/6306089ecc13c15fe0a7e006_Main page_2 (with visual studoi code logo) 2.svg" alt="" height="237" width="322">

### Generate API Documentation

- Build interactive API docs
- Tailor you documentation
- Create and launch quickly
- Update easily within seconds
- Built for everyone
    

# Integrations

Import your collections manually or use our integrations to automatically migrate your work from:

- Swagger
- Postman
- Github
    

[  
](https://www.theneo.io/#)

[  
](https://app.theneo.io/signup)

Introduction

API Authentication

Authentication and API Keys

Connect an Integration

Disconnect an Integration

🚀 Theneo is the quickest, simplest way to generate high-quality, interactive API docs. Just import your API collection and we'll take care of the rest.

⚠️ Note**:** All of the stated endpoints and sections are for demonstration purposes only. Theneo does not manage payments API. Get sales data, itemize payments, push orders to POS, and more.The Orders API provides a one-stop shop for integrating advanced payment functionality. You can itemize payments with custom line items or catalog objects, send orders to real Point of Sale devices to be fulfilled, and more.In addition, the Orders API allows you to look through all of a seller's previous sales and returns itemization data, customer references, and other information from POS or online transactions.

<img src="https://assets.website-files.com/61f7e03934c23c1dcc9c3cd4/6306089ecc13c15fe0a7e006_Main page_2 (with visual studoi code logo) 2.svg" alt="" height="168" width="200">

### Generate API Documentation

- Build interactive API docs
- Tailor you documentation
- Create and launch quickly
- Update easily within seconds
- Built for everyone
    

# Integrations

Import your collections manually or use our integrations to automatically migrate your work from:

- Swagger
- Postman
- Github

Getting Started

Including ConvesioPay.js

Initializing ConvesioPay.js

Checkout Component

Create Component

Create Component BETA (OL)

Mount Component

Update Component

Events and Validation

Payment Methods

Global Level

Integration Level

List Integration Payment Methods

Update Integration Payment Methods

Payment Intents

Create Card Token

Create ApplePay Session

Create ApplePay Session BETA (OL)

Create GooglePay Session BETA (OL)

Create BTCPay Session

Create BTCPay Intent

Payments

Payments Life Cycle

Creates a new customer for a business.

You must provide at least one of the following values in your request to this endpoint:

 *   `given_name`
 *   `family_name`
 *   `company_name`
 *   `email_address`
 *   `phone_number`

Create a Card Payment

Create a Card Payment BETA (OL)

Create a Payment Link

Test Cards

Webhooks

3D Secure Authentication

List Payments

Get a Single Payment

Refund a Payment

Manually Capture Payment

Cancel a Payment

Server-to-Server Payments

Create an S2S Card Payment

Add a Card On File

Subscriptions

Recurring Payments

Create a Card On File Payment

Customers

Update Cards on File

Theneo Demo TechCrunch

ConvesioPay Checkout Integration API

Live

Test

<p class="slate-p " ></p><h2 class="slate-h2 " >🚀 ConvesioPay</h2><p class="slate-p " >ConvesioPay is the ultimate enterprise payments platform, designed to reduce risk and increase revenue – all with white-glove support by Convesio&apos;s expert support team. ConvesioPay integrates seamlessly with our comprehensive commerce platform, providing advanced engagement marketing, scalable infrastructure, and essential growth features for businesses of all sizes.</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Enterprise scale for businesses of all sizes</div></li><li class="slate-li " ><div style="position:relative">Transact on the web and via invoice</div></li><li class="slate-li " ><div style="position:relative">Robust reporting and administrative tools for managing payment operations</div></li><li class="slate-li " ><div style="position:relative">Full-stack support from website to payout, via Slack and email</div></li></ul><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/815b5e3b-35c1-4961-850e-7f511caf187c-67084a40bd7bc9b280dc3c39.png" alt="" style="
              width:651px;
	            height:844px;
	            aspect-ratio:651 / 844"
         /></div></figure></div><p class="slate-p " ></p>

ConvesioPay is the ultimate enterprise payments platform, designed to reduce risk and increase revenue – all with white-glove support by Convesio's expert support team. ConvesioPay integrates seamlessly with our comprehensive commerce platform, providing advanced engagement marketing, scalable infrastructure, and essential growth features for businesses of all sizes.

<p class="slate-p " >Every ConvesioPay Checkout API integration requires the following credentials to perform all functionality securely and efficiently:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><code class="slate-code">apiKey</code> - Identifies the requesting account, can be used client side.</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">secretKey</code> - Required secure credential for all backend requests, must NOT be exposed client side.</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">clientKey</code> - A client key is required for each website the Checkout Component is mounted on and whitelists that host as an authorized destination for your integration to take payments on.</div></li></ul><p class="slate-p " >All necessary integration credentials (ie secret key, API key, client key…required for <a href="67084a40bd7bc9b280dc3cfe/67099ad7659ce1fd171da819" target="">Convesio.js</a>) can be generated and viewed on the <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings. Although, it is possible and recommended to generate these on behalf of the merchant with 1 click with the <a href="689a53c1fa672f8c7cf51e19/689b92cadd190b3ba859a9f1" target="">Connect</a> API.</p><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/54ce3849-9027-4a3f-a7d1-ac7a38bd1daa.png" alt="" style="
              width:1115px;
	            height:574px;
	            aspect-ratio:1115 / 574"
         /></div></figure></div><p class="slate-p " ></p><p class="slate-p " >All API requests must be made server side and over <a href="http://en.wikipedia.org/wiki/HTTP_Secure" target="_blank">HTTPS</a>. Calls made without <code class="slate-code">https://</code> or proper authentication will fail.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=error ><div class="callout-icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.08366 9.9801C9.25033 9.9801 9.39269 9.92107 9.51074 9.80302C9.6288 9.68496 9.68783 9.53566 9.68783 9.3551V5.31344C9.68783 5.14677 9.62533 5.00441 9.50033 4.88635C9.37533 4.7683 9.22949 4.70927 9.06283 4.70927C8.88227 4.70927 8.73296 4.7683 8.61491 4.88635C8.49685 5.00441 8.43783 5.15371 8.43783 5.33427V9.37594C8.43783 9.5426 8.50033 9.68496 8.62533 9.80302C8.75033 9.92107 8.9031 9.9801 9.08366 9.9801ZM9.00033 13.1676C9.19477 13.1676 9.35796 13.1016 9.48991 12.9697C9.62185 12.8377 9.68783 12.6745 9.68783 12.4801C9.68783 12.2857 9.62185 12.1225 9.48991 11.9905C9.35796 11.8586 9.19477 11.7926 9.00033 11.7926C8.80588 11.7926 8.64269 11.8586 8.51074 11.9905C8.3788 12.1225 8.31283 12.2857 8.31283 12.4801C8.31283 12.6745 8.3788 12.8377 8.51074 12.9697C8.64269 13.1016 8.80588 13.1676 9.00033 13.1676ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C10.9448 16.0843 12.6114 15.3898 14.0003 14.0009C15.3892 12.612 16.0837 10.9454 16.0837 9.00094C16.0837 7.05649 15.3892 5.38982 14.0003 4.00094C12.6114 2.61205 10.9448 1.9176 9.00033 1.9176C7.05588 1.9176 5.38921 2.61205 4.00033 4.00094C2.61144 5.38982 1.91699 7.05649 1.91699 9.00094C1.91699 10.9454 2.61144 12.6989 4.00033 14.0009C5.38921 15.3898 7.05588 16.0843 9.00033 16.0843Z" fill="#E90005"></path></svg></div><div ><p class="slate-p " ><strong class="slate-bold">NOTE</strong> - Secret keys must be stored securely. Don’t expose your secret key on a website or embed it in a mobile application. ConvesioPay retains the right to rotate your secret keys if a public leak is detected.</p></div></div><p class="slate-p " ></p><p class="slate-p " ></p>

Every ConvesioPay Checkout API integration requires the following credentials to perform all functionality securely and efficiently:

All necessary integration credentials (ie secret key, API key, client key…required for 

 page of the dashboard in Advanced Settings. Although, it is possible and recommended to generate these on behalf of the merchant with 1 click with the 

All API requests must be made server side and over 

Secret Key

<p class="slate-p " >All necessary integration credentials (ie secret key, API key, client key…required for the Checkout API) can be generated, viewed, and destroyed on the <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings. However, it is recommended to utilize the Connect/Disconnect endpoints in your integration to securely generate these credentials on behalf of the merchant with 1 click. You will need to collect some details about the merchant, along with predetermined information about your integration, to assemble a server side request to ConvesioPay to properly create the Connected Integration details for you and have your integration display the generated credentials.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=warning ><div class="callout-icon"><svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.916637 15.5009C0.791637 15.5009 0.683998 15.4732 0.59372 15.4176C0.503443 15.362 0.430526 15.2857 0.37497 15.1884C0.319415 15.0912 0.288165 14.9905 0.28122 14.8864C0.274276 14.7822 0.305526 14.6745 0.37497 14.5634L8.4583 0.605103C8.52775 0.493991 8.60761 0.41413 8.69789 0.365519C8.78816 0.316908 8.88886 0.292603 8.99997 0.292603C9.11108 0.292603 9.21178 0.316908 9.30205 0.365519C9.39233 0.41413 9.47219 0.493991 9.54164 0.605103L17.625 14.5634C17.6944 14.6745 17.7257 14.7822 17.7187 14.8864C17.7118 14.9905 17.6805 15.0912 17.625 15.1884C17.5694 15.2857 17.4965 15.362 17.4062 15.4176C17.3159 15.4732 17.2083 15.5009 17.0833 15.5009H0.916637ZM1.99997 14.2509H16L8.99997 2.1676L1.99997 14.2509ZM9.0833 13.0634C9.26386 13.0634 9.41316 13.0044 9.53122 12.8864C9.64928 12.7683 9.7083 12.619 9.7083 12.4384C9.7083 12.2579 9.64928 12.1086 9.53122 11.9905C9.41316 11.8725 9.26386 11.8134 9.0833 11.8134C8.90275 11.8134 8.75344 11.8725 8.63539 11.9905C8.51733 12.1086 8.4583 12.2579 8.4583 12.4384C8.4583 12.619 8.51733 12.7683 8.63539 12.8864C8.75344 13.0044 8.90275 13.0634 9.0833 13.0634ZM9.0833 10.7509C9.26386 10.7509 9.41316 10.6919 9.53122 10.5739C9.64928 10.4558 9.7083 10.3065 9.7083 10.1259V6.70927C9.7083 6.52871 9.64928 6.37941 9.53122 6.26135C9.41316 6.1433 9.26386 6.08427 9.0833 6.08427C8.90275 6.08427 8.75344 6.1433 8.63539 6.26135C8.51733 6.37941 8.4583 6.52871 8.4583 6.70927V10.1259C8.4583 10.3065 8.51733 10.4558 8.63539 10.5739C8.75344 10.6919 8.90275 10.7509 9.0833 10.7509Z" fill="#F1C21B"></path></svg></div><div ><p class="slate-p " >Secret keys should only be displayed once upon generation, stored securely where necessary in your integration, and not be displayed again.</p></div></div><p class="slate-p " >This endpoint does not make any assumptions to create or render any UI for you to facilitate the collection the required data. However, here are a few example screenshots of how you might present a form to collect and securely submit the data to ConvesioPay to create the necessary Connected Integration details in our system.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >Please include an option for ConvesioPay support to make use of an <code class="slate-code">adminClientKey</code> as an alternative to the merchant&apos;s account password.</p></div></div><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/47f272c2-ee10-4a37-a353-5260f239a528.png" alt="" style="
              width:667px;
	            height:467px;
	            aspect-ratio:667 / 467"
         /></div></figure></div><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/107e54ca-2dd9-4052-be15-f204f1505ff2.png" alt="" style="
              width:667px;
	            height:467px;
	            aspect-ratio:667 / 467"
         /></div></figure></div><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/6861de07-5357-4f6b-ad31-8dffdb4153db.png" alt="" style="
              width:668px;
	            height:274px;
	            aspect-ratio:668 / 274"
         /></div></figure></div><p class="slate-p " ></p><p class="slate-p " >Connection requests must be made server side and over <a href="http://en.wikipedia.org/wiki/HTTP_Secure" target="_blank">HTTPS</a>. Calls made without <code class="slate-code">https://</code> or proper authentication will fail.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=error ><div class="callout-icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.08366 9.9801C9.25033 9.9801 9.39269 9.92107 9.51074 9.80302C9.6288 9.68496 9.68783 9.53566 9.68783 9.3551V5.31344C9.68783 5.14677 9.62533 5.00441 9.50033 4.88635C9.37533 4.7683 9.22949 4.70927 9.06283 4.70927C8.88227 4.70927 8.73296 4.7683 8.61491 4.88635C8.49685 5.00441 8.43783 5.15371 8.43783 5.33427V9.37594C8.43783 9.5426 8.50033 9.68496 8.62533 9.80302C8.75033 9.92107 8.9031 9.9801 9.08366 9.9801ZM9.00033 13.1676C9.19477 13.1676 9.35796 13.1016 9.48991 12.9697C9.62185 12.8377 9.68783 12.6745 9.68783 12.4801C9.68783 12.2857 9.62185 12.1225 9.48991 11.9905C9.35796 11.8586 9.19477 11.7926 9.00033 11.7926C8.80588 11.7926 8.64269 11.8586 8.51074 11.9905C8.3788 12.1225 8.31283 12.2857 8.31283 12.4801C8.31283 12.6745 8.3788 12.8377 8.51074 12.9697C8.64269 13.1016 8.80588 13.1676 9.00033 13.1676ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C10.9448 16.0843 12.6114 15.3898 14.0003 14.0009C15.3892 12.612 16.0837 10.9454 16.0837 9.00094C16.0837 7.05649 15.3892 5.38982 14.0003 4.00094C12.6114 2.61205 10.9448 1.9176 9.00033 1.9176C7.05588 1.9176 5.38921 2.61205 4.00033 4.00094C2.61144 5.38982 1.91699 7.05649 1.91699 9.00094C1.91699 10.9454 2.61144 12.6989 4.00033 14.0009C5.38921 15.3898 7.05588 16.0843 9.00033 16.0843Z" fill="#E90005"></path></svg></div><div ><p class="slate-p " >This endpoint requires you to collect and submit the merchant&apos;s ConvesioPay account email and password in the form of Basic Authentication. Never store merchant ConvesioPay account credentials in your integration. Don’t expose these values in the frontend of your application. Connect integration requests must be made server side.</p></div></div><p class="slate-p " >The following properties are required to use this endpoint:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><code class="slate-code">integrationName</code></div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">domain</code></div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">webhooks</code></div></li></ul><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=warning ><div class="callout-icon"><svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.916637 15.5009C0.791637 15.5009 0.683998 15.4732 0.59372 15.4176C0.503443 15.362 0.430526 15.2857 0.37497 15.1884C0.319415 15.0912 0.288165 14.9905 0.28122 14.8864C0.274276 14.7822 0.305526 14.6745 0.37497 14.5634L8.4583 0.605103C8.52775 0.493991 8.60761 0.41413 8.69789 0.365519C8.78816 0.316908 8.88886 0.292603 8.99997 0.292603C9.11108 0.292603 9.21178 0.316908 9.30205 0.365519C9.39233 0.41413 9.47219 0.493991 9.54164 0.605103L17.625 14.5634C17.6944 14.6745 17.7257 14.7822 17.7187 14.8864C17.7118 14.9905 17.6805 15.0912 17.625 15.1884C17.5694 15.2857 17.4965 15.362 17.4062 15.4176C17.3159 15.4732 17.2083 15.5009 17.0833 15.5009H0.916637ZM1.99997 14.2509H16L8.99997 2.1676L1.99997 14.2509ZM9.0833 13.0634C9.26386 13.0634 9.41316 13.0044 9.53122 12.8864C9.64928 12.7683 9.7083 12.619 9.7083 12.4384C9.7083 12.2579 9.64928 12.1086 9.53122 11.9905C9.41316 11.8725 9.26386 11.8134 9.0833 11.8134C8.90275 11.8134 8.75344 11.8725 8.63539 11.9905C8.51733 12.1086 8.4583 12.2579 8.4583 12.4384C8.4583 12.619 8.51733 12.7683 8.63539 12.8864C8.75344 13.0044 8.90275 13.0634 9.0833 13.0634ZM9.0833 10.7509C9.26386 10.7509 9.41316 10.6919 9.53122 10.5739C9.64928 10.4558 9.7083 10.3065 9.7083 10.1259V6.70927C9.7083 6.52871 9.64928 6.37941 9.53122 6.26135C9.41316 6.1433 9.26386 6.08427 9.0833 6.08427C8.90275 6.08427 8.75344 6.1433 8.63539 6.26135C8.51733 6.37941 8.4583 6.52871 8.4583 6.70927V10.1259C8.4583 10.3065 8.51733 10.4558 8.63539 10.5739C8.75344 10.6919 8.90275 10.7509 9.0833 10.7509Z" fill="#F1C21B"></path></svg></div><div ><p class="slate-p " >NOTE - This endpoint will return a unique, per domain <code class="slate-code">integrationName</code> string in the response body that is generated for you from the provided <code class="slate-code">integrationName</code> and <code class="slate-code">domain</code> values. You will need this value in order to successfully list or update integration level payment methods in your integration (you can also find this value as the name of the integration on the <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings).  If the correct string is not provided, the customer will be able to use all globally enabled payment methods in ConvesioPay for the merchant.</p></div></div><p class="slate-p " ></p><p class="slate-p " ></p>

All necessary integration credentials (ie secret key, API key, client key…required for the Checkout API) can be generated, viewed, and destroyed on the 

 page of the dashboard in Advanced Settings. However, it is recommended to utilize the Connect/Disconnect endpoints in your integration to securely generate these credentials on behalf of the merchant with 1 click. You will need to collect some details about the merchant, along with predetermined information about your integration, to assemble a server side request to ConvesioPay to properly create the Connected Integration details for you and have your integration display the generated credentials.

This endpoint does not make any assumptions to create or render any UI for you to facilitate the collection the required data. However, here are a few example screenshots of how you might present a form to collect and securely submit the data to ConvesioPay to create the necessary Connected Integration details in our system.

Connection requests must be made server side and over 

The following properties are required to use this endpoint:

integrationName

The domain your ConvesioPay integration is currently being connected on (must include the HTTP protocol)

domain

The webhook configurations to register for your ConvesioPay integration

webhooks

If your integration needs to utilize special permission scopes and you have been issued a Integration Partner ID, you will need to include it here upon connecting the integration

integrationPartnerId

If your integration needs to support team members (admin sub users of a merchant account) connecting the integration, you will need to pass the API key of the merchant to ensure that the correct merchant is connected.

merchantApiKey

Basic Auth string that includes the merchant's `email:password` (or `email:adminClientKey`) that has been base64-encoded

Authorization

The ConvesioPay unique, per domain string that is generated for you and returned in the Connect Integration API response body

apiKey

secretKey

clientKey

The webhook configurations registered for your ConvesioPay integration

status

body

<p class="slate-p " >All integration credentials (ie secret key, API key, client key…required for the Checkout API) can be generated, viewed, and destroyed on the <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings. However, it is recommended to utilize the Connect/Disconnect endpoints in your integration to securely generate or destroy these credentials on behalf of the merchant with 1 click.</p><p class="slate-p " >This endpoint does not make any assumptions to create or render any UI for you to facilitate the disconnecting of your integration. However, here are a few example screenshots of how you might present an option in your integration to securely destroy the previously created Connected Integration credentials in ConvesioPay.</p><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/df5dfa47-83c3-43f2-8aa8-8ae125a777b2.png" alt="" style="
              width:677px;
	            height:280px;
	            aspect-ratio:677 / 280"
         /></div></figure></div><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/732e44d0-c912-48d8-babb-e5c423d45ad5.png" alt="" style="
              width:677px;
	            height:412px;
	            aspect-ratio:677 / 412"
         /></div></figure></div><p class="slate-p " ></p><p class="slate-p " >Disconnect requests must be made server side and over <a href="http://en.wikipedia.org/wiki/HTTP_Secure" target="_blank">HTTPS</a>. Calls made without <code class="slate-code">https://</code> or proper authentication will fail.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=error ><div class="callout-icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.08366 9.9801C9.25033 9.9801 9.39269 9.92107 9.51074 9.80302C9.6288 9.68496 9.68783 9.53566 9.68783 9.3551V5.31344C9.68783 5.14677 9.62533 5.00441 9.50033 4.88635C9.37533 4.7683 9.22949 4.70927 9.06283 4.70927C8.88227 4.70927 8.73296 4.7683 8.61491 4.88635C8.49685 5.00441 8.43783 5.15371 8.43783 5.33427V9.37594C8.43783 9.5426 8.50033 9.68496 8.62533 9.80302C8.75033 9.92107 8.9031 9.9801 9.08366 9.9801ZM9.00033 13.1676C9.19477 13.1676 9.35796 13.1016 9.48991 12.9697C9.62185 12.8377 9.68783 12.6745 9.68783 12.4801C9.68783 12.2857 9.62185 12.1225 9.48991 11.9905C9.35796 11.8586 9.19477 11.7926 9.00033 11.7926C8.80588 11.7926 8.64269 11.8586 8.51074 11.9905C8.3788 12.1225 8.31283 12.2857 8.31283 12.4801C8.31283 12.6745 8.3788 12.8377 8.51074 12.9697C8.64269 13.1016 8.80588 13.1676 9.00033 13.1676ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C10.9448 16.0843 12.6114 15.3898 14.0003 14.0009C15.3892 12.612 16.0837 10.9454 16.0837 9.00094C16.0837 7.05649 15.3892 5.38982 14.0003 4.00094C12.6114 2.61205 10.9448 1.9176 9.00033 1.9176C7.05588 1.9176 5.38921 2.61205 4.00033 4.00094C2.61144 5.38982 1.91699 7.05649 1.91699 9.00094C1.91699 10.9454 2.61144 12.6989 4.00033 14.0009C5.38921 15.3898 7.05588 16.0843 9.00033 16.0843Z" fill="#E90005"></path></svg></div><div ><p class="slate-p " ><strong class="slate-bold">NOTE</strong> - Secret keys must be stored securely. Don’t expose your secret key on a website or embed it in a mobile application. All payment requests must be made server side, do not attempt to create a payment client side.</p></div></div><p class="slate-p " ></p>

All integration credentials (ie secret key, API key, client key…required for the Checkout API) can be generated, viewed, and destroyed on the 

 page of the dashboard in Advanced Settings. However, it is recommended to utilize the Connect/Disconnect endpoints in your integration to securely generate or destroy these credentials on behalf of the merchant with 1 click.

This endpoint does not make any assumptions to create or render any UI for you to facilitate the disconnecting of your integration. However, here are a few example screenshots of how you might present an option in your integration to securely destroy the previously created Connected Integration credentials in ConvesioPay.

Disconnect requests must be made server side and over 

success

Include JS

<p class="slate-p " >Include the ConvesioPay.js script on your site. It should always be loaded directly from <code class="slate-code">https://js.convesiopay.com</code>, rather than included in a bundle or hosted yourself.</p><p class="slate-p " ></p><div class="slate-div"></div><p class="slate-p " ></p>

Include the ConvesioPay.js script on your site. It should always be loaded directly from 

, rather than included in a bundle or hosted yourself.

Initialize

<p class="slate-p " ></p><h2 class="slate-h2 " >ConvesioPay(apiKey)</h2><p class="slate-p " ></p><p class="slate-p " > Use <code class="slate-code">ConvesioPay(apiKey)</code> to create an instance of the <strong class="slate-bold">ConvesioPay object</strong>. The ConvesioPay object is your entrypoint to the rest of the ConvesioPay.js SDK.</p><p class="slate-p " >Your ConvesioPay API key is required when calling this function, as it identifies your website and its ability to accept payments to ConvesioPay.</p><p class="slate-p " >View the sample code below. Don’t submit any personally identifiable information in requests made with this key and instead use your actual key. You can get all required keys (ie API key, client key, secret key, etc) from the <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings. You can learn more about the Checkout <a href="689a53c1fa672f8c7cf51e19/670edabbe6df56d8fee0002e" target="">API Authentication and Keys here</a> if you missed it.</p><p class="slate-p " >You need only create one instance of the ConvesioPay object in your code.</p><p class="slate-p " ></p><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100px;">Method parameters</div></div><colgroup ><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">apiKey</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED </span>The API key identifies the requesting account</p></td></div></tr></tbody></table></div></div><p class="slate-p " ></p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

. The ConvesioPay object is your entrypoint to the rest of the ConvesioPay.js SDK.

Your ConvesioPay API key is required when calling this function, as it identifies your website and its ability to accept payments to ConvesioPay.

View the sample code below. Don’t submit any personally identifiable information in requests made with this key and instead use your actual key. You can get all required keys (ie API key, client key, secret key, etc) from the 

 page of the dashboard in Advanced Settings. You can learn more about the Checkout 

You need only create one instance of the ConvesioPay object in your code.

Method parameters

<p class="slate-p " ></p><h2 class="slate-h2 " >cpay.component(options)</h2><p class="slate-p " ></p><p class="slate-p " >This method is used to create the ConvesioPay checkout component. The checkout component renders PCI compliant payment form fields that will tokenize payment methods to be passed to your integration&apos;s backend for processing payments securely.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >The component uses the optional <code class="slate-code">customerEmail</code> and <code class="slate-code">integration</code> parameters to provide important functionality. </p><p class="slate-p " ></p><p class="slate-p " >The <code class="slate-code">customerEmail</code> is used to check for any known tokenized stored payment methods available (not available for all integrations, your integration must have stored payment method access). If no email is provided, the component will not be able to facilitate the use of any stored payment methods and will require all card information to be securely collected again.  </p><p class="slate-p " ></p><p class="slate-p " >The <code class="slate-code">integration</code> parameter here is used to filter payment methods available for this integration specifically.  Please note that, if you used the <a href="689a53c1fa672f8c7cf51e19/689b92cadd190b3ba859a9f1" target="">Connect Integration API</a>, this value should actually be the ConvesioPay generated string returned in the response called the <code class="slate-code">integrationName</code> (you can also find this value as the name of the integration on the <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings). If the correct name is not provided, the customer will be able to use all globally enabled payment methods in ConvesioPay for the merchant. Learn more about how you can enable and/or disable <a href="689a53f1d37f175c08d9c3ea/689a55406ab85ee91a5364d3" target="">Payment Methods</a> in the dashboard.</p></div></div><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100px;">Method parameters</div></div><colgroup ><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">environment</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED </span>The environment you want to make a payment on, possible values are ‘test’ or ‘live’</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">clientKey</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED </span>The client key provides access for the website to accept payments</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">customerEmail</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> </span>The email of the customer that will be making a payment. Though it is optional, customers will not be able to make use stored payment methods in the checkout component without it.</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">integration</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> </span> The ConvesioPay unique, per domain string that is generated for you and returned in the Connect Integration API response body</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">theme</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> </span>An optional theme name to change the look and feel of the credit Checkout Component form. Currently supported values are <code class="slate-code">light</code> or <code class="slate-code">dark</code> (the light theme is used by default if no theme is provided).</p></td></div></tr></tbody></table></div></div><p class="slate-p " ></p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

This method is used to create the ConvesioPay checkout component. The checkout component renders PCI compliant payment form fields that will tokenize payment methods to be passed to your integration's backend for processing payments securely.

<div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=success ><div class="callout-icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.77116 10.8968L5.72949 8.8551C5.60449 8.7301 5.45171 8.6676 5.27116 8.6676C5.0906 8.6676 4.93088 8.73705 4.79199 8.87594C4.6531 9.01482 4.58366 9.17455 4.58366 9.3551C4.58366 9.53566 4.6531 9.68844 4.79199 9.81344L7.33366 12.3551C7.45866 12.4801 7.60449 12.5426 7.77116 12.5426C7.93783 12.5426 8.08366 12.4801 8.20866 12.3551L13.2087 7.3551C13.3337 7.2301 13.3927 7.07732 13.3857 6.89677C13.3788 6.71621 13.3128 6.56344 13.1878 6.43844C13.0628 6.29955 12.9066 6.2301 12.7191 6.2301C12.5316 6.2301 12.3684 6.29955 12.2295 6.43844L7.77116 10.8968ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C11.0142 16.0843 12.6982 15.4072 14.0524 14.053C15.4066 12.6989 16.0837 11.0148 16.0837 9.00094C16.0837 6.98705 15.4066 5.30302 14.0524 3.94885C12.6982 2.59469 11.0142 1.9176 9.00033 1.9176C6.98644 1.9176 5.30241 2.59469 3.94824 3.94885C2.59408 5.30302 1.91699 6.98705 1.91699 9.00094C1.91699 11.0148 2.59408 12.6989 3.94824 14.053C5.30241 15.4072 6.98644 16.0843 9.00033 16.0843Z" fill="#06837A"></path></svg></div><div ><p class="slate-p " >This feature is in Beta release.  If you are interested in utilizing our new Orchestration Layer, please contact support for more information.</p></div></div><p class="slate-p " ></p><h2 class="slate-h2 " >cpay.component(options)</h2><p class="slate-p " ></p><p class="slate-p " >This method is used to create the ConvesioPay checkout component. The checkout component renders PCI compliant payment form fields that will tokenize payment methods to be passed to your integration&apos;s backend for processing payments securely.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >The component uses the optional <code class="slate-code">customerEmail</code> and <code class="slate-code">integration</code> parameters to provide important functionality. </p><p class="slate-p " ></p><p class="slate-p " >The <code class="slate-code">customerEmail</code> is used to check for any known tokenized stored payment methods available (not available for all integrations, your integration must have stored payment method access). If no email is provided, the component will not be able to facilitate the use of any stored payment methods and will require all card information to be securely collected again.  </p><p class="slate-p " ></p><p class="slate-p " >The <code class="slate-code">integration</code> parameter here is used to filter payment methods available for this integration specifically.  Please note that, if you used the <a href="689a53c1fa672f8c7cf51e19/689b92cadd190b3ba859a9f1" target="">Connect Integration API</a>, this value should actually be the ConvesioPay generated string returned in the response called the <code class="slate-code">integrationName</code> (you can also find this value as the name of the integration on the <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings). If the correct name is not provided, the customer will be able to use all globally enabled payment methods in ConvesioPay for the merchant. Learn more about how you can enable and/or disable <a href="689a53f1d37f175c08d9c3ea/689a55406ab85ee91a5364d3" target="">Payment Methods</a> in the dashboard.</p></div></div><p class="slate-p " ></p><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100%;">Method parameters</div></div><colgroup ><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">environment</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED </span>The environment you want to make a payment on, possible values are ‘test’ or ‘live’</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">customerEmail</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> </span>The email of the customer that will be making a payment. Though it is optional, customers will not be able to make use stored payment methods in the checkout component without it.</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">integration</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> </span> The ConvesioPay unique, per domain string that is generated for you and returned in the Connect Integration API response body</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">theme</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> </span>An optional theme name to change the look and feel of the credit Checkout Component form. Currently supported values are <code class="slate-code">light</code> or <code class="slate-code">dark</code> (the light theme is used by default if no theme is provided).</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">express</code> - <span style="color:#434343"><strong class="slate-bold">boolean</strong></span><span style="color:#980100"> </span>An optional property to create a minimal version of the component featuring only accelerated payment method buttons (ApplePay, GooglePay)</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">disabledPaymentMethods</code> - <span style="color:#434343"><strong class="slate-bold">object</strong></span><span style="color:#980100"> </span>Optionally disable specific payment methods for this instance of the component by passing boolean truthy values for each payment method to hide</p></td></div></tr></tbody></table></div></div><p class="slate-p " ></p><h3 class="slate-h3 " >Unified View (Default)</h3><p class="slate-p " >By default accelerated payment methods like ApplePay are bundled with all other payment methods (ie Credit Card, BTCPay) in their own accordion. </p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/f2b552f8-ab2e-43e3-8d0c-8c7c96630508-67084a40bd7bc9b280dc3c39.png" alt="" style="
              width:652px;
	            height:424px;
	            aspect-ratio:652 / 424"
         /></div></figure></div><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line"><div class="slate-code_line">const component = cpay.component({
    environment: &apos;test&apos;,
    customerEmail: &apos;abc@domain.com&apos;,
    integration: &apos;string&apos;,
    theme: &apos;dark&apos;
});</div></div></code></pre></div><p class="slate-p " ></p><h3 class="slate-h3 " >Express Checkout View</h3><p class="slate-p " >If you want to provide accelerated payment methods on their own, likely prior to the checkout flow (ie on a product or cart page), you can do so easily by simply passing the <code class="slate-code">express</code> property in the session config.</p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/47ae81f2-f626-4523-8c1d-e3a20f0a513e-67084a40bd7bc9b280dc3c39.png" alt="" style="
              width:652px;
	            height:241px;
	            aspect-ratio:652 / 241"
         /></div></figure></div><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line"><div class="slate-code_line">const component = cpay.component({
    environment: &apos;test&apos;,
    customerEmail: &apos;abc@domain.com&apos;,
    integration: &apos;string&apos;,
    theme: &apos;dark&apos;,
    express: true // Enable express mode
});</div></div></code></pre></div><p class="slate-p " ></p><h3 class="slate-h3 " >Disabling Specific Accelerated Payment Methods</h3><p class="slate-p " >In order for accelerated payment methods to be visible they must be first enabled at the <a href="https://docs.convesiopay.com/convesiopay-payment-checkout-integration-api/payment-methods/enable-disable-payment-methods" target="_blank">Global</a> or <a href="https://docs.convesiopay.com/convesiopay-payment-checkout-integration-api/payment-methods/integration-specific-payment-methods" target="_blank">Integration</a> level. However, you may also elect to disable specific payment methods just for a specific instance of the component mounted by passing a <code class="slate-code">disabledPaymentMethods</code> object.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line"><div class="slate-code_line">const component = cpay.component({
    environment: &apos;test&apos;,
    customerEmail: &apos;abc@domain.com&apos;,
    integration: &apos;string&apos;,
    theme: &apos;dark&apos;,
    disabledPaymentMethods: { // Disable specific payment methods
        cards: true,
        applePay: false,
       googlePay: true
    }
});</div></div></code></pre></div><p class="slate-p " ></p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

By default accelerated payment methods like ApplePay are bundled with all other payment methods (ie Credit Card, BTCPay) in their own accordion. 

If you want to provide accelerated payment methods on their own, likely prior to the checkout flow (ie on a product or cart page), you can do so easily by simply passing the 

Disabling Specific Accelerated Payment Methods

In order for accelerated payment methods to be visible they must be first enabled at the 

 level. However, you may also elect to disable specific payment methods just for a specific instance of the component mounted by passing a 

Mount

<p class="slate-p " ></p><h2 class="slate-h2 " >component.mount(domElement)</h2><p class="slate-p " ></p><p class="slate-p " >This method attaches your checkout component to the DOM. <code class="slate-code">element.mount</code> accepts a CSS selector for the DOM element like <code class="slate-code">#component-container</code>. You need to create a container DOM element to mount the component in.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >The checkout component requires SSL. The page address must start with <code class="slate-code">https://</code> rather than <code class="slate-code">http://</code> for your integration to work.</p></div></div><p class="slate-p " ></p><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100px;">Method parameters</div></div><colgroup ><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">domElement</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED </span>The DOM element your component will be mounted</p></td></div></tr></tbody></table></div></div><p class="slate-p " ></p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

This method attaches your checkout component to the DOM. 

 accepts a CSS selector for the DOM element like 

. You need to create a container DOM element to mount the component in.

Email

Amount

<p class="slate-p " >It is recommended that you create the component with all desired properties before mounting but sometimes that is not possible in the integration consuming the component.  For that reason, there are a couple methods you can use to dynamically update the component config elements and rehydrate the UI without needing to destroy, create, and remount the component.  </p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=warning ><div class="callout-icon"><svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.916637 15.5009C0.791637 15.5009 0.683998 15.4732 0.59372 15.4176C0.503443 15.362 0.430526 15.2857 0.37497 15.1884C0.319415 15.0912 0.288165 14.9905 0.28122 14.8864C0.274276 14.7822 0.305526 14.6745 0.37497 14.5634L8.4583 0.605103C8.52775 0.493991 8.60761 0.41413 8.69789 0.365519C8.78816 0.316908 8.88886 0.292603 8.99997 0.292603C9.11108 0.292603 9.21178 0.316908 9.30205 0.365519C9.39233 0.41413 9.47219 0.493991 9.54164 0.605103L17.625 14.5634C17.6944 14.6745 17.7257 14.7822 17.7187 14.8864C17.7118 14.9905 17.6805 15.0912 17.625 15.1884C17.5694 15.2857 17.4965 15.362 17.4062 15.4176C17.3159 15.4732 17.2083 15.5009 17.0833 15.5009H0.916637ZM1.99997 14.2509H16L8.99997 2.1676L1.99997 14.2509ZM9.0833 13.0634C9.26386 13.0634 9.41316 13.0044 9.53122 12.8864C9.64928 12.7683 9.7083 12.619 9.7083 12.4384C9.7083 12.2579 9.64928 12.1086 9.53122 11.9905C9.41316 11.8725 9.26386 11.8134 9.0833 11.8134C8.90275 11.8134 8.75344 11.8725 8.63539 11.9905C8.51733 12.1086 8.4583 12.2579 8.4583 12.4384C8.4583 12.619 8.51733 12.7683 8.63539 12.8864C8.75344 13.0044 8.90275 13.0634 9.0833 13.0634ZM9.0833 10.7509C9.26386 10.7509 9.41316 10.6919 9.53122 10.5739C9.64928 10.4558 9.7083 10.3065 9.7083 10.1259V6.70927C9.7083 6.52871 9.64928 6.37941 9.53122 6.26135C9.41316 6.1433 9.26386 6.08427 9.0833 6.08427C8.90275 6.08427 8.75344 6.1433 8.63539 6.26135C8.51733 6.37941 8.4583 6.52871 8.4583 6.70927V10.1259C8.4583 10.3065 8.51733 10.4558 8.63539 10.5739C8.75344 10.6919 8.90275 10.7509 9.0833 10.7509Z" fill="#F1C21B"></path></svg></div><div ><p class="slate-p " >When updating the component with accelerated payment methods selected, if a payment token was already created via customer confirmation, existing payment tokens will be invalidated and a change event will be fired accordingly.  You can use this change event to properly disable payment attempts temporarily and notify the customer that they will need to create another payment token.  Learn more in <a href="6709a14f9847a8ab4b50a246/6709e1859847a8ab4b519469" target="">Events and Validation</a></p></div></div><p class="slate-p " ></p><h2 class="slate-h2 " >component.updateEmail()</h2><p class="slate-p " ></p><p class="slate-p " >This method provides a way to seamlessly update the <code class="slate-code">customerEmail</code> that was originally provided (or not) in the <a href="6709a14f9847a8ab4b50a246/6709a15dbf0cf1d3e5798e46" target="">Create Component</a> call.  This can be useful, for instance, if for some reason you need to create the component in your integration before a customer can fill out a checkout form required to get all the payment information.  While the component will function without <code class="slate-code">customerEmail</code> some functionaility will be excluded.  This allows you to pass the updated email when you have access.</p><p class="slate-p " ></p><h2 class="slate-h2 " >component.updateAmount()</h2><p class="slate-p " ></p><p class="slate-p " >This method provides a way to seamlessly update the <code class="slate-code">amount</code> and/or <code class="slate-code">currency</code> that was originally provided (or not) in the <a href="6709a14f9847a8ab4b50a246/6709a15dbf0cf1d3e5798e46" target="">Create Component</a> call.  This can be useful if you are updating values in your integration at different stages of the checkout process (ie applying coupons, updating cart totals, additional charges, or upsells, etc.). The amount provided in the component config initially can potentially become stale and need to be updated. This allows you to pass the updated amount whenever necessary.</p><div class="slate-div"></div><p class="slate-p " ></p>

It is recommended that you create the component with all desired properties before mounting but sometimes that is not possible in the integration consuming the component.  For that reason, there are a couple methods you can use to dynamically update the component config elements and rehydrate the UI without needing to destroy, create, and remount the component.  

This method provides a way to seamlessly update the 

 that was originally provided (or not) in the 

 call.  This can be useful, for instance, if for some reason you need to create the component in your integration before a customer can fill out a checkout form required to get all the payment information.  While the component will function without 

 some functionaility will be excluded.  This allows you to pass the updated email when you have access.

 call.  This can be useful if you are updating values in your integration at different stages of the checkout process (ie applying coupons, updating cart totals, additional charges, or upsells, etc.). The amount provided in the component config initially can potentially become stale and need to be updated. This allows you to pass the updated amount whenever necessary.

Credit Card

ApplePay

GooglePay

BTCPay

<p class="slate-p " ></p><h2 class="slate-h2 " >component.on(&apos;change&apos;,  handler)</h2><p class="slate-p " ></p><p class="slate-p " >The only way to communicate with the checkout component is by listening to an event. We expose a change event you can subscribe to in the checkout component. The change event is triggered when the component&apos;s value changes and provides valuable feedback on the payment status and details.</p><p class="slate-p " ></p><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100%;">Method parameters</div></div><colgroup ><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">event</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED </span>The name of the event (ie ‘change’)</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">handler</code> - <span style="color:#434343"><strong class="slate-bold">function</strong></span><span style="color:#980100"> REQUIRED </span>The callback function provided to be invoked when the event is fired. The event argument will be passed in with the following properties:</p></td></div></tr></tbody></table></div></div><h2 class="slate-h2 " >Credit Card Field Validation</h2><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100%;">Handler  Event Properties</div></div><colgroup ><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">type</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> </span>The name of the payment method type</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">isValid</code> - <span style="color:#434343"><strong class="slate-bold">boolean</strong></span><span style="color:#980100"> </span>True if all field values are valid and all data has been collected necessary to make a payment</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">valid</code> - <span style="color:#434343"><strong class="slate-bold">object</strong></span><span style="color:#980100"> </span>An object containing field names that are <code class="slate-code">true</code> if they are valid, or <code class="slate-code">false</code> if not</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">errors</code> - <span style="color:#434343"><strong class="slate-bold">object</strong></span><span style="color:#980100"> </span>An object containing field names that are <code class="slate-code">null</code> if they are valid, or error message strings if not</p></td></div></tr></tbody></table></div></div><h2 class="slate-h2 " >Accelerated Payment Methods</h2><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100%;">Handler  Event Properties</div></div><colgroup ><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">type</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> </span>The name of the payment method type</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">isSuccessful</code> - <span style="color:#434343"><strong class="slate-bold">boolean</strong></span><span style="color:#980100"> </span>True if the tokenized payment intent was successfully created or initiated (depending on the payment method)</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">token</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> </span>The payment token that represents the card details entered into the component along with some information about the origin of the customer.</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">email</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> </span>The shipping email associated with the customer from the ApplePay/GooglePay response</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">billingContact</code> - <span style="color:#434343"><strong class="slate-bold">object</strong></span><span style="color:#980100"> </span>The billing contact object from the ApplePay/GooglePay response containing the name and billing address information</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">shippingContact</code> - <span style="color:#434343"><strong class="slate-bold">object</strong></span><span style="color:#980100"> </span>The shipping contact object from the ApplePay/GooglePay response containing the name, email, and shipping address information</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">shippingMethod</code> - <span style="color:#434343"><strong class="slate-bold">object</strong></span><span style="color:#980100"> </span>The shipping method object containing the label, detail, amount, and identifier</p></td></div></tr><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">errors</code> - <span style="color:#434343"><strong class="slate-bold">array</strong></span><span style="color:#980100"> </span>An empty array if all field names are valid, or error message strings if not. A few possible examples with regard to previous tokens becoming invalidated after updating component values:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Email changed — previous payment authorization is no longer valid. Please re-authorize</div></li><li class="slate-li " ><div style="position:relative">Amount changed — previous payment authorization is no longer valid. Please re-authorize</div></li></ul></td></div></tr></tbody></table></div></div><p class="slate-p " >Accelerated payment methods may have additional optional events you can subscribe to.  To learn more about those, read about the accelerated payment method&apos;s specific payment intent session method parameters (ie <a href="67804216032baf69b5da3844/698fa8f0b64238e1bdf514cd" target="">Create ApplePay Session</a>).</p><p class="slate-p " ></p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >Payment intents for BTCPay payments are considered successful if the BTCPay invoice was created with all necessary payment data. The component will not receive change events beyond this point in the payment lifecycle (ie when the customer initiates payment or when the payment has been confirmed).</p></div></div><p class="slate-p " ></p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

The only way to communicate with the checkout component is by listening to an event. We expose a change event you can subscribe to in the checkout component. The change event is triggered when the component's value changes and provides valuable feedback on the payment status and details.

Handler  Event Properties

Accelerated payment methods may have additional optional events you can subscribe to.  To learn more about those, read about the accelerated payment method's specific payment intent session method parameters (ie 

<p class="slate-p " >All Checkout API integrations will automaticaly consider payment methods that are “globally” available on the Checkout API Settings <a href="https://convesiopay.com/advanced-settings/payment-methods" target="_blank">Payment Methods</a> page of the dashboard in Advanced Settings to be available and allowed. So that means when you mount the Checkout Component in your integration, each globally available payment method will show up (unless unavailable in the browser environment, like ApplePay when not in Safari for instance) as an available option for your customers to checkout with unless you either disable it on the Payment Methods page for all Checkout API integrations or disable it explicitly for individual integrations on the Checkout API Settings <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " > Payment methods can be managed in the ConvesioPay Dashboard on the following pages in Advanced Settings:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Global - <a href="https://convesiopay.com/advanced-settings/payment-methods" target="_blank">Payment Methods</a></div></li><li class="slate-li " ><div style="position:relative">Integration Specific - <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a></div></li></ul></div></div><p class="slate-p " >By default, all merchants start with <strong class="slate-bold">Credit Cards</strong> enabled as the base payment method. All other payment methods must be configured as desired. Some payment methods have specific requirements and you can learn more about these when enabling them in the dashboard. Learn more about explicitly <a href="689a53f1d37f175c08d9c3ea/689a6f89d37f175c08da64a7" target="">enabling or disabling payment methods for your integration</a>.</p><p class="slate-p " ></p><div style="text-align:left"><img src="https://d24lr4zqs1tgqh.cloudfront.net/0f3c394d-03f7-450d-b05b-ab3366675789.png" style="
              width:1121px;
	            height:579px;
	            aspect-ratio:1121 / 579"
         /></div><p class="slate-p " ></p>

All Checkout API integrations will automaticaly consider payment methods that are “globally” available on the Checkout API Settings 

 page of the dashboard in Advanced Settings to be available and allowed. So that means when you mount the Checkout Component in your integration, each globally available payment method will show up (unless unavailable in the browser environment, like ApplePay when not in Safari for instance) as an available option for your customers to checkout with unless you either disable it on the Payment Methods page for all Checkout API integrations or disable it explicitly for individual integrations on the Checkout API Settings 

 page of the dashboard in Advanced Settings.

 enabled as the base payment method. All other payment methods must be configured as desired. Some payment methods have specific requirements and you can learn more about these when enabling them in the dashboard. Learn more about explicitly 

<p class="slate-p " >Any globally available payment methods can be explicitly disabled or re-enabled on the <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings. For instance, if a merchant has already enabled <strong class="slate-bold">ApplePay</strong> as a payment method but only wants to offer <strong class="slate-bold">Credit Cards</strong> in one of their connected integrations, they can do that.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=warning ><div class="callout-icon"><svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.916637 15.5009C0.791637 15.5009 0.683998 15.4732 0.59372 15.4176C0.503443 15.362 0.430526 15.2857 0.37497 15.1884C0.319415 15.0912 0.288165 14.9905 0.28122 14.8864C0.274276 14.7822 0.305526 14.6745 0.37497 14.5634L8.4583 0.605103C8.52775 0.493991 8.60761 0.41413 8.69789 0.365519C8.78816 0.316908 8.88886 0.292603 8.99997 0.292603C9.11108 0.292603 9.21178 0.316908 9.30205 0.365519C9.39233 0.41413 9.47219 0.493991 9.54164 0.605103L17.625 14.5634C17.6944 14.6745 17.7257 14.7822 17.7187 14.8864C17.7118 14.9905 17.6805 15.0912 17.625 15.1884C17.5694 15.2857 17.4965 15.362 17.4062 15.4176C17.3159 15.4732 17.2083 15.5009 17.0833 15.5009H0.916637ZM1.99997 14.2509H16L8.99997 2.1676L1.99997 14.2509ZM9.0833 13.0634C9.26386 13.0634 9.41316 13.0044 9.53122 12.8864C9.64928 12.7683 9.7083 12.619 9.7083 12.4384C9.7083 12.2579 9.64928 12.1086 9.53122 11.9905C9.41316 11.8725 9.26386 11.8134 9.0833 11.8134C8.90275 11.8134 8.75344 11.8725 8.63539 11.9905C8.51733 12.1086 8.4583 12.2579 8.4583 12.4384C8.4583 12.619 8.51733 12.7683 8.63539 12.8864C8.75344 13.0044 8.90275 13.0634 9.0833 13.0634ZM9.0833 10.7509C9.26386 10.7509 9.41316 10.6919 9.53122 10.5739C9.64928 10.4558 9.7083 10.3065 9.7083 10.1259V6.70927C9.7083 6.52871 9.64928 6.37941 9.53122 6.26135C9.41316 6.1433 9.26386 6.08427 9.0833 6.08427C8.90275 6.08427 8.75344 6.1433 8.63539 6.26135C8.51733 6.37941 8.4583 6.52871 8.4583 6.70927V10.1259C8.4583 10.3065 8.51733 10.4558 8.63539 10.5739C8.75344 10.6919 8.90275 10.7509 9.0833 10.7509Z" fill="#F1C21B"></path></svg></div><div ><p class="slate-p " >if a payment method has not yet been enabled globally, it cannot be disabled or re-enabled at the integration level. It must be enabled at the global level first.</p></div></div><p class="slate-p " >More importantly, you can do this programatically accomplish this native to your integration in the Checkout API. To learn more about explicitly <a href="689a53f1d37f175c08d9c3ea/689a6ea26ab85ee91a54e4bb" target="">reading</a> or <a href="689a53f1d37f175c08d9c3ea/689a6f89d37f175c08da64a7" target="">updating</a> payment methods in your integration, look at the API docs on the next couple pages.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " > Payment methods can be managed in the ConvesioPay Dashboard on the following pages in Advanced Settings:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative">Global - <a href="https://convesiopay.com/advanced-settings/payment-methods" target="_blank">Payment Methods</a></div></li><li class="slate-li " ><div style="position:relative">Integration Specific - <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a></div></li></ul></div></div><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/54ce3849-9027-4a3f-a7d1-ac7a38bd1daa.png" alt="" style="
              width:1119px;
	            height:571px;
	            aspect-ratio:1119 / 571"
         /></div></figure></div><p class="slate-p " ></p><p class="slate-p " ></p>

Any globally available payment methods can be explicitly disabled or re-enabled on the 

 page of the dashboard in Advanced Settings. For instance, if a merchant has already enabled 

 as a payment method but only wants to offer 

 in one of their connected integrations, they can do that.

More importantly, you can do this programatically accomplish this native to your integration in the Checkout API. To learn more about explicitly 

 payment methods in your integration, look at the API docs on the next couple pages.

<p class="slate-p " >You can easily filter payment methods that are available at the integration level by simply passing your integration name as a query parameter. This can be useful if you want to be able to show the merchant or customer what payment methods customers can use to checkout with on an internal integration page (outside of the Checkout Component). And more importantly, you can give the your integration the power to update which of those payment methods are available from within your integration. </p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >To take advantage of this feature properly, be sure to pass the optional <code class="slate-code">integration</code> query string parameter. The value should be equal to the Connected Integration name. If you used the <a href="689a53c1fa672f8c7cf51e19/689b92cadd190b3ba859a9f1" target="">Connect Integration API</a>, this would be the generated <code class="slate-code">integrationName</code> string returned in the Connect API response. This same value can be passed into the config object when you create the component to filter payment methods available for this integration specifically (you can also find this value as the name of the integration on the <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings). If the correct name is not provided, the customer will be able to use all globally enabled payment methods in ConvesioPay for the merchant.</p></div></div><p class="slate-p " >Payment Method list requests must be made server side and over <a href="http://en.wikipedia.org/wiki/HTTP_Secure" target="_blank">HTTPS</a>. Calls made without <code class="slate-code">https://</code> or proper authentication will fail.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=error ><div class="callout-icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.08366 9.9801C9.25033 9.9801 9.39269 9.92107 9.51074 9.80302C9.6288 9.68496 9.68783 9.53566 9.68783 9.3551V5.31344C9.68783 5.14677 9.62533 5.00441 9.50033 4.88635C9.37533 4.7683 9.22949 4.70927 9.06283 4.70927C8.88227 4.70927 8.73296 4.7683 8.61491 4.88635C8.49685 5.00441 8.43783 5.15371 8.43783 5.33427V9.37594C8.43783 9.5426 8.50033 9.68496 8.62533 9.80302C8.75033 9.92107 8.9031 9.9801 9.08366 9.9801ZM9.00033 13.1676C9.19477 13.1676 9.35796 13.1016 9.48991 12.9697C9.62185 12.8377 9.68783 12.6745 9.68783 12.4801C9.68783 12.2857 9.62185 12.1225 9.48991 11.9905C9.35796 11.8586 9.19477 11.7926 9.00033 11.7926C8.80588 11.7926 8.64269 11.8586 8.51074 11.9905C8.3788 12.1225 8.31283 12.2857 8.31283 12.4801C8.31283 12.6745 8.3788 12.8377 8.51074 12.9697C8.64269 13.1016 8.80588 13.1676 9.00033 13.1676ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C10.9448 16.0843 12.6114 15.3898 14.0003 14.0009C15.3892 12.612 16.0837 10.9454 16.0837 9.00094C16.0837 7.05649 15.3892 5.38982 14.0003 4.00094C12.6114 2.61205 10.9448 1.9176 9.00033 1.9176C7.05588 1.9176 5.38921 2.61205 4.00033 4.00094C2.61144 5.38982 1.91699 7.05649 1.91699 9.00094C1.91699 10.9454 2.61144 12.6989 4.00033 14.0009C5.38921 15.3898 7.05588 16.0843 9.00033 16.0843Z" fill="#E90005"></path></svg></div><div ><p class="slate-p " ><strong class="slate-bold">NOTE</strong> - Secret keys must be stored securely. Don’t expose your secret key on a website or embed it in a mobile application. Payment Method list requests must be made server side, do not attempt to list a payment method client side.</p></div></div><p class="slate-p " ></p>

You can easily filter payment methods that are available at the integration level by simply passing your integration name as a query parameter. This can be useful if you want to be able to show the merchant or customer what payment methods customers can use to checkout with on an internal integration page (outside of the Checkout Component). And more importantly, you can give the your integration the power to update which of those payment methods are available from within your integration. 

Payment Method list requests must be made server side and over 

integration

paymentMethods

integrations

error

message

<p class="slate-p " >It is possible to programmatically allow your integration to update which globally enabled payment methods are available from within your integration. Use the Secret Key associated with your integration in the API request to able to disable or re-enable any payment method at the integration level.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >To take advantage of this feature properly, be sure to pass the optional <code class="slate-code">integration</code> query string parameter. The value should be equal to the Connected Integration name. If you used the <a href="689a53c1fa672f8c7cf51e19/689b92cadd190b3ba859a9f1" target="">Connect Integration API</a>, this would be the generated <code class="slate-code">integrationName</code> string returned in the Connect API response. This same value can be passed into the config object when you create the component to filter payment methods available for this integration specifically (you can also find this value as the name of the integration on the <a href="https://convesiopay.com/advanced-settings/connected-integrations" target="_blank">Connected Integrations</a> page of the dashboard in Advanced Settings). If the correct name is not provided, the customer will be able to use all globally enabled payment methods in ConvesioPay for the merchant.</p></div></div><p class="slate-p " >Payment Method update requests must be made server side and over <a href="http://en.wikipedia.org/wiki/HTTP_Secure" target="_blank">HTTPS</a>. Calls made without <code class="slate-code">https://</code> or proper authentication will fail.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=error ><div class="callout-icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.08366 9.9801C9.25033 9.9801 9.39269 9.92107 9.51074 9.80302C9.6288 9.68496 9.68783 9.53566 9.68783 9.3551V5.31344C9.68783 5.14677 9.62533 5.00441 9.50033 4.88635C9.37533 4.7683 9.22949 4.70927 9.06283 4.70927C8.88227 4.70927 8.73296 4.7683 8.61491 4.88635C8.49685 5.00441 8.43783 5.15371 8.43783 5.33427V9.37594C8.43783 9.5426 8.50033 9.68496 8.62533 9.80302C8.75033 9.92107 8.9031 9.9801 9.08366 9.9801ZM9.00033 13.1676C9.19477 13.1676 9.35796 13.1016 9.48991 12.9697C9.62185 12.8377 9.68783 12.6745 9.68783 12.4801C9.68783 12.2857 9.62185 12.1225 9.48991 11.9905C9.35796 11.8586 9.19477 11.7926 9.00033 11.7926C8.80588 11.7926 8.64269 11.8586 8.51074 11.9905C8.3788 12.1225 8.31283 12.2857 8.31283 12.4801C8.31283 12.6745 8.3788 12.8377 8.51074 12.9697C8.64269 13.1016 8.80588 13.1676 9.00033 13.1676ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C10.9448 16.0843 12.6114 15.3898 14.0003 14.0009C15.3892 12.612 16.0837 10.9454 16.0837 9.00094C16.0837 7.05649 15.3892 5.38982 14.0003 4.00094C12.6114 2.61205 10.9448 1.9176 9.00033 1.9176C7.05588 1.9176 5.38921 2.61205 4.00033 4.00094C2.61144 5.38982 1.91699 7.05649 1.91699 9.00094C1.91699 10.9454 2.61144 12.6989 4.00033 14.0009C5.38921 15.3898 7.05588 16.0843 9.00033 16.0843Z" fill="#E90005"></path></svg></div><div ><p class="slate-p " ><strong class="slate-bold">NOTE</strong> - Secret keys must be stored securely. Don’t expose your secret key on a website or embed it in a mobile application. Payment Method update requests must be made server side, do not attempt to update a payment method client side.</p></div></div><p class="slate-p " ></p>

It is possible to programmatically allow your integration to update which globally enabled payment methods are available from within your integration. Use the Secret Key associated with your integration in the API request to able to disable or re-enable any payment method at the integration level.

Payment Method update requests must be made server side and over 

Enable/Disable credit card payment method

card

applePay

btcPay

Content-Type

Integration level payment methods successfully updated

Get Token

<p class="slate-p " ></p><h2 class="slate-h2 " >component.createToken()</h2><p class="slate-p " ></p><p class="slate-p " >Creates a payment token that represents the card details entered into the component along with some information about the origin of the customer. </p><p class="slate-p " ></p><p class="slate-p " >You can use this token to <a href="67084a40bd7bc9b280dc3c4b" target="">create a card payment</a> server side with the API. </p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=error ><div class="callout-icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.08366 9.9801C9.25033 9.9801 9.39269 9.92107 9.51074 9.80302C9.6288 9.68496 9.68783 9.53566 9.68783 9.3551V5.31344C9.68783 5.14677 9.62533 5.00441 9.50033 4.88635C9.37533 4.7683 9.22949 4.70927 9.06283 4.70927C8.88227 4.70927 8.73296 4.7683 8.61491 4.88635C8.49685 5.00441 8.43783 5.15371 8.43783 5.33427V9.37594C8.43783 9.5426 8.50033 9.68496 8.62533 9.80302C8.75033 9.92107 8.9031 9.9801 9.08366 9.9801ZM9.00033 13.1676C9.19477 13.1676 9.35796 13.1016 9.48991 12.9697C9.62185 12.8377 9.68783 12.6745 9.68783 12.4801C9.68783 12.2857 9.62185 12.1225 9.48991 11.9905C9.35796 11.8586 9.19477 11.7926 9.00033 11.7926C8.80588 11.7926 8.64269 11.8586 8.51074 11.9905C8.3788 12.1225 8.31283 12.2857 8.31283 12.4801C8.31283 12.6745 8.3788 12.8377 8.51074 12.9697C8.64269 13.1016 8.80588 13.1676 9.00033 13.1676ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C10.9448 16.0843 12.6114 15.3898 14.0003 14.0009C15.3892 12.612 16.0837 10.9454 16.0837 9.00094C16.0837 7.05649 15.3892 5.38982 14.0003 4.00094C12.6114 2.61205 10.9448 1.9176 9.00033 1.9176C7.05588 1.9176 5.38921 2.61205 4.00033 4.00094C2.61144 5.38982 1.91699 7.05649 1.91699 9.00094C1.91699 10.9454 2.61144 12.6989 4.00033 14.0009C5.38921 15.3898 7.05588 16.0843 9.00033 16.0843Z" fill="#E90005"></path></svg></div><div ><p class="slate-p " >Do not attempt to create a card payment request client side.</p></div></div><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/4e08f861-c09b-4193-a718-93f0fb9d1a20.png" alt="" style="
              width:642px;
	            height:378px;
	            aspect-ratio:642 / 378"
         /></div></figure></div><p class="slate-p " ></p><p class="slate-p " >The following properties are required to use this method:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><code class="slate-code">amount</code> - <span style="color:#434343"><strong class="slate-bold">number</strong></span><span style="color:#980100"> REQUIRED</span><span style="color:#FE0000"><strong class="slate-bold"> </strong></span>Total amount to be paid in minor units</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">currency</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED</span><span style="color:#FE0000"><strong class="slate-bold"> </strong></span>3 character ISO currency code</div></li></ul><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=warning ><div class="callout-icon"><svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.916637 15.5009C0.791637 15.5009 0.683998 15.4732 0.59372 15.4176C0.503443 15.362 0.430526 15.2857 0.37497 15.1884C0.319415 15.0912 0.288165 14.9905 0.28122 14.8864C0.274276 14.7822 0.305526 14.6745 0.37497 14.5634L8.4583 0.605103C8.52775 0.493991 8.60761 0.41413 8.69789 0.365519C8.78816 0.316908 8.88886 0.292603 8.99997 0.292603C9.11108 0.292603 9.21178 0.316908 9.30205 0.365519C9.39233 0.41413 9.47219 0.493991 9.54164 0.605103L17.625 14.5634C17.6944 14.6745 17.7257 14.7822 17.7187 14.8864C17.7118 14.9905 17.6805 15.0912 17.625 15.1884C17.5694 15.2857 17.4965 15.362 17.4062 15.4176C17.3159 15.4732 17.2083 15.5009 17.0833 15.5009H0.916637ZM1.99997 14.2509H16L8.99997 2.1676L1.99997 14.2509ZM9.0833 13.0634C9.26386 13.0634 9.41316 13.0044 9.53122 12.8864C9.64928 12.7683 9.7083 12.619 9.7083 12.4384C9.7083 12.2579 9.64928 12.1086 9.53122 11.9905C9.41316 11.8725 9.26386 11.8134 9.0833 11.8134C8.90275 11.8134 8.75344 11.8725 8.63539 11.9905C8.51733 12.1086 8.4583 12.2579 8.4583 12.4384C8.4583 12.619 8.51733 12.7683 8.63539 12.8864C8.75344 13.0044 8.90275 13.0634 9.0833 13.0634ZM9.0833 10.7509C9.26386 10.7509 9.41316 10.6919 9.53122 10.5739C9.64928 10.4558 9.7083 10.3065 9.7083 10.1259V6.70927C9.7083 6.52871 9.64928 6.37941 9.53122 6.26135C9.41316 6.1433 9.26386 6.08427 9.0833 6.08427C8.90275 6.08427 8.75344 6.1433 8.63539 6.26135C8.51733 6.37941 8.4583 6.52871 8.4583 6.70927V10.1259C8.4583 10.3065 8.51733 10.4558 8.63539 10.5739C8.75344 10.6919 8.90275 10.7509 9.0833 10.7509Z" fill="#F1C21B"></path></svg></div><div ><p class="slate-p " ><strong class="slate-bold"> Note</strong> - Please note that all currency amount fields are in minor units (ie <code class="slate-code">$9.49</code> would be expressed as <code class="slate-code">949</code>). Also be aware that the minimum processable amount is 50 cents (ie <code class="slate-code">50</code> in minor units).</p></div></div><p class="slate-p " ></p><h2 class="slate-h2 " >Best Practices for Tokenization</h2><p class="slate-p " >Since tokenization of card details cannot occur until valid information has been provided, you will need to wait for the <code class="slate-code">isValid</code> status from the Component change event as depicted <a href="6709a14f9847a8ab4b50a246/6709e1859847a8ab4b519469" target="">here</a>.  But while it&apos;s tempting to create the token in the change event handler directly, care should be given to use the change event to only manage state and create a token directly before creating the payment request. You can create more than one token if necessary due to new information but the <code class="slate-code">createToken()</code> method is rate limited to preven abuse.</p><p class="slate-p " ></p><h3 class="slate-h3 " >A few things to keep in mind:</h3><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Never call <code class="slate-code">createToken()</code> inside the change event handler. the change event fires on every field interaction (typing, focus, blur). Use it only to enable/disable your submit button or handle validation errors visually in your integration if necessary.</div></li><li class="slate-li " ><div style="position:relative">Call <code class="slate-code">createToken()</code>only on explicit user action (Pay/Submit button click). This guarantees exactly one token per checkout attempt without risk of rate limiting and/or missing recent changes in your payment request.</div></li><li class="slate-li " ><div style="position:relative">If you must create the token before submit (ie to pre-authorize), gate method attempts to fire only once per valid state transition.</div></li></ol><p class="slate-p " ></p><h3 class="slate-h3 " >Implementation Example</h3><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line"><div class="slate-code_line">let isCardValid = false;

// Handle real-time credit card field validation errors from the component.
component.on(&apos;change&apos;, (event) =&gt; {
    if (event.type === &apos;card&apos;) {
        isCardValid = event.isValid;

        if (!isCardValid) {
            // Handle errors, one or more component fields are not valid
            console.log(event.errors);
        }
    }
});

async function onSubmit() {
    if (!isCardValid) return;
    const token = await component.createToken({ amount: 1000, currency: &apos;USD&apos; });
    // Proceed with payment using the created token...
}</div></div></code></pre></div><p class="slate-p " ></p><h2 class="slate-h2 " >Rate Limiting</h2><p class="slate-p " >The <code class="slate-code">createToken()</code> method is subject to rate limiting to prevent excessive use. Only one token can be created per 3 seconds. If the method is invoked more frequently, rate limiting will occur and instead of a <code class="slate-code">token</code> string, the Promise will return an <code class="slate-code">error</code> object (more details below).</p><p class="slate-p " ></p><h2 class="slate-h2 " >Success</h2><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100%;">Method returns</div></div><colgroup ><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">token</code> - <span style="color:#434343"><strong class="slate-bold">promise</strong></span><span style="color:#980100"> </span>Returns a Promise that resolves with a tokenized payment method (<em class="slate-italic">string</em>) required to securely create a payment</p></td></div></tr></tbody></table></div></div><h2 class="slate-h2 " >Errors</h2><p class="slate-p " >In the event there could be an issue converting the customer&apos;s card details into a secure payment token, the component will throw an error.  If you would like to test this error you can use <code class="slate-code">token_error</code> for the Cardholder Name when you call the <code class="slate-code">component.createToken()</code> method (see other possible error examples below).</p><div class="published-table"><div class="table-container" style="padding-left: 0px;"><table class="slate-table" style="min-width:100%;"><div class="published-table-header" style="width:100%;min-width:100%;"><div style="width:100%;">Error response returns</div></div><colgroup ><col style="width:initial"></colgroup><tbody class="slate-TableElement-tbody"><tr class="slate-tr " ><div class="slate-TableCellElement-content"><td class="slate-td"><p class="slate-p " ><code class="slate-code">token</code> - <span style="color:#434343"><strong class="slate-bold">promise</strong></span><span style="color:#980100"> </span>Returns a Promise that resolves with a <em class="slate-italic">JavaScript Erro</em>r object (see below)</p></td></div></tr></tbody></table></div></div><h3 class="slate-h3 " >Miscellaneous Error Example</h3><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line"><div class="slate-code_line">&quot;error&quot;: {
  &quot;type&quot;: &quot;tokenCreationError&quot;,
  &quot;message&quot;: &quot;Unable to create a valid payment token.&quot;
}</div></div></code></pre></div><p class="slate-p " ></p><h3 class="slate-h3 " >Rate Limit Error Example</h3><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line"><div class="slate-code_line">&quot;error&quot;: {
  &quot;type&quot;: &quot;rateLimitError&quot;,
  &quot;message&quot;: &quot;Too many tokenization requests. Please retry after a short delay.&quot;,
  &quot;hint&quot;: &quot;Call createToken() in your payment submit handler, not on input change events.&quot;,
  &quot;retryAfter&quot;: 2
}</div></div></code></pre></div><p class="slate-p " ></p><h3 class="slate-h3 " >Multiple Token Requests In Flight Example</h3><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line"><div class="slate-code_line">error: {
  type: &apos;inFlightError&apos;,
  message: &apos;A token creation request is already in progress.&apos;,
  hint: &apos;Ensure createToken() is called only once per payment submission, not on input change events.&apos;
}</div></div></code></pre></div><p class="slate-p " ></p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

Creates a payment token that represents the card details entered into the component along with some information about the origin of the customer. 

The following properties are required to use this method:

Since tokenization of card details cannot occur until valid information has been provided, you will need to wait for the 

 status from the Component change event as depicted 

.  But while it's tempting to create the token in the change event handler directly, care should be given to use the change event to only manage state and create a token directly before creating the payment request. You can create more than one token if necessary due to new information but the 

 method is subject to rate limiting to prevent excessive use. Only one token can be created per 3 seconds. If the method is invoked more frequently, rate limiting will occur and instead of a 

Method returns

In the event there could be an issue converting the customer's card details into a secure payment token, the component will throw an error.  If you would like to test this error you can use 

 for the Cardholder Name when you call the 

 method (see other possible error examples below).

Error response returns

Multiple Token Requests In Flight Example

Session

<p class="slate-p " ></p><h2 class="slate-h2 " >component.createApplePaySession()</h2><p class="slate-p " ></p><p class="slate-p " >Creates an ApplePay session that allows the customer to initiate a tokenized payment intent that represents the payment details the customer provided along with some information about their origin. This is considered a setup method that should be called promptly after mounting the component if you want to offer ApplePay and must be called before the customer interacts with the component. </p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >In order to take ApplePay payments in your integration, you will need to enable it on the Checkout API <a href="https://convesiopay.com/advanced-settings/payment-methods" target="_blank">Payment Methods</a> page in the dashboard in Advanced Settings and ensure that the domain is registered and listed in the ApplePay Domains table.</p></div></div><p class="slate-p " >Once the customer chooses to <strong class="slate-bold">Pay with ApplePay</strong>, an authorization request is triggered. Simultaneously, if the ApplePay session is successfully authorized via Face ID or Touch ID, ConvesioPay will securely and automatically create the payment token that represents the card details entered into the component along with some information about the origin of the customer. You can get that token from the component event change handler. You will need to use this as the <code class="slate-code">paymentToken</code> later when you are ready to create the payment.</p><p class="slate-p " ></p><p class="slate-p " >You can use this token to <a href="67084a40bd7bc9b280dc3c4b" target="">create a card payment</a> server side with the API. </p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=error ><div class="callout-icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.08366 9.9801C9.25033 9.9801 9.39269 9.92107 9.51074 9.80302C9.6288 9.68496 9.68783 9.53566 9.68783 9.3551V5.31344C9.68783 5.14677 9.62533 5.00441 9.50033 4.88635C9.37533 4.7683 9.22949 4.70927 9.06283 4.70927C8.88227 4.70927 8.73296 4.7683 8.61491 4.88635C8.49685 5.00441 8.43783 5.15371 8.43783 5.33427V9.37594C8.43783 9.5426 8.50033 9.68496 8.62533 9.80302C8.75033 9.92107 8.9031 9.9801 9.08366 9.9801ZM9.00033 13.1676C9.19477 13.1676 9.35796 13.1016 9.48991 12.9697C9.62185 12.8377 9.68783 12.6745 9.68783 12.4801C9.68783 12.2857 9.62185 12.1225 9.48991 11.9905C9.35796 11.8586 9.19477 11.7926 9.00033 11.7926C8.80588 11.7926 8.64269 11.8586 8.51074 11.9905C8.3788 12.1225 8.31283 12.2857 8.31283 12.4801C8.31283 12.6745 8.3788 12.8377 8.51074 12.9697C8.64269 13.1016 8.80588 13.1676 9.00033 13.1676ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C10.9448 16.0843 12.6114 15.3898 14.0003 14.0009C15.3892 12.612 16.0837 10.9454 16.0837 9.00094C16.0837 7.05649 15.3892 5.38982 14.0003 4.00094C12.6114 2.61205 10.9448 1.9176 9.00033 1.9176C7.05588 1.9176 5.38921 2.61205 4.00033 4.00094C2.61144 5.38982 1.91699 7.05649 1.91699 9.00094C1.91699 10.9454 2.61144 12.6989 4.00033 14.0009C5.38921 15.3898 7.05588 16.0843 9.00033 16.0843Z" fill="#E90005"></path></svg></div><div ><p class="slate-p " >Do not attempt to create a card payment request client side.</p></div></div><p class="slate-p " ></p><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/cfed0b47-b028-4cde-815b-7c4200c95cfa.png" alt="" style="
              width:639px;
	            height:273px;
	            aspect-ratio:639 / 273"
         /></div></figure></div><p class="slate-p " ></p><p class="slate-p " >The following properties are required to use this method:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><code class="slate-code">integration</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED </span>The name of your ConvesioPay integration</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">returnUrl</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED</span><span style="color:#FE0000"><strong class="slate-bold"> </strong></span>The url to return the user to if a redirect is necessary</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">amount</code> - <span style="color:#434343"><strong class="slate-bold">number</strong></span><span style="color:#980100"> REQUIRED</span><span style="color:#FE0000"><strong class="slate-bold"> </strong></span>Total amount to be paid in minor units</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">currency</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED</span><span style="color:#FE0000"><strong class="slate-bold"> </strong></span>3 character ISO currency code</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">email</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED</span><span style="color:#FE0000"><strong class="slate-bold"> </strong></span>The email of the customer</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">name</code> - <span style="color:#434343"><strong class="slate-bold">string</strong></span><span style="color:#980100"> REQUIRED</span><span style="color:#FE0000"><strong class="slate-bold"> </strong></span>The name of the customer</div></li></ul><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=warning ><div class="callout-icon"><svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.916637 15.5009C0.791637 15.5009 0.683998 15.4732 0.59372 15.4176C0.503443 15.362 0.430526 15.2857 0.37497 15.1884C0.319415 15.0912 0.288165 14.9905 0.28122 14.8864C0.274276 14.7822 0.305526 14.6745 0.37497 14.5634L8.4583 0.605103C8.52775 0.493991 8.60761 0.41413 8.69789 0.365519C8.78816 0.316908 8.88886 0.292603 8.99997 0.292603C9.11108 0.292603 9.21178 0.316908 9.30205 0.365519C9.39233 0.41413 9.47219 0.493991 9.54164 0.605103L17.625 14.5634C17.6944 14.6745 17.7257 14.7822 17.7187 14.8864C17.7118 14.9905 17.6805 15.0912 17.625 15.1884C17.5694 15.2857 17.4965 15.362 17.4062 15.4176C17.3159 15.4732 17.2083 15.5009 17.0833 15.5009H0.916637ZM1.99997 14.2509H16L8.99997 2.1676L1.99997 14.2509ZM9.0833 13.0634C9.26386 13.0634 9.41316 13.0044 9.53122 12.8864C9.64928 12.7683 9.7083 12.619 9.7083 12.4384C9.7083 12.2579 9.64928 12.1086 9.53122 11.9905C9.41316 11.8725 9.26386 11.8134 9.0833 11.8134C8.90275 11.8134 8.75344 11.8725 8.63539 11.9905C8.51733 12.1086 8.4583 12.2579 8.4583 12.4384C8.4583 12.619 8.51733 12.7683 8.63539 12.8864C8.75344 13.0044 8.90275 13.0634 9.0833 13.0634ZM9.0833 10.7509C9.26386 10.7509 9.41316 10.6919 9.53122 10.5739C9.64928 10.4558 9.7083 10.3065 9.7083 10.1259V6.70927C9.7083 6.52871 9.64928 6.37941 9.53122 6.26135C9.41316 6.1433 9.26386 6.08427 9.0833 6.08427C8.90275 6.08427 8.75344 6.1433 8.63539 6.26135C8.51733 6.37941 8.4583 6.52871 8.4583 6.70927V10.1259C8.4583 10.3065 8.51733 10.4558 8.63539 10.5739C8.75344 10.6919 8.90275 10.7509 9.0833 10.7509Z" fill="#F1C21B"></path></svg></div><div ><p class="slate-p " ><strong class="slate-bold"> Note</strong> - Please note that all currency amount fields are in minor units (ie <code class="slate-code">$9.49</code> would be expressed as <code class="slate-code">949</code>). Also be aware that the minimum processable amount is 50 cents (ie <code class="slate-code">50</code> in minor units).</p></div></div><p class="slate-p " >The following properties are optional when using this method (see <a href="6709e02e659ce1fd171e7ffd/67084a40bd7bc9b280dc3c4b" target="">Create a Card Payment</a> for more details on their data structure):</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><code class="slate-code">billingAddress</code> - <span style="color:#434343"><strong class="slate-bold">object</strong></span> The customer&apos;s billing address</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">shippingAddress</code> - <span style="color:#434343"><strong class="slate-bold">object</strong></span> The customer&apos;s shipping address</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">lineItems</code> - <span style="color:#434343"><strong class="slate-bold">object</strong></span> Information about the line items for the order</div></li></ul><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >Customers can take advantage of ApplePay when viewing your integration in the Safari browser on an Apple device and are signed into the same or another Apple device with ApplePay enabled that can authorize the payment via Face ID or Touch ID.</p></div></div><p class="slate-p " ></p><h2 class="slate-h2 " >Handling Payment Events</h2><p class="slate-p " >We expose a change event you can subscribe to in the checkout component. The change event is triggered when the component&apos;s value changes and provides valuable feedback on the payment status and details. You can learn more about these change events <a href="6709a14f9847a8ab4b50a246/6709e1859847a8ab4b519469" target="">here</a>.</p><div class="slate-div"></div><p class="slate-p " ></p><p class="slate-p " ></p>

Creates an ApplePay session that allows the customer to initiate a tokenized payment intent that represents the payment details the customer provided along with some information about their origin. This is considered a setup method that should be called promptly after mounting the component if you want to offer ApplePay and must be called before the customer interacts with the component. 

, an authorization request is triggered. Simultaneously, if the ApplePay session is successfully authorized via Face ID or Touch ID, ConvesioPay will securely and automatically create the payment token that represents the card details entered into the component along with some information about the origin of the customer. You can get that token from the component event change handler. You will need to use this as the 

 later when you are ready to create the payment.

The following properties are optional when using this method (see 

 for more details on their data structure):

We expose a change event you can subscribe to in the checkout component. The change event is triggered when the component's value changes and provides valuable feedback on the payment status and details. You can learn more about these change events 

Payment

 later when you are ready to create the payment. You can use this token to 

The following properties are optional when using this method (read more about each below):

Implementation Examples of Optional ApplePay Properties


Creates an GooglePay session that allows the customer to initiate a tokenized payment intent that represents the payment details the customer provided along with some information about their origin. This is considered a setup method that should be called promptly after mounting the component if you want to offer GooglePay and must be called before the customer interacts with the component. 

, an authorization request is triggered. Simultaneously, if the GooglePay session is successfully authorized over the web or wallet, ConvesioPay will securely and automatically create the payment token that represents the card details entered into the component along with some information about the origin of the customer. You can get that token from the component event change handler. You will need to use this as the 

Implementation Examples of Optional GooglePay Properties


<p class="slate-p " >Creates an BTCPay session that allows the customer to initiate a tokenized payment intent that represents the payment details the customer provided along with some information about their origin. After creating the session server-side, you will want to create the BTCPay payment intent with the session object returned from the BTCPay session response. These 2 steps are considered setup methods that should be called promptly after mounting the component if you want to offer BTCPay and must be called before the customer interacts with the component. </p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=info ><div class="callout-icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.0628 14.1676C10.2434 14.1676 10.3927 14.1086 10.5107 13.9905C10.6288 13.8725 10.6878 13.7232 10.6878 13.5426V9.77177C10.6878 9.6051 10.6253 9.46274 10.5003 9.34469C10.3753 9.22663 10.2295 9.1676 10.0628 9.1676C9.88227 9.1676 9.73296 9.22663 9.61491 9.34469C9.49685 9.46274 9.43783 9.61205 9.43783 9.7926V13.5634C9.43783 13.7301 9.50033 13.8725 9.62533 13.9905C9.75033 14.1086 9.89616 14.1676 10.0628 14.1676ZM10.0003 7.62594C10.1948 7.62594 10.358 7.56344 10.4899 7.43844C10.6219 7.31344 10.6878 7.15371 10.6878 6.95927C10.6878 6.76482 10.6219 6.59816 10.4899 6.45927C10.358 6.32038 10.1948 6.25094 10.0003 6.25094C9.80588 6.25094 9.64269 6.32038 9.51074 6.45927C9.3788 6.59816 9.31283 6.76482 9.31283 6.95927C9.31283 7.15371 9.3788 7.31344 9.51074 7.43844C9.64269 7.56344 9.80588 7.62594 10.0003 7.62594ZM10.0003 18.3343C8.81977 18.3343 7.72255 18.1225 6.70866 17.6989C5.69477 17.2752 4.81283 16.6884 4.06283 15.9384C3.31283 15.1884 2.72602 14.3065 2.30241 13.2926C1.8788 12.2787 1.66699 11.1815 1.66699 10.0009C1.66699 8.83427 1.8788 7.74399 2.30241 6.7301C2.72602 5.71621 3.31283 4.83427 4.06283 4.08427C4.81283 3.33427 5.69477 2.74399 6.70866 2.31344C7.72255 1.88288 8.81977 1.6676 10.0003 1.6676C11.167 1.6676 12.2573 1.88288 13.2712 2.31344C14.285 2.74399 15.167 3.33427 15.917 4.08427C16.667 4.83427 17.2573 5.71621 17.6878 6.7301C18.1184 7.74399 18.3337 8.83427 18.3337 10.0009C18.3337 11.1815 18.1184 12.2787 17.6878 13.2926C17.2573 14.3065 16.667 15.1884 15.917 15.9384C15.167 16.6884 14.285 17.2752 13.2712 17.6989C12.2573 18.1225 11.167 18.3343 10.0003 18.3343ZM10.0003 17.0843C11.9448 17.0843 13.6114 16.3898 15.0003 15.0009C16.3892 13.612 17.0837 11.9454 17.0837 10.0009C17.0837 8.05649 16.3892 6.38982 15.0003 5.00094C13.6114 3.61205 11.9448 2.9176 10.0003 2.9176C8.05588 2.9176 6.38921 3.61205 5.00033 5.00094C3.61144 6.38982 2.91699 8.05649 2.91699 10.0009C2.91699 11.9454 3.61144 13.612 5.00033 15.0009C6.38921 16.3898 8.05588 17.0843 10.0003 17.0843Z" fill="#3960B4"></path></svg></div><div ><p class="slate-p " >In order to take BTCPay payments in your integration, you will need enable the BTCPay Server integration on the <a href="https://convesiopay.com/integrations/btcpay" target="_blank">Integrations</a> page and then enable it as a payment method on the Checkout API <a href="https://convesiopay.com/advanced-settings/payment-methods" target="_blank">Payment Methods</a> page in the dashboard in Advanced Settings.</p></div></div><p class="slate-p " >BTCPay session requests must be made server side and over <a href="http://en.wikipedia.org/wiki/HTTP_Secure" target="_blank">HTTPS</a>. Calls made without <code class="slate-code">https://</code> or proper authentication will fail.</p><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=error ><div class="callout-icon"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.08366 9.9801C9.25033 9.9801 9.39269 9.92107 9.51074 9.80302C9.6288 9.68496 9.68783 9.53566 9.68783 9.3551V5.31344C9.68783 5.14677 9.62533 5.00441 9.50033 4.88635C9.37533 4.7683 9.22949 4.70927 9.06283 4.70927C8.88227 4.70927 8.73296 4.7683 8.61491 4.88635C8.49685 5.00441 8.43783 5.15371 8.43783 5.33427V9.37594C8.43783 9.5426 8.50033 9.68496 8.62533 9.80302C8.75033 9.92107 8.9031 9.9801 9.08366 9.9801ZM9.00033 13.1676C9.19477 13.1676 9.35796 13.1016 9.48991 12.9697C9.62185 12.8377 9.68783 12.6745 9.68783 12.4801C9.68783 12.2857 9.62185 12.1225 9.48991 11.9905C9.35796 11.8586 9.19477 11.7926 9.00033 11.7926C8.80588 11.7926 8.64269 11.8586 8.51074 11.9905C8.3788 12.1225 8.31283 12.2857 8.31283 12.4801C8.31283 12.6745 8.3788 12.8377 8.51074 12.9697C8.64269 13.1016 8.80588 13.1676 9.00033 13.1676ZM9.00033 17.3343C7.81977 17.3343 6.72255 17.1225 5.70866 16.6989C4.69477 16.2752 3.81283 15.6884 3.06283 14.9384C2.31283 14.1884 1.72602 13.3065 1.30241 12.2926C0.878798 11.2787 0.666992 10.1815 0.666992 9.00094C0.666992 7.83427 0.878798 6.74399 1.30241 5.7301C1.72602 4.71621 2.31283 3.83427 3.06283 3.08427C3.81283 2.33427 4.69477 1.74399 5.70866 1.31344C6.72255 0.88288 7.81977 0.667603 9.00033 0.667603C10.167 0.667603 11.2573 0.88288 12.2712 1.31344C13.285 1.74399 14.167 2.33427 14.917 3.08427C15.667 3.83427 16.2573 4.71621 16.6878 5.7301C17.1184 6.74399 17.3337 7.83427 17.3337 9.00094C17.3337 10.1815 17.1184 11.2787 16.6878 12.2926C16.2573 13.3065 15.667 14.1884 14.917 14.9384C14.167 15.6884 13.285 16.2752 12.2712 16.6989C11.2573 17.1225 10.167 17.3343 9.00033 17.3343ZM9.00033 16.0843C10.9448 16.0843 12.6114 15.3898 14.0003 14.0009C15.3892 12.612 16.0837 10.9454 16.0837 9.00094C16.0837 7.05649 15.3892 5.38982 14.0003 4.00094C12.6114 2.61205 10.9448 1.9176 9.00033 1.9176C7.05588 1.9176 5.38921 2.61205 4.00033 4.00094C2.61144 5.38982 1.91699 7.05649 1.91699 9.00094C1.91699 10.9454 2.61144 12.6989 4.00033 14.0009C5.38921 15.3898 7.05588 16.0843 9.00033 16.0843Z" fill="#E90005"></path></svg></div><div ><p class="slate-p " ><strong class="slate-bold">NOTE</strong> - Secret keys must be stored securely. Don’t expose your secret key on a website or embed it in a mobile application. BTCPay session requests must be made server side, do not attempt to create a payment client side.</p></div></div><p class="slate-p " >The following properties are required to use this endpoint:</p><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><code class="slate-code">integration</code></div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">returnUrl</code></div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">orderNumber</code></div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">amount</code></div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">currency</code></div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">email</code></div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">name</code></div></li></ul><div style="width:100%;
	min-width:100%;" class="callout-widget" data-type=warning ><div class="callout-icon"><svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.916637 15.5009C0.791637 15.5009 0.683998 15.4732 0.59372 15.4176C0.503443 15.362 0.430526 15.2857 0.37497 15.1884C0.319415 15.0912 0.288165 14.9905 0.28122 14.8864C0.274276 14.7822 0.305526 14.6745 0.37497 14.5634L8.4583 0.605103C8.52775 0.493991 8.60761 0.41413 8.69789 0.365519C8.78816 0.316908 8.88886 0.292603 8.99997 0.292603C9.11108 0.292603 9.21178 0.316908 9.30205 0.365519C9.39233 0.41413 9.47219 0.493991 9.54164 0.605103L17.625 14.5634C17.6944 14.6745 17.7257 14.7822 17.7187 14.8864C17.7118 14.9905 17.6805 15.0912 17.625 15.1884C17.5694 15.2857 17.4965 15.362 17.4062 15.4176C17.3159 15.4732 17.2083 15.5009 17.0833 15.5009H0.916637ZM1.99997 14.2509H16L8.99997 2.1676L1.99997 14.2509ZM9.0833 13.0634C9.26386 13.0634 9.41316 13.0044 9.53122 12.8864C9.64928 12.7683 9.7083 12.619 9.7083 12.4384C9.7083 12.2579 9.64928 12.1086 9.53122 11.9905C9.41316 11.8725 9.26386 11.8134 9.0833 11.8134C8.90275 11.8134 8.75344 11.8725 8.63539 11.9905C8.51733 12.1086 8.4583 12.2579 8.4583 12.4384C8.4583 12.619 8.51733 12.7683 8.63539 12.8864C8.75344 13.0044 8.90275 13.0634 9.0833 13.0634ZM9.0833 10.7509C9.26386 10.7509 9.41316 10.6919 9.53122 10.5739C9.64928 10.4558 9.7083 10.3065 9.7083 10.1259V6.70927C9.7083 6.52871 9.64928 6.37941 9.53122 6.26135C9.41316 6.1433 9.26386 6.08427 9.0833 6.08427C8.90275 6.08427 8.75344 6.1433 8.63539 6.26135C8.51733 6.37941 8.4583 6.52871 8.4583 6.70927V10.1259C8.4583 10.3065 8.51733 10.4558 8.63539 10.5739C8.75344 10.6919 8.90275 10.7509 9.0833 10.7509Z" fill="#F1C21B"></path></svg></div><div ><p class="slate-p " ><strong class="slate-bold"> Note</strong> - Please note that all currency amount fields are in minor units (ie <code class="slate-code">$9.49</code> would be expressed as <code class="slate-code">949</code>). Also be aware that the minimum processable amount is 50 cents (ie <code class="slate-code">50</code> in minor units).</p></div></div><p class="slate-p " ></p>

Creates an BTCPay session that allows the customer to initiate a tokenized payment intent that represents the payment details the customer provided along with some information about their origin. After creating the session server-side, you will want to create the BTCPay payment intent with the session object returned from the BTCPay session response. These 2 steps are considered setup methods that should be called promptly after mounting the component if you want to offer BTCPay and must be called before the customer interacts with the component. 

BTCPay session requests must be made server side and over 

The url to return the user to if a redirect is necessary

returnUrl

A unique (alpha-numeric) payment reference

orderNumber

Original total amount to be paid in minor units

Sections