Skip to content
This repository has been archived by the owner on Jan 5, 2024. It is now read-only.

Commit

Permalink
updating checkout-with-card docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@IDubuque
IDubuque committed Jan 3, 2024
1 parent 86ef9dc commit 9f99f39
Showing 1 changed file with 60 additions and 32 deletions.
92 changes: 60 additions & 32 deletions .../22 NFT Checkouts/1b Advanced Guides/0 Embedded Elements/1 CheckoutWithCard.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import { CheckoutWithCard } from "@thirdweb-dev/react";
currency: "ETH",
},
},
// contractArgs (for thirdweb contracts)
// contractArgs (for prebuilt contracts)
contractArgs: {
tokenId: 0,
},
Expand All @@ -67,22 +67,29 @@ import { CheckoutWithCard } from "@thirdweb-dev/react";

### `CheckoutWithCard` props

| Name | Type | Description |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| clientId **\*** | string | thirdweb client ID (Obtained from an API key which you can generate on the [Dashboard](https://thirdweb.com/dashboard)) |
| configs **\*** | object | A list of configs to create your card checkout element. Fields are the same as the ones found in the [Create Checkout Elements Client Secret](https://docs.withpaper.com/reference/create-checkout-elements-client-secret) API. |
| onPaymentSuccess **\*** | ({ transactionId: string; }) => void | This method is called after the payment has been submitted for processing. This payment may still be rejected by the cardholder's bank. |
| onError | (PaymentsSDKError) => void | This method is called when an error is encountered. |
| onPriceUpdate | ({ quantity: number; unitPrice: PriceDetail; networkFees: PriceDetail; serviceFees: PriceDetail; total: PriceDetail; }) => void | This method is called when the price is updated or loaded for the first time. This summary is helpful to show a granular price breakdown. Where PriceDetail is { display: string; valueInSubunits: number; currency: string; } |
| locale | enum Valid values: `en`, `fr`, `es`, `it`, `de`, `ja`, `ko`, `zh` | The language to show text in. Defaults to `en`. |
| options | object | Customize component styling. See [Customization](#customization). |
| Name | Type | Description |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| clientId **\*** | string | thirdweb client ID (Obtained from an API key which you can generate on the [Dashboard](https://thirdweb.com/dashboard)) |
| configs **\*** | object | A list of configs to create your card checkout element. Fields correspond to those in the [Create Checkout Elements Client Secret](https://docs.withpaper.com/reference/create-checkout-elements-client-secret) API. |
| | | **Additional Contract Resources:** |
| | | - _Custom Contracts:_ Refer to [Custom Contracts Guide](/checkouts/custom-contracts) for integration details. |
| | | - _Pre-built Contracts:_ For using pre-built contracts, see [Pre-built Contracts Information](/checkouts/pre-built-contracts). |
| onPaymentSuccess **\*** | ({ transactionId: string; }) => void | This method is called after the payment has been submitted for processing. This payment may still be rejected by the cardholder's bank. |
| onError | (PaymentsSDKError) => void | This method is called when an error is encountered. |
| onPriceUpdate | ({ quantity: number; unitPrice: PriceDetail; networkFees: PriceDetail; serviceFees: PriceDetail; total: PriceDetail; }) => void | This method is called when the price is updated or loaded for the first time. This summary is helpful to show a granular price breakdown. Where PriceDetail is { display: string; valueInSubunits: number; currency: string; } |
| locale | enum Valid values: `en`, `fr`, `es`, `it`, `de`, `ja`, `ko`, `zh` | The language to show text in. Defaults to `en`. |
| options | object | Customize component styling. See [Customization](#customization). |

## Javascript Integration

1. Install the Javascript SDK with your preferred package manager.
- `npm install @thirdweb-dev/payments`
- `yarn add @thirdweb-dev/payments`
2. Call `createCheckoutWithCardElement` to insert the iframe on your page. Pass the `configs` to this component.
1. Install the Javascript SDK:
```Text npm
npm install @thirdweb-dev/payments
```
```Text yarn
yarn add @thirdweb-dev/payments
```
2. Call `createCheckoutWithCardElement` with `configs` to insert the iframe on your page into a new or existing element.
1. If you don't provide `elementOrId`, this call returns an iframe element for you to insert into your page.

### Example code
Expand All @@ -99,10 +106,29 @@ createCheckoutWithCardElement({
configs: {
contractId: "YOUR_CONTRACT_ID",
walletAddress: "0x...",
}
// Mint method (for custom contracts only)
mintMethod: {
name: "claimTo",
args: {
_to: "$WALLET",
_quantity: "$QUANTITY",
_tokenId: 0,
},
payment: {
value: "0.1 * $QUANTITY",
currency: "ETH",
},
},
// contractArgs (for prebuilt contracts)
contractArgs: {
tokenId: 0,
},
},
elementOrId: "paper-checkout-container",
appName: "My Web3 App",
options,
options: {
colorPrimary: "#cf3781",
},
onError(error) {
console.error("Payment error:", error);
},
Expand All @@ -115,23 +141,25 @@ createCheckoutWithCardElement({
//
// const iframe = createCheckoutWithCardElement(...)
// document.getElementById('paper-checkout-container').appendChild(iframe);

```

### Props

| Name | Type | Description |
| ---------------- | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| clientId **\*** | string | thirdweb client ID (Obtained from an API key which you can generate on the [Dashboard](https://thirdweb.com/dashboard)) |
| configs **\*** | object | A list of configs to create your card checkout element. Fields are the same as the ones found in the [Create Checkout Elements Client Secret](https://docs.withpaper.com/reference/create-checkout-elements-client-secret) API. |
| elementOrId | string \| HTMLElement | If provided, the iframe will be appended to this element. You can pass in the DOM element or the `id` associated with the element. A minimum width of 380px is recommended. |
| appName | string | If provided, the wallet card will display your `appName`. |
| locale | enum (Valid values: `en`, `fr`, `es`, `it`, `de`, `ja`, `ko`, `zh`) | The language to show text in. Defaults to `en`. |
| options | object | Customize component styling. See [Customization](#customization). |
| onLoad | () => void | This method is called when the iframe loads. |
| onError | (error: PaymentsSDKError) => void | This method is called when an error occurs during the payment process. |
| onPaymentSuccess | (props: { transactionId: string }) => void | This method is called when the buyer has successfully paid. |
| onReview | (props: { cardholderName: string, id: string }) => void | This method is called after the user enters their card details. |
### `createCheckoutWithCardElement` Parameters

| Name | Type | Description |
| ---------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| clientId **\*** | string | thirdweb client ID (Obtained from an API key which you can generate on the [Dashboard](https://thirdweb.com/dashboard)) |
| configs **\*** | object | A list of configs to create your card checkout element. Fields correspond to those in the [Create Checkout Elements Client Secret](https://docs.withpaper.com/reference/create-checkout-elements-client-secret) API. |
| | | **Additional Contract Resources:** |
| | | - _Custom Contracts:_ Refer to [Custom Contracts Guide](/checkouts/custom-contracts) for integration details. |
| | | - _Pre-built Contracts:_ For using pre-built contracts, see [Pre-built Contracts Information](/checkouts/pre-built-contracts). |
| elementOrId | string \| HTMLElement | If provided, the iframe will be appended to this element. You can pass in the DOM element or the `id` associated with the element. A minimum width of 380px is recommended. |
| appName | string | If provided, the wallet card will display your `appName`. |
| locale | enum (Valid values: `en`, `fr`, `es`, `it`, `de`, `ja`, `ko`, `zh`) | The language to show text in. Defaults to `en`. |
| options | object | Customize component styling. See [Customization](#customization). |
| onLoad | () => void | This method is called when the iframe loads. |
| onError | (error: PaymentsSDKError) => void | This method is called when an error occurs during the payment process. |
| onPaymentSuccess | (props: { transactionId: string }) => void | This method is called when the buyer has successfully paid. |
| onReview | (props: { cardholderName: string, id: string }) => void | This method is called after the user enters their card details. |

## Customization

Expand All @@ -150,7 +178,7 @@ The optional `options` argument allows you to customize the component's styling.

#### Examples

Here's an example component with the following props:
Here's an example component with the following `options` arguments:

```javascript
{
Expand Down

0 comments on commit 9f99f39

Please sign in to comment.