Crossmint Embedded Checkout #437

XDapps · 2024-09-30T15:52:05Z

Updated keysale checkout page to allow users to pay with a credit card using crossmint.

Added variables to the config file for crossmint projectId & collectionId. These need to be updated with production values.

Testing, deployed to Sepolia develop and tested by confirming successful transactions using the test credit card credentials.

Update: Needs PR#443 merged in to this before this is merged.

…atch design.

XDapps · 2024-09-30T15:57:09Z

packages/core/src/config.ts

@@ -31,6 +31,8 @@ export let config = {
  "subgraphEndpoint": "https://subgraph.satsuma-prod.com/f37507ea64fb/xai/sentry/api",
  "publicRPC": "https://arb1.arbitrum.io/rpc",
  "alchemyApiKey": "oD4X3JXvJclnt36mDkqnp9CO2sZkNhYT",
+  "crossmintProjectId": "", //TODO Add Production Values


I created a chore to add these production values once determined.

CryptITAustria · 2024-10-01T16:57:07Z

apps/web-connect/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env


Do we have a env file for web-connect ?

Yes, I've now added a sample.env for reference.

It does not make sense to have VITE_APP_ENV in an .env file. We need to set it on build time, web-connect is statically build, so there is no runtime making use of the .env file. Then, if its in a file we would have to write that file in the build pipeline but we would rather just incejt the environment variable at build step.

Please let me know if that makes sense, then remove the sample.env please.

It would make sense to write a readme that explains why and when this env variable is important to be added and what its used for.

Thank you for the feedback.

How should this below work in a local development environment for the app to know if it is in production or staging?

const environment = process.env.VITE_APP_ENV === 'development' ? 'staging' : 'production';

I was going off our previous Slack convo where you gave me this variable name to use for this purpose.

Per our Slack conversation. .env file added for local development.

ReadMe updated to inform devs.

CryptITAustria · 2024-10-01T16:59:50Z

apps/web-connect/src/features/checkout/components/CrossmintModal.tsx

+
+    const projectId = config.crossmintProjectId;
+    const collectionId = config.crossmintCollectionId;
+    const environment = process.env.VITE_APP_ENV  === 'production' ? 'production' : 'staging';


Please make it so its production by default and staging only when the env is set to development.
We don't want to have an error in setting the env lead to the production site being on crossmint staging this could have terrible consequences.

CryptITAustria · 2024-10-01T17:01:10Z

apps/web-connect/src/features/checkout/components/CrossmintModal.tsx

+                                        case "payment:process.succeeded":
+                                            setOrderIdentifier(event.payload.orderIdentifier);
+                                            break;
+                                        default:


I don't think we need the default here.

Removed, thank you for the guidance!

CryptITAustria · 2024-10-01T17:01:37Z

apps/web-connect/src/features/checkout/components/Minting.tsx

+        case "transaction:fulfillment.failed":
+          setStatus("failure");
+          break;
+        default:


lets not have empty defaults.

Removed, thank you for the guidance!

CryptITAustria · 2024-10-01T17:02:27Z

apps/web-connect/src/features/checkout/components/Minting.tsx

+              <a
+                target="_blank"
+                className="block bg-[#81feab] rounded-lg mt-3 p-3 text-black"
+                href={`https://staging.crossmint.com/user/collection/polygon-amoy:${result?.contractAddress}:${result?.tokenIds[0]}`}


Is this link the right one ?
polygon-amoy: seems to be some other testnet ?

This has been corrected, thank you! Also, just FYI, when I tested before the change, that link did still open up the crossmint website and the key was visible in the wallet.

CryptITAustria · 2024-10-01T17:03:29Z

pnpm-lock.yaml

You will want to get the one from fb-tiny-keys, then reinstall your new package and then push the new lock file. Do not merge the lock files.

…removed empty defaults

CryptITAustria · 2024-10-02T17:16:53Z

apps/web-connect/.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env


It does not make sense to have VITE_APP_ENV in an .env file. We need to set it on build time, web-connect is statically build, so there is no runtime making use of the .env file. Then, if its in a file we would have to write that file in the build pipeline but we would rather just incejt the environment variable at build step.

Please let me know if that makes sense, then remove the sample.env please.

It would make sense to write a readme that explains why and when this env variable is important to be added and what its used for.

CryptITAustria · 2024-10-02T17:19:49Z

apps/web-connect/src/features/checkout/components/Minting.tsx

+              <a
+                target="_blank"
+                className="block bg-[#81feab] rounded-lg mt-3 p-3 text-black"
+                href={`https://staging.crossmint.com/user/collection/arbitrum-sepolia:${result?.contractAddress}:${result?.tokenIds[0]}`}


This can't be arbitrum-sepolia in production right ?
If its does not make any difference, then lets make it arbitrum for all environments or make that part conditional depending on the APP_ENV

This has been updated to use the env var to determine the network to use.

…/crossmint-button-styling

CryptITAustria · 2024-10-04T13:18:10Z

apps/web-connect/README.md

+
+## ENV
+
+To run locally with development configs, a .env file is required. See sample.env for an example. 


Please add a line about what environment and why its needed. Or add it to the sample.env

…on-styling Updated styling for mint with credit card button

CryptITAustria

I need this to be merged so I will approve, @XDapps still has to make sure the react fix for putting the crossmint status into a useEffect works properly.

github-actions · 2024-10-10T17:07:06Z

🎉 This PR is included in version 1.2.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Jerry Hodges added 7 commits September 27, 2024 17:56

Added Crossmint Embedded Checkout to Key Sale Page

0d49220

feat: Added Crossmint Embedded Checkout. Updated Validation

efa7f6c

Remove Console Logs

0aee62c

feat: added checks to disable buttons if wallet is not connected.

8948d88

feat: added crossmint env vars to config file.

0f3ff10

feat: Update config file to handle env vars and update text copy to m…

065f59f

…atch design.

updated git ignore and corrected env var name

1c0ac0f

XDapps commented Sep 30, 2024

View reviewed changes

XDapps marked this pull request as ready for review September 30, 2024 15:57

XDapps requested review from CryptITAustria and craigbranscom September 30, 2024 15:57

craigbranscom approved these changes Oct 1, 2024

View reviewed changes

CryptITAustria reviewed Oct 1, 2024

View reviewed changes

Jerry Hodges and others added 5 commits October 1, 2024 17:32

fix lock file dependencies, update env to default to production, and …

8d13e1a

…removed empty defaults

Lock FIle Sync

cf36b8d

Merge branch 'fb-tiny-keys' into feat/jh/tk/crossmint-embedded-checkout

c9e6244

Lockfile sync

587b1fe

feat: Added sample env file

68af674

XDapps requested a review from CryptITAustria October 1, 2024 21:48

CryptITAustria requested changes Oct 2, 2024

View reviewed changes

Jerry Hodges added 2 commits October 2, 2024 14:48

Fix incorrect chain name

70faf91

feat: Updated styling for mint with credit card button

a49876a

XDapps mentioned this pull request Oct 2, 2024

Updated styling for mint with credit card button #443

Merged

XDapps and others added 3 commits October 2, 2024 19:55

Merge branch 'feat/jh/tk/crossmint-embedded-checkout' into feat/jh/tk…

49d8a87

…/crossmint-button-styling

feat: Added ENV documentation to readme and updated the sample.env file.

5097055

feat: Set network confirmation link based on env

fb3c37b

XDapps requested a review from CryptITAustria October 3, 2024 19:13

XDapps marked this pull request as draft October 4, 2024 02:30

Jerry Hodges and others added 2 commits October 3, 2024 22:34

Corrected use of env vars

c66b06c

Merge branch 'fb-tiny-keys' into feat/jh/tk/crossmint-embedded-checkout

767d3fe

XDapps marked this pull request as ready for review October 4, 2024 02:35

feat: Added useEffect to crossmint confirmation page

4d77977

CryptITAustria reviewed Oct 4, 2024

View reviewed changes

XDapps and others added 5 commits October 4, 2024 10:06

Merge pull request #443 from xai-foundation/feat/jh/tk/crossmint-butt…

7878739

…on-styling Updated styling for mint with credit card button

Fix PNPM Lock Conflict

5694d88

Fix PNPM Lock File

6e620f5

Merge branch 'fb-tiny-keys' into feat/jh/tk/crossmint-embedded-checkout

ec45a88

Fix PNPM Lock File Sync

befe91f

CryptITAustria approved these changes Oct 4, 2024

View reviewed changes

CryptITAustria merged commit 22a3e6c into fb-tiny-keys Oct 4, 2024
6 checks passed

CryptITAustria deleted the feat/jh/tk/crossmint-embedded-checkout branch October 4, 2024 15:52

github-actions bot added the released label Oct 10, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Crossmint Embedded Checkout #437

Crossmint Embedded Checkout #437

XDapps commented Sep 30, 2024 •

edited

Loading

XDapps Sep 30, 2024 •

edited

Loading

CryptITAustria Oct 1, 2024

XDapps Oct 1, 2024

CryptITAustria Oct 2, 2024

XDapps Oct 2, 2024 •

edited

Loading

XDapps Oct 3, 2024

CryptITAustria Oct 1, 2024

XDapps Oct 1, 2024

CryptITAustria Oct 1, 2024

XDapps Oct 1, 2024

CryptITAustria Oct 1, 2024

XDapps Oct 1, 2024

CryptITAustria Oct 1, 2024

XDapps Oct 1, 2024 •

edited

Loading

CryptITAustria Oct 1, 2024

XDapps Oct 1, 2024

CryptITAustria Oct 2, 2024

CryptITAustria Oct 2, 2024

XDapps Oct 3, 2024

CryptITAustria Oct 4, 2024

CryptITAustria left a comment

github-actions bot commented Oct 10, 2024


		## ENV

		To run locally with development configs, a .env file is required. See sample.env for an example.

Crossmint Embedded Checkout #437

Crossmint Embedded Checkout #437

Conversation

XDapps commented Sep 30, 2024 • edited Loading

Update: Needs PR#443 merged in to this before this is merged.

XDapps Sep 30, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

XDapps Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

XDapps Oct 1, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CryptITAustria left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 10, 2024

XDapps commented Sep 30, 2024 •

edited

Loading

XDapps Sep 30, 2024 •

edited

Loading

XDapps Oct 2, 2024 •

edited

Loading

XDapps Oct 1, 2024 •

edited

Loading