app opens
obtain encrpted purchase from server
paste encrypted purchase, enter card #
transaction successful
obtain receipt from https://dashboard.stripe.com/test/payments
//tab3.tsx
import React, { useState, useEffect } from 'react';
import {IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
IonAlert, IonButton, IonCard, IonCardHeader,
IonCardSubtitle, IonCardTitle, IonCardContent,
IonItem, IonIcon, IonLabel, IonBadge, IonList,
IonItemDivider, IonCheckbox, IonFab, IonFabButton,
IonFabList, IonItemGroup, IonItemSliding,
IonItemOptions, IonItemOption, IonNote, IonMenu,
IonRouterOutlet, IonListHeader, IonMenuToggle,
IonButtons, IonMenuButton, IonInput, IonSplitPane,
IonPopover, IonSpinner, IonRadioGroup, IonRadio,
IonRange, IonSearchbar, IonFooter, IonSegmentButton,
IonSegment, IonToast, IonToggle, IonTextarea, IonText,
IonSelect, IonSelectOption, IonModal, IonBackButton
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';
import {
add, trash, ellipsisHorizontalOutline
} from 'ionicons/icons';
import { Plugins } from '@capacitor/core';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import CheckoutForm from '../components/CheckoutForm'
const Tab3: React.FC = () => {
const buyer_publishable_key = 'pk_test_51GsgRBBMl0RuVIMsHRfU1TJP9jjjVI7QWfSO8zne0ZZ3BALqEvFix8HZiwUPatS33haCJD21eMBtvfsv79NnOopb004Tyq8Enp'
const stripePromise = loadStripe(buyer_publishable_key);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Stripe Example</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<Elements stripe={stripePromise}>
<CheckoutForm />
</Elements>
</IonContent>
</IonPage>
);
};
export default Tab3;
------------------------------------------
//component/checkourform.js
import React, { useState } from 'react';
import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js';import CardSection from '../components/CardSection';
import { IonButton, IonItem, IonLabel, IonInput } from '@ionic/react';
export default function CheckoutForm() {
const [purchase, setPurchase] = useState('')
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (event) => {
// We don't want to let default form submission happen here,
// which would refresh the page.
event.preventDefault();
if (!stripe || !elements) {
// Stripe.js has not yet loaded.
// Make sure to disable form submission until Stripe.js has loaded.
return;
}
const result = await stripe.confirmCardPayment(purchase, {
payment_method: {
card: elements.getElement(CardElement),
billing_details: {
name: 'Jenny Rosen',
},
}
});
if (result.error) {
// Show error to your customer (e.g., insufficient funds)
console.log(result.error.message);
} else {
// The payment has been processed!
if (result.paymentIntent.status === 'succeeded') {
// Show a success message to your customer
// There's a risk of the customer closing the window before callback
// execution. Set up a webhook or plugin to listen for the
// payment_intent.succeeded event that handles any business critical
// post-payment actions.
alert(result.paymentIntent.amount + ' ' + result.paymentIntent.currency + ' paid')
}
}
};
return (
<form onSubmit={handleSubmit}>
<IonItem>
<IonLabel>Purchase</IonLabel>
<IonInput class='ion-text-right' placeholder='server encryption'
onIonChange={e => setPurchase(e.detail.value)}></IonInput>
</IonItem>
<CardSection />
<IonButton disabled={!stripe} expand='block' type='submit'>Stripe Pay</IonButton>
</form>
);
}
-------------------------------------
//component/cardSection.js
import React from 'react';
import {CardElement} from '@stripe/react-stripe-js';
import './CardSectionStyles.css'
const CARD_ELEMENT_OPTIONS = {
style: {
base: {
color: "#32325d",
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: "antialiased",
fontSize: "16px",
"::placeholder": {
color: "#aab7c4",
},
},
invalid: {
color: "#fa755a",
iconColor: "#fa755a",
},
},
};
function CardSection() {
return (
<label>
Card details
<CardElement options={CARD_ELEMENT_OPTIONS} />
</label>
);
};
export default CardSection;
------------------------
//tab3.css
ion-content ion-toolbar {
--background: translucent;
}
.StripeElement {
height: 40px;
padding: 10px 12px;
width: 100%;
color: #32325d;
background-color: white;
border: 1px solid transparent;
border-radius: 4px;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
--------------------------------------------------
server
//app.js
const express = require('express');
const app = express();app.use(express.json());
app.get('/secret', async (req, res) => {
const seller_secret_key = 'sk_test_51GsgRBBMl0RuVIMsE076aFWq5buMWNdj46zRzZykbHn6TIBZPJimLh2bJ8IkD1aFYWcpVCGyZqtzVhNxrgJDc8Ma00Zvul1rGM'
const stripe = require('stripe')(seller_secret_key);
const intent = await stripe.paymentIntents.create({
amount: 123,
currency: 'CAD',
payment_method_types: ['card'],
});
res.json({ client_secret: intent.client_secret });
});
app.listen(3000, () => {
console.log('Running on port 3000');
});
-------------------
//package.json
{
"name": "node_stripe_server","version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"stripe": "^8.62.0"
}
}
reference:
No comments:
Post a Comment